# 2.6 Docker部署多个项目 ### 三. 部署前端项目 #### 1.将前端项目打包到同一目录下（tcm-ui） #### 2. 部署nginx容器 \`\`\`shell docker run --name=nginx -p 80:80 -d nginx \`\`\` #### 3. 复制nginx.conf文件到主机目录 \`\`\`shell mkdir -p /mydata/nginx/conf mkdir -p /mydata/nginx/html docker cp nginx:/etc/nginx /mydata/nginx/conf # 将前端项目复制到html文件夹下，方便修改 cp -r /root/project/tcm-ui/ /mydata/nginx/html \`\`\` \> 原因：以防nginx.conf格式是文件夹导致挂载失败 #### 4. 修改配置nginx.conf文件（当然，也可以在conf.d文件夹中使用单个文件进行配置，推荐） \*\*首先清空文件：\*\* 进入命令模式，也就是输入冒号，再输入以下命令并回车： \`\`\`bash 1,$d \`\`\` \> 这个命令的意思是删除从第1行到最后一行的内容。\`:\`表示进入命令模式，\`1,$\`表示选择从第1行到最后一行的范围，\`d\`表示删除。 \*\*撤回删除操作：\*\* 如果想撤回操作，可以进入命令模式，也就是输入冒号，再输入 u 并回车。 \*\*将以下内容粘贴入文件中：\*\* \`\`\`shell 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; } } } \`\`\` 另一种写法（使用了另一个项目，但一样的方式和路径）： \`\`\`shell worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/json; sendfile on; keepalive_timeout 65; server { listen 8889; # 指定nginx中前端项目所在的位置 location / { root /usr/share/nginx/html/pineapple; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /api/ { #proxy_redirect off; proxy_set_header Host $http_host; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://47.121.194.22:9992/; } } server { listen 8890; # 指定前端项目所在的位置 location / { root /usr/share/nginx/html/pineapple-ui; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location /prod-api/{ #proxy_redirect off; proxy_set_header Host $http_host; proxy_set_header REMOTE-HOST $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass http://47.121.194.22:9992/; } } } \`\`\` 使用 :wq 回车保存文件 \*\*注意:\*\* \* conf和tcm-ui文件夹放在同一目录下 \* 在开启反向代理中的/api和/prod-api分别为前台后台中.env文件（生产环境）中的base api，如下: ![image-20240417010825403](https://hgh-typora-image.oss-cn-guangzhou.aliyuncs.com/img/image-20240417010825403.png) ![image-20240417010056495](https://hgh-typora-image.oss-cn-guangzhou.aliyuncs.com/img/image-20240417010056495.png) #### 5. 删除之前安装的nginx \`\`\`shell docker rm -f nginx \`\`\` #### 6. 部署nginx容器 \`\`\`shell docker run -d \\ --name nginx \\ -p 9090:9090 \\ -p 9091:9091 \\ -v /mydata/nginx/html:/usr/share/nginx/html \\ -v /mydata/nginx/logs:/var/log/nginx \\ -v /mydata/nginx/conf/nginx:/etc/nginx \\ nginx \`\`\` \> -v /mydata/nginx/html:/usr/share/nginx/html ：是将本地html路径下的文件映射到html目录下，路径为.../html/..... #### 7. 测试 前台网页：47.XXX.15.23:9090 后台网页：47.XXX.15.23:9091 #### 8. 常见问题 \* 报错403：反向代理配置错误（一般为base api错误），或者html文件夹无内容 \* 页面无法访问：配置文件中前端路径错误