多个vue项目生产环境下NGINX配置文件
多个vue项目生产环境下NGINX配置文件
使用场景
1.多个前端项目
2.多个后端项目
3.修改nginx配置后端接口转发路径
4.反向代理 某个目录下 带特定后缀名的文件
5.vue3项目
使用前提
1.前端修改接口文件
2.前端修改打包文件和资源配置目录
3.修改nginx 配置文件
打包文件夹名称为:execute、solder、cutter
前端项目一访问路径:http://192.167.1.67/execute
前端项目二访问路径:http://192.167.1.67/solder
前端项目三访问路径:http://192.167.1.67/cutter
后端接口地址(项目一):http://localhost:8081
后端接口地址(项目二):http://localhost:8082
后端接口地址(项目三):http://localhost:8083
因为本地服务器上配置得的项目,所以后端接口配置的是本地的地址
配置
前端配置
另外两个前端配置同理
a.在vue.config.js中设置 publicPath: ‘/execute/’
// 项目部署的基础路径 publicPath
// 我们默认假设你的应用将会部署在域名的根部,
// 比如 https://www.my-app.com/
// 如果你的应用时部署在一个子路径下,那么你需要在这里 ./
// 指定子路径。比如,如果你的应用部署在
// https://www.foobar.com/my-app/
// 那么将这个值改为 /my-app/
b.修改public文件夹中的index.html文件
增加
c.修改路由router文件夹中的index.js文件
增加 base:’/execute/’,
d.在axios文件夹中axios.js文件
修改后端接口地址
增加execute_api,在nginx反向代理的时候找到自己的接口地址
nginx配置
#主项目 默认项目
location / {
root html;
index index.html index.htm;
}
#默认地接口地址
location /api/ {
proxy_pass http://localhost:8080;
}
#项目一
location /execute{
alias /usr/share/nginx/execute/;
try_files $uri $uri/ /execute/index.html;
index index.html index.htm;
}
#项目二
location /cutter{
alias /usr/share/nginx/cutter/;
try_files $uri $uri/ /cutter/index.html;
index index.html index.htm;
}
#项目三
location /solder{
alias /usr/share/nginx/solder/;
try_files $uri $uri/ /solder/index.html;
index index.html index.htm;
}
#项目一接口
location /execute_api/ {
proxy_pass http://localhost:8081/;
}
#项目二接口
location /solder_api/ {
proxy_pass http://localhost:8082/;
}
#项目三接口
location /cutter_api/ {
proxy_pass http://localhost:8083/;
}
这时候的网页项目访问路径
前端项目一访问路径:http://192.167.1.67/execute
前端项目二访问路径:http://192.167.1.67/solder
前端项目三访问路径:http://192.167.1.67/cutter
页面调用的接口为:http://192.167.1.67/execute_api/auth/login
实际的接口路径为:http://localhost:8081/auth/login
完整的配置文件:
#user nobody;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;#log_format main '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '# '"$http_user_agent" "$http_x_forwarded_for"';#access_log logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;server {listen 80;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;location / {root html;index index.html index.htm;try_files $uri $uri/ /index.html;}location /api/ {proxy_pass http://localhost:8080;}location /execute{alias /usr/share/nginx/execute/;try_files $uri $uri/ /execute/index.html;index index.html index.htm; }location /cutter{alias /usr/share/nginx/cutter/;try_files $uri $uri/ /cutter/index.html;index index.html index.htm; }location /solder{alias /usr/share/nginx/solder/;try_files $uri $uri/ /solder/index.html;index index.html index.htm; }location /execute_api/ {proxy_pass http://localhost:8081/;}location /solder_api/ {proxy_pass http://localhost:8082/;}location /cutter_api/ {proxy_pass http://localhost:8083/;} #error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {# proxy_pass http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {# root html;# fastcgi_pass 127.0.0.1:9000;# fastcgi_index index.php;# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;# include fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {# deny all;#}}# another virtual host using mix of IP-, name-, and port-based configuration##server {# listen 8000;# listen somename:8080;# server_name somename alias another.alias;# location / {# root html;# index index.html index.htm;# }#}# HTTPS server##server {# listen 443 ssl;# server_name localhost;# ssl_certificate cert.pem;# ssl_certificate_key cert.key;# ssl_session_cache shared:SSL:1m;# ssl_session_timeout 5m;# ssl_ciphers HIGH:!aNULL:!MD5;# ssl_prefer_server_ciphers on;# location / {# root html;# index index.html index.htm;# }#}}
注意
1.打包前vue.config.js必须配置publicPath:’/execute/’,
2.转发的接口地址后面必须要加一个 / 字符
如果不加这个反斜杠的话
后端调用的实际地址就会变成:http://localhost:8081/execute_api/auth/login
3.配置好nginx.conf文件后,需检查配置文件格式是否正确
nginx -t 验证conf文件是否配置正确
4.所有东西配置完成后,先启动后端项目,然后需要重新重启一下nginx
nginx -s reload 重新加载NGINX配置生效
5.需要注意的是,
alig后面的路径是你的html文件夹的路径,我的三个项目的打包文件夹都是与html文件夹同级
6.如果后端项目是war包的话,启动命令为 jave -jar 包名
问题
1.前端页面能打开,后端接口调用不到
a.检测后端接口端口是不是8080
b.检测后端有没有启动
c.可能是反向代理地址有问题
如下图就是nginx反向代理地址不对或接口没有启动的问题
本文可能比较繁杂,可能某些操作是不必要的!我尽可能的全部都加进去了。
本文引用
nginx 部署多个前端项目
https://blog.csdn.net/kielin/article/details/94459660
nginx 反向代理 某个目录下 带特定后缀名的文件
https://blog.csdn.net/comeonyangzi/article/details/103668647?utm_term=nginx%E8%B7%AF%E5%BE%84%E5%8A%A0%E5%90%8E%E7%BC%80&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduweb~default-1-103668647&spm=3001.4430
多个vue项目生产环境下NGINX配置文件
https://blog.csdn.net/sinat_31908303/article/details/100546218
nginx配置后端接口转发路径
https://www.cnblogs.com/zzzqi/p/13214477.html
nginx部署项目刷新404问题
https://blog.csdn.net/u010681318/article/details/109890627
多个vue项目生产环境下NGINX配置文件相关推荐
- Vue项目生产环境解决跨域问题
一.前言 第一次写vue项目,开发完成.打包上线后,一访问,发现访问后端的请求全部报404.我就纳闷了,跨域问题我已经解决了,怎么就报错了.查阅资料,得知我解决的跨域仅适用于开发环境. ememem. ...
- 生产环境下nginx代理跨域解决
1.首先,需要修改代码 找到你需要proxy代理的地址.我的项目需要修改的地址在services 目录下的文件中. 例如你需要代理的地址为src='http://baidu.com' 则你需要修改为 ...
- vue在生产环境、测试环境和开发环境,三种环境下配置不同的api地址
vue在生产环境.测试环境和开发环境,三种环境下配置不同的api地址 我们大多数在开发的时候,都会有三种环境,一个是开发环境,一个是测试环境,一个是生产环境,我们打包的时候需要根据不同的环境去加载不同 ...
- vue 关闭log_vue或react项目生产环境去掉console.log的操作
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console. 如果手动删除未免也太累了,再说以后想再开发还得重新写console. 事实上webpack提供了 ...
- Python开发【项目】:生产环境下实时统计网站访问日志信息
日志实时分析系统 生产环境下有需求:要每搁五分钟统计下这段时间内的网站访问量.UV.独立IP等信息,用直观的数据表格表现出来 环境描述: 网站为Nginx服务,系统每日凌晨会对日志进行分割,拷贝到其他 ...
- JAVA生产环境验证_Java生产环境下性能监控与调优详解
本课程将为你讲解如何在生产环境下对Java应用做性能监控与调优:通过本课程,你将掌握多种性能监控工具应用,学会定位并解决诸如内存溢出.cpu负载飙高等问题:学会线上代码调试,Tomcat.Nginx, ...
- 用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
- Vue.js 生产环境部署
生产环境部署 开启生产环境模式 开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱.而在生产环境下,这些警告语句却没有用,反而会增加应用的体积.此外,有些警告检查还有一些小的运行时开销,这在 ...
- 视频生产环境下的音视频解决方案
随着云剪辑.云导播.音视频生产在线协作的兴起, 生产环境下的音视频处理越发为人所关注.音视频处理在生产环境下,对控制精准性有着更高的要求.从服务端到客户端,精准的时间控制.画面控制都是生产环境音视频和 ...
最新文章
- 「交互式梦境」首次被验证:睡着后,还能回答数学问题
- 从“IBM刀片服务器广告告别电视”说起
- 使用U盘安装CentOS6.5
- 《尼山萨满》项目美术亲述游戏创作过程
- 【VBA】查看窗口当前状态
- Gitbook+码云创建自己的文档
- 初学者python笔记(装饰器后篇:登陆验证)
- nginx 日志过滤网络爬虫
- 2021数学建模A题详细思路
- c语言迭代埃特金加速算法,5-埃特金加速迭代算法
- 21秋期末考试建设工程法规10221k1
- python打印星号组成的三角形_Python利用for循环打印星号三角形的案例
- 英语发音规则---Y字母
- 电话骚扰 【响完一声开始没有任何声音】
- python绑定按键pageup键_键盘事件keydown、keypress、keyup随笔整理总结(摘抄)
- Wifi模块-ESP-01s
- HTML 媒体、表单和音视频笔记
- 区块链投资分歧:蔡文胜麦刚入局 朱啸虎张颖看衰
- 产品经理的修炼:怎样把梳子卖给和尚
- 【经典密码】移位密码和代换密码的实现
热门文章
- [js高手之路] dom常用API【appendChild,insertBefore,removeChild,replaceChild,cloneNode】详解与应用
- SN74LVCC3245ADBR
- 【考试记录】Apsara Clouder大数据技能认证:MOOC网站日志分析
- 【漫漫科研路\PythonTikz】画神经网络相关图
- 银行工作可获得的薪酬及待遇
- CVPR2020目标检测方向论文
- 混沌交易策略(鳄鱼线)
- 手机客户端添加设备时需要扫描二维码,如何查找二维码
- 微信公众号开发教程[010]-消息管理-获取公众号的自动回复规则
- 16.355J / ESD.355J 软体工程概念