100字范文 > 使用 nginx 同域名下部署多个 vue 项目并使用反向代理

使用 nginx 同域名下部署多个 vue 项目并使用反向代理

时间：2022-10-29 19:54:19

花了 3 天时间，趁着我还没有忘记，先记录下来

效果

目前有 2 个项目（project1,project2），还有一个nginx自带的index.html，我添加了对应的链接代码（稍后粘贴出来），为了统一管理子项目的路由。

我期望实现下面的效果（假设ip: localhost，port: 8080）：

http://localhost:8080/ 进入最外层的 index.htmlhttp://localhost:8080/project1 进入项目一http://localhost:8080/project2 进入项目二

废话不多说，开始配置

Vue 的配置

本人使用的是vue-cli2搭建的项目，所以对应的需要修改一些vue的配置参数。

config 文件夹下的 index.js，因为是打包，所以我们需要在build.assetsPublicPath更改对应项目名，譬如

// project1module.exports = {dev: {},build: {assetsPublicPath: '/project1/' // 注意前后的 ‘/’}}// project2module.exports = {dev: {},build: {assetsPublicPath: '/project2/' // 注意前后的 ‘/’}}

config 文件夹下的 prod.env.js 修改成这样：

// project1module.exports = {NODE_ENV: '"production"',BASE_API: '"/api/pro1"' // 这里待会与 nginx 配置对应}// project2module.exports = {NODE_ENV: '"production"',BASE_API: '"/api/pro2"' // 这里待会与 nginx 配置对应}

[注意]因为我在项目中使用到了BASE_API作为代理的前缀，如果你的不在这边，你需要找到你自己的代理配置

因为每个人的vue-router文件配置不一样，你需要找到你的 router 配置文件，内部修改为：

// 我采用了 history 模式，hash 模式我没有测试，感觉应该是一样的效果// project1export default new Router({base: '/project1/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPathmode: 'history',scrollBehavior: () => ({ y: 0 }),routes: []})// project2export default new Router({base: '/project2/', // 注意更改你子项目名，这个对应你的 build.assetsPublicPathmode: 'history',scrollBehavior: () => ({ y: 0 }),routes: []})

[注意]在npm run build可能会报错：.tap(*)之类的，那是因为打包中的html-webpack-plugin版本出现了问题，可以执行下面的语句

# 这个版本就是你的 package.json 中的版本，只不过你需要重新再指定这个版本$ npm i html-webpack-plugin@4.0.0-alpha -D

Nginx 的配置

首先我的目录是这样的，无关文件全部以...展示

.├─conf│ ├─... # 其他文件│ └─nginx.conf│├─html # 只看这里，其他暂时我没用到 │ ├─project1│ │ └─static│ │├─css│ │├─fonts│ │└─js│ │├─g│ │└─V│ ├─project2│ │ └─static│ │ ├─css│ │ ├─fonts│ │ └─js│ │ ├─g│ │ └─V│ ├─index.html│ └─50x.html└─... # 其他文件

[解释]我的nginx目录就是原生的，内部包含了一个html文件夹，为了省事，我直接使用这个，当然你也可以指定其他的目录，但是目前还请和我一样的配置，后面可以自己定制化。

现在我们开始配置在conf文件夹下的nginx.conf文件

我是直接在原始文件上修改的，而修改的配置都是在http模块中，所以其他的不需要的代码我直接用...代替。

# ...# 反向代理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"';sendfile on;keepalive_timeout 65;client_max_body_size 20M;client_body_buffer_size 10M;large_client_header_buffers 4 128k;# 这里可以做集群upstream p1_server {server localhost:8081;}# 这里可以做集群upstream p2_server {server localhost:8082;}server {listen 8080;server_name localhost;charset utf-8;proxy_connect_timeout 180;proxy_send_timeout 180;proxy_read_timeout 180;proxy_set_header Host $host;proxy_set_header X-Forwarder-For $remote_addr;root html; # 这里指定刚刚我们的文件夹# 总的项目路由，我偷懒直接写在了同一个文件# 如果有很多可以在配置多个 conf 文件，使用 include 关联进来location / {try_files $uri $uri/ /index.html; # 这里可以理解指定到 html 文件夹下的 index.html}# project1# 这里就是刚刚我们在 vue 项目中 config/index.js 的配置 build.assetsPublicPath，# 也是 vue 项目中配置的 router 中的 baselocation ^~ /project1 {try_files $uri $uri/ /project1/index.html; # 这里可以理解指定到 html 文件夹下 project1 文件夹的 index.html}# project2# 这里是项目二的配置location ^~ /project2 { # try_files $uri $uri/ /project2/index.html; # 这里可以理解指定到 html 文件夹下 project2 文件夹的 index.html}# 这里是 project1 配置需要调用的接口location /api/pro1 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_API proxy_redirect off;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_pass http://p1_server; # 此处的 p1_server 对应的上面的配置 upstream p1_server {}，这里可以做集群，我用不到，就简单配置了}# 这里是 project1 配置需要调用的接口location /api/pro2 { # 这里就是在 vue 项目中 prod.env.js 的配置 BASE_APIproxy_redirect off;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_pass http://p2_server; # 此处的 p2_server 对应的上面的配置 upstream p2_server {}，这里可以做集群，我用不到，就简单配置了}# ...}# ...}

最后贴出我修改的index.html的代码

因为我是追加的，所以直接贴出我追加的代码，其他的采用 ...

...<p><em>Thank you for using nginx.</em></p> <hr><a href="/project1">项目一</a> | <a href="/project2">项目二</a></body> 