Gravitee使用指南（四）部署APIM管理界面

前几篇我们讲了如何部署Gravitee网关和管理平台，这一篇我们介绍一下如何部署他们的管理界面

APIM有两个界面，一个是发布API已经管理插件和网关各种配置的管理后台，另一个则是API使用者订阅API的订阅平台：APIM-UI和Portal-UI,前端应用的部署相对简单，而且是完全开源的，我们先来看一下官方文档的部署方式

APIM-UI

docker run \
        --publish 80:8080 \
        --env MGMT_API_URL=http://localhost:81/management/organizations/DEFAULT/environments/DEFAULT \
        --name management-ui \
        --detach  \
        graviteeio/apim-management-ui:latest
复制代码

Protal-UI

docker run \
        --publish 80:8080 \
        --env PORTAL_API_URL=http://localhost:81/portal/environments/DEFAULT \
        --name portal-ui \
        --detach  \
        graviteeio/apim-portal-ui:latest
复制代码

上面的两个命令中MGMT_API_URL和PORTAL_API_URL的地址就是我们APIM的监听地址，换成对应的地址即可

前端应用部署非常简单，也需要复杂的配置和参数修改，但是有个槽点就是，这个UI是英文的，你需要进行国际化，国际化之后还是需要自己编译部署，所以我最后使用的是源码编译镜像然后自行运行容器的方式。
源码编译需要注意以下几个坑：

1.NodeJS版本问题，在编译之前你需要找到源码中的.nvmrc文件，查看文件中标识的node版本并且使用指定版本进行源码的编译，否则会报错，建议使用nvm解决这个问题。

2.后端接口的路径如果固定不变可以写在配置文件里，配置在constants.json文件里

部署Node应用一般都是nginx,我这里贴一下nginx.conf

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
 proxy_temp_path /tmp/proxy_temp;
    client_body_temp_path /tmp/client_temp;
    fastcgi_temp_path /tmp/fastcgi_temp;
    uwsgi_temp_path /tmp/uwsgi_temp;
    scgi_temp_path /tmp/scgi_temp;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;


server {
    listen 8080;
    listen 8443;
    server_name _;

    index index.html index.htm;
    charset utf-8;

    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript;

    location / {
        try_files $uri $uri/ =404;
        root /usr/share/nginx/html;
    }

    # redirect server error pages to the static page /50x.html
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#        location = /404.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#        }
#    }

}
复制代码

然后是Dockerfile ,Dockerfile中的nginx.conf就是上面的内容

FROM nginx:1.19-alpine
COPY ./ /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories
RUN apk update \
        && apk add --update --no-cache zip unzip netcat-openbsd wget
CMD ["nginx", "-g", "daemon off;"]
复制代码

两个前端应用部署基本上是一致的，部署完成之后访问APIM-UI,如果无法正常访问，那么一定是你配置APIM的路径或者APIM有问题，正常访问后，我们可以看到我们的网关实例列表,如果你的网关版本和APIM不一致，那么会无法正确识别到网关，这是个大坑一定要注意

Protal-UI正常访问后的效果

到这里我们的部署流程就完毕了，如果遇到问题一多半是文件没有copy全或者项目目录不对，前端应用如果报错基本上都是APIM的问题，看一下log顺藤摸瓜就都能解决。