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.xxx.15.23:9090

后台网页：47.xxx.15.23:9091

8. 常见问题

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