当前位置: 首页 > news >正文

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,如下:
image-20240417010825403 image-20240417010056495
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错误)
  • 页面无法访问:配置文件中前端路径错误
http://www.lryc.cn/news/359073.html

相关文章:

  • 如何格式化只读U盘?
  • 【并查集】专题练习
  • 服装连锁店收银系统需要具备的五大功能
  • IMU状态预积分代码实现 —— IMU状态预积分类
  • C语言编程:探索最小公倍数的奥秘
  • Java设计模式-活动对象与访问者
  • 用HAL库改写江科大的stm32入门-6-3 PWM驱动LED呼吸灯
  • [数据集][目标检测]喝水检测数据集VOC+YOLO格式995张3类别
  • 【C++】开源:RabbitMQ安装与配置使用(SimpleAmqpClient)
  • git使用流程与规范
  • 力扣 264. 丑数 II python AC
  • resetlogs强制拉库失败并使用备份system文件还原数据库故障处理---惜分飞
  • 解析Java中1000个常用类:Error类,你学会了吗?
  • 【C++】——string模拟实现
  • unity2D跑酷游戏
  • OWASP top10--SQL注入(四、sqlmap安装及使用)
  • Java基础入门day62
  • Oracle中两张表具有相同结构,如何将一张表内容全部插入到另一个表中
  • 比特币的理论上限是多少个?
  • LeetCode-131 分割回文串
  • Flutter 中的 SliverPrototypeExtentList 小部件:全面指南
  • NeuralForecast 推理 - 数据集从文件dataset.pkl读
  • TS-类型转换(显式)
  • protobufjs 配置踩坑记录
  • freeswitch官方仓库
  • element ui el-calendar日历组件完整代码
  • 初识java——javaSE(8)异常
  • C语言面试题11至20题
  • 视频汇聚EasyCVR综合安防平台对接GA/T1400公安视图库及应用方案
  • 在Github找自己想要的的项目