前几篇我们讲了如何部署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顺藤摸瓜就都能解决。