多个nginx集群部署_NGINX 部署多个VUE项目（测试环境）

最新推荐文章于 2024-08-02 15:55:29 发布

银河屯田地球捕鱼

最新推荐文章于 2024-08-02 15:55:29 发布

阅读量1.3k

点赞数

文章标签：多个nginx集群部署

本文链接：https://blog.csdn.net/weixin_36251916/article/details/113330344

版权

本文介绍了如何在nginx环境下部署多个Vue项目。通过调整端口和root目录，结合nginx配置文件的修改，可以实现不同项目的独立部署。操作步骤包括检查nginx进程、启动/关闭/重启nginx，以及配置和重启nginx以验证部署成功。

摘要由CSDN通过智能技术生成

先熟悉一下nginx命

查看nginx进程是否启动：ps -ef | grep nginx

进入安装目录中(配置环境变量后，无需再输入./)

命令： cd /usr/local/nginx/sbin

./nginx 启动

./nginx -s stop 关闭

./nginx -s reload 重启

=====>>> 部署单独项目

nginx中单设置一个web前端很容易，改变端口，改变root指向基本就搞定了

首先查看项目中的配置路径(当然不止这一个地方，就看你设置了几个地方)

var router = new VueRouter({
  routes,mode: "history",base: '/'

})

配置修改 nginx/conf/nginx.conf

放入服务器 nginx/html 目录下

重启nginx =====>>> 部署多个项目 首先得创建个新的文件夹

修改项目默认路径

export default new Router({base: '/manager/',mode: 'history', // 去掉url中的#scrollBehavior:()=>({y:0}),routes: constantRoutes})

不只是这一个地方，其余地方也必须改例如 vue.config.js配置登入登出就不展示了

配置修改 nginx/conf/nginx.conf

server { listen 80; #端口号 server_name localhost; root /opt/nginx/html; #dist目录指向你本地的工作目录，相当重要 index index.html index.htm; #打开默认文件为index.html location / { root html; index index.html index.htm; try_files $uri $uri/ /index.html; } location /manager/ { proxy_pass http://127.0.0.1:81/; client_max_body_size 100M; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } server { listen 81; server_name localhost; root /opt/nginx/html/manager; #dist目录指向你本地的工作目录，相当重要 index index.html index.htm; #打开默认文件为index.html location / { root html/manager; index index.html index.htm; try_files $uri $uri/ /index.html; } }

将打包产生的新文件放入服务器指定文件下