想要让不同的url访问不同的单页应用, 踩了两天坑 特记录如下
目的:
host:port/a 访问a项目的index.html
host:port/b 访问b项目的index.html
用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访问不同的应用了 并且互不干扰.