2.6 Docker部署多个前端项目

2.6 Docker部署多个项目

三. 部署前端项目

1.将前端项目打包到同一目录下（tcm-ui）

2. 部署nginx容器

docker run --name=nginx -p 9090:9090 -p 9091:9091 -d nginx

3. 复制nginx.conf文件到主机目录

docker cp nginx:/etc/nginx/nginx.conf /root/java_project/tcm/tcm-service/conf/nginx.conf 

原因：以防nginx.conf格式是文件夹导致挂载失败

4. 修改配置nginx.conf文件

worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/json;sendfile        on;keepalive_timeout  65;server {listen       9090;# 指定nginx中前端项目所在的位置location / {root /usr/share/nginx/html/tcm-front;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}# 反向代理location /api {rewrite /api/(.*)  /$1 break;# 对应后端接口路径proxy_pass http://47.120.15.23:8888;}}server {listen       9091;# 指定前端项目所在的位置location / {root /usr/share/nginx/html/tcm-back;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}location /prod-api {rewrite /prodapi/(.*)  /$1 break;proxy_pass http://47.120.15.23:8880;}}
}

注意:

• conf和tcm-ui文件夹放在同一目录下
• 在开启反向代理中的/api和/prod-api分别为前台后台中.env文件（生产环境）中的base api，如下:

5. 删除之前安装的nginx

docker rm -f nginx

6. 部署nginx容器

docker run -d \--name nginx \-p 9090:9090 \-p 9091:9091 \-v /root/java_project/tcm/tcm-service/tcm-ui:/usr/share/nginx/html \-v /root/java_project/tcm/tcm-service/conf/nginx.conf:/etc/nginx/nginx.conf \--network tcm \nginx

7. 测试

前台网页：47.120.15.23:9090

后台网页：47.120.15.23:9091

8. 常见问题

• 报错403：反向代理配置错误（一般为base api错误）
• 页面无法访问：配置文件中前端路径错误