服务器上使用nginx部署多个多个应用

发布：2022/9/24 15:59:01作者：管理员来源：本站浏览次数：1008

1 参考文档

配置参考 | Vue CLI

如何在nginx同一端口下部署多个vue项目 | 字节逆旅-掘金

【网络】[::]:80是什么意思 / [::]是什么意思 | 微笑丶1998-CSDN

nginx的反向代理proxy_pass指令 | 牛牛Blog-CSDN

2 个人需求：在一个端口号下部署多个应用

只有一个域名，我的域名为 cau1i.cn，只有一个端口80。

服务器部署了Halo博客，Halo默认端口为8090，并且已经使用nginx将其映射成了80，可以使用 cau1i.cn 直接访问到博客。

现在仍需要用这个域名部署一个Vue项目，使得其可以用 cau1i.cn/vue 来访问该项目。

🚀3 前端配置

3.1 静态资源地址配置。

在vue.config.js文件下找到publicPath配置。在官方文档可以查看publicPath说明。

publicPath: process.env.NODE_ENV === 'development' ? '/' : '/vue/',

在这里插入图片描述

默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/。

这个值也可以被设置为空字符串 (‘’) 或是相对路径(‘./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid应用的文件系统中。

注意是与package.json同级的vue.config.js，而不是public中的config.js，之前一直写错，导致找不到静态资源。

3.2 配置vue项目路由。

将 base: ‘/vue/’, 应用到vue项目路由中。

在这里插入图片描述

3.3 打包项目。

使用npm run bulid打包之后，会生成dist文件夹，在dist文件夹中，你会找到index.html页面，类似下图。所有src的前缀会加上/vue/,并且会生成meta base=“/vue/”。

在这里插入图片描述

🚀4 nginx配置

4.1 找到nginx配置文件。

我的nginx在/www/server/nginx下。

cd /www/server/nginx

cd conf

vim ngnix.conf

在这里插入图片描述

4.2 编辑配置ngnix.conf文件。

server

{

listen 80;# 端口号

listen [::]:80;

server_name cau1i.cn;# 域名

client_max_body_size 1024m;

# Halo的代理

location / {

proxy_pass http://localhost:8090/;

proxy_set_header HOST $host;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

# Vue项目的代理

location /vue {

alias /home/server/dist; # 项目所在位置，并且注意为alias而不是root

index index.html index.htm;

try_files $uri $uri/ /vue/index.html; # 注意/vue/前缀

}

access_log /www/wwwlogs/access.log;

}

listen 80：端口号为80。

listen [::]:80：参考第三篇文章。

server_name：域名。

client_max_body_size：Nginx 默认的 client_max_body_size 配置大小为 1m，可能会导致在 Halo 后台上传文件被 Nginx 限制，可根据需要自行修改。

proxy_pass：参考第四篇文章。

alias /home/server/dist：为我的项目文件所在位置。

在这里插入图片描述

root和alias的区别以及try_files的作用：参考第二篇文章。

在这里插入图片描述

📋 5 通过域名访问

5.1通过 http://cau1i.cn/ 访问成功

在这里插入图片描述

2、通过 http://cau1i.cn/vue 访问成功

在这里插入图片描述

❌6 起初错误的想法

起初想法是使用 cau1i.cn 直接访问项目，而使用 cau1i.cn/halo 访问博客。

但是如下配置，会导致halo找不到静态文件。

server

{

listen 80;

listen [::]:80;

server_name cau1i.cn;

client_max_body_size 1024m;

location / {

root /home/server/dist;

index index.html index.htm;

try_files $uri $uri/ /index.html;

}

location /halo {

proxy_pass http://localhost:8090/;

proxy_set_header HOST $host;

proxy_set_header X-Forwarded-Proto $scheme;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

access_log /www/wwwlogs/access.log;

}

　C# 使用IIS与Nginx 布置服务器端负载均衡

Windows server系统一招防止权限暴力破解　

IIS tomcat共用80端口解决一个IP多个域名：使用Nginx反向代理方式使两者兼容 Nginx的使用（一）Nginx+IIS实现一个网站绑定多个https域名 nginx 一个域名配置多个入口(端口)？ Nginx同一个域名配置多个项目 k8s集群在多个公网服务器搭建过程使用nginx部署Vue项目，刷新出现404 服务器上使用nginx部署多个多个应用 C# 使用IIS与Nginx 布置服务器端负载均衡使用Eclipse发布Web项目并部署到Tomcat服务器同一台云服务器部署的网站如何绑定多个SSL证书？

柏港建站平台

柏港 Nginx

服务器上使用nginx部署多个多个应用

柏港为您推荐了一些相关资讯