nginx配置部署多个单页应用 踩坑
想要让不同的url访问不同的单页应用, 踩了两天坑 特记录如下
目的:
host:port/a 访问a项目的index.html
host:port/b 访问b项目的index.html
https://segmentfault.com/a/1190000015428921?tdsourcetag=s_pcqq_aiomsg
用alias可以轻松配置
location ^~/A { alias /XX/A/;//此处为A的路径 index index.html; try_files $uri $uri/ /A/index.html; } location ^~/B { alias /XX/B/;//此处为B的路径 index index.html; try_files $uri $uri/ /B/index.html; }
如果用root的话
先上结论
nginx的root配置只有在location / {} 下面才生效 在之后的location里面都不生效
location / { root /var/www/dist; # 这样的配置是生效的 }
location /a { root /var/www/dist; # 这样的配置是不生效的 }
所以要么将root配置在location外面, 要么配置在location / 里面
对于用react和vue打包之后的项目, 访问的都是index.html
因此把单个应用部署到服务器上的话 用的配置参数为
location / { root /var/www/dist; index index.html index.htm; try_files $uri $uri/ /index.html; }
这行代码的意思是 设定root文件夹为打包好的dist文件夹 如果访问根节点, 就返回index.html
如果/后面带有参数, 那么就把参数和root进行拼接之后去找资源
对于这行代码 如果请求是 /static/js/1.js
那么服务器就会去/var/www/dist/static/js/1.js 找这个文件
如果找不到这个文件, 就会返回try_files的内容. 在这里为/index/html
这个是普通的单页应用.
那么如果要实现不同的url访问不同的应用该怎么办呢
首先.root是不能设置为两个了. 因为前文已经提过, 要么在server中设置root 要么在location / 中设置. 及全文只能有一个root
那么就用代理的方法来了.
在nginx上启动两个本机服务(端口不开启防火墙的话是访问不到的
在/etc/nginx/con.d/文件夹下面有一个default.conf, 新建两个
vim server1.conf
内容
server { listen 9090; location / { root /var/www/dist1; index index.html index.htm; try_files $uri $uri/ /index.html; } }
在创建一个server2.conf
vim server2.conf
server { listen 9091; location / { root /var/www/dist2; index index.html index.htm; try_files $uri $uri/ /index.html; } }
这两我们就在本机开了两个服务.分别访问两个不同的应用
然后在default里面设置
server { listen 80; server_name localhost; location /a { proxy_pass http://127.0.0.1:9090; } location /b { proxy_pass http://127.0.0.1:9091; } }
这样虽然可以初步实现了, 但是会发现静态资源根本访问不了.
因为静态资源请求的是/static/ 而这个url到了nginx这里是没有任何匹配项的. 所以要在配置文件里面做设置
在vue工程里面的 config/index.js里面的build下面有个assetsPublicPath 修改
build: { // Template for index.html index: path.resolve(__dirname, '../dist/index.html'), // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', assetsPublicPath: '/a/', ...... }
另一个改成/b/
这样访问静态资源的时候 第一个就会访问/a/static/ 这样就能找到了.
这样的首页已经可以显示了. 但是如果进行路由跳转的话 会发现 /a的主页 跳转的时候/a就会不见了. 所以在vue-router里面加上
export default new Router({ mode: 'history', base: '/a/', routes: [...] })
这样每次跳转的时候都会带上/a了
至此就可以在同一个服务器上通过nginx实现不同的url访问不同的应用了 并且互不干扰.