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

一个端口配置两个vue和后端服务,nginx以及前后端服务怎么配?

nginx配置重点看server中的内容:

worker_processes  8;
pid /usr/local/nginx/logs/nginx.pid;events {# 此为 Linux 系统特为处理大批量文件描述符而作改进的 poll 事件模型use epoll;worker_connections  512; # 工作进程的最大连接数量# 允许同时接受多个网络连接multi_accept on;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;include       gzip.conf;server_names_hash_bucket_size 128;server_names_hash_max_size 512;client_header_timeout 15s;client_body_timeout 15s;send_timeout 30s;client_body_buffer_size 512k;client_header_buffer_size 4k;client_max_body_size 512k;large_client_header_buffers 2 8k;proxy_connect_timeout 5s;proxy_send_timeout 120s;proxy_read_timeout 120s;proxy_buffer_size 16k;proxy_buffers 4 64k;proxy_busy_buffers_size 128k;proxy_temp_file_write_size 128k;proxy_next_upstream http_502 http_504 http_404 error timeout invalid_header;#gzip on;#gzip_min_length 1k;#gzip_buffers 4 16k;#gzip_http_version 1.1;#gzip_comp_level 4;#gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;#gzip_vary on;#gzip_disable "MSIE [1-6].";server {listen       80;server_name  localhost;#charset koi8-r;#access_log  logs/host.access.log  main;# 第一个服务的vue项目位置location / {alias /usr/data/nginx/firstFront/;try_files $uri $uri/ /index.html;}# 第二个服务的vue项目位置location /second {alias /usr/data/nginx/secondFront/;try_files $uri $uri/ /second /index.html;}# 第一个服务的后端项目location ^~ /back {# 配置websocket -------start---------proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";# 配置websocket -------end---------client_max_body_size 1000M;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Via "nginx";proxy_intercept_errors on; #重要,只有这样才能到nginx定义的404页面proxy_pass              http://localhost:8080/back/; # 后端项目地址}# 第二个服务的后端项目location ^~ /back/second{# 配置websocket -------start---------proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";# 配置websocket -------end---------client_max_body_size 1000M;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header Via "nginx";proxy_intercept_errors on; #重要,只有这样才能到nginx定义的404页面proxy_pass              http://localhost:8081/back/; # 后端项目地址}#error_page  404              /404.html;# redirect server error pages to the static page /50x.htmlerror_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}

vue前端项目配置

vue第一个项目配置:

# 发布路径
VITE_PUBLIC_PATH = /
#后台接口父地址(必填)
VITE_GLOB_API_URL=/back
#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=/back

vue第二个项目配置

# 发布路径
VITE_PUBLIC_PATH = /second
#后台接口父地址(必填)
VITE_GLOB_API_URL=/back/second
#后台接口全路径地址(必填)
VITE_GLOB_DOMAIN_URL=/back/second

访问地址

第一个项目:http://domain:80/
第二个项目:http://domain:80/second

http://www.lryc.cn/news/386082.html

相关文章:

  • 295. 数据流的中位数
  • OCR训练和C#部署英文字符训练
  • webpack【实用教程】
  • 如何使用C++进行文件读写操作
  • Tensorflow Lite移动平台编译
  • 2024年6月24日-6月30日(ue5肉鸽视频p16-p25)
  • LeetCode.面试题17.24.最大子矩阵详解
  • 云动态摘要 2024-06-28
  • 六、资产安全—信息分级资产管理与隐私保护(CISSP)
  • 香港服务器托管对外贸行业必要性和优势
  • Vue Router 导航守卫,多次执行的解决方案
  • SpringBoot集成道历(实现道历日期查询)
  • 面对.rmallox勒索病毒:如何有效防范及应对
  • 嘉立创学习
  • ECharts 响应式设计
  • 基于java语言+springboot技术架构开发的 互联网智能3D导诊系统源码支持微信小程序、APP 医院AI智能导诊系统源码
  • MySQL事务——Java全栈知识(31)
  • 2毛钱不到的2A同步降压DCDC电压6V频率1.5MHz电感2.2uH封装SOT23-5芯片MT3520B
  • Ubuntu安装、更新和删除软件
  • 消息队列kafka中间件详解:案例解析(第10天)
  • Linux高级编程——线程
  • 技术学习的奥秘与乐趣
  • 创新前沿:Web3如何颠覆传统计算机模式
  • 一文弄懂梯度下降算法
  • 确认偏差:金融市场交易中的隐形障碍
  • Linux系统之部署linkding书签管理器
  • springcloud-gateway 路由加载流程
  • 双减期末考试成绩怎么公布?
  • 2, 搭建springCloud 项目 测试demo
  • RabbitMQ消息积压比较厉害,然后突然丢弃