1.部署单个Vue项目

将Vue项目部署到nginx代理的非根路径下。

1.1 修改router配置

  1. export default new Router({
  2.   base: '/backweb/',
  3.   mode: 'history', // 去掉url中的#
  4.   scrollBehavior: () => ({ y: 0 }),
  5.   routes: constantRoutes
  6. });

将base设置为 /backweb/，此时mode一定要设置为history模式。

1.2 修改vue.config.js文件下，静态资源前缀

  1. module.exports = {
  2.     ...
  4.   publicPath: '/backweb/',
  6.   ...
  7. }

1.3 修改nginx配置文件back_frontend.conf

back_frontend.conf位于nginx的config/conf.d路径下
注意:此ngxin时部署在docker中的，通过docker-compose将nginx的监听端口8090映射到本机的8892端口。

  1. server{
  2.     listen    8090;
  3.   server_name  localhost;
  5.   location ^~ /prod-api {
  6.       # 将API调用代理到后台链接
  7.       proxy_pass http://xxx.xxx.xxx.xxx:8888/yyy;
  8.   }
  10.   location ^~/backweb {
  11.       alias /usr/share/nginx/html/back_frontend/;
  12.     index index.html  $uri $uri/ /index.html?$query_string;
  13.   }
  15.   error_page 500 502 503 504 /50x.html;
  16.   location = /50x.html {
  17.       root /usr/share/nginx/html;
  18.   }
  19. }

2. 部署Nginx网关

通过第一步的方法，部署两个Vue项目，宿主机端口和相对路径分别是8891、/frontweb/ 和 8892 /backweb/。
docker内的端口可以都是8090，并不影响彼此。
此时已经有了两个nginx的docker。

然后部署nginx网关，再配置一个nginx的docker，配置文件 proxy.conf 如下，

  1. server {
  2.     listen     8090;
  3.   server_name localhost;
  5.   location ^~/frontweb/ {
  6.       proxy_set_header Host $host;
  7.     proxy_set_header X-Real-IP $remote_addr;
  8.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  10.     # 代理到frontweb项目的地址
  11.     proxy_pass http://xxx.xxx.xxx.xxx:8891/frontweb/;
  12.   }
  14.   location ^~/backweb/ {
  15.       proxy_set_header Host $host;
  16.     proxy_set_header X-Real-IP $remote_addr;
  17.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  19.     # 代理到backweb项目的地址
  20.     proxy_pass http://xxx.xxx.xxx.xxx:8892/backweb/;
  21.   }
  23.   # 由于frontweb和backweb项目用的是同一个后台，并且api的前缀都是prod-api，
  24.   # 所以在此配置一个prod-api的转发即可
  25.   localtion ^~/prod-api/ {
  26.     # 配置后台地址
  27.       proxy_pass http://kkk.kkk.kkk.kkk:8891/mmmm/;
  28.   }
  29. }

到此，nginx网关配置完毕，此nginx通过docker-compose将内部8090端口映射到本地8900端口，
所以通过访问:
http://xxx.xxx.xxx.xxx:8900/frontweb/
http://xxx.xxx.xxx.xxx:8900/backweb/
可分别访问frontweb项目和backweb项目。

Nginx知识讲解

Nginx虚拟目录alias和root目录：

nginx是通过alias设置虚拟目录，在nginx的配置中，alias目录和root目录是有区别的：
1）alias指定的目录是准确的，即location匹配访问的path目录下的文件直接是在alias目录下查找的；
2）root指定的目录是location匹配访问的path目录的上一级目录,这个path目录一定要是真实存在root指定目录下的；
3）使用alias标签的目录块中不能使用rewrite的break（具体原因不明）；另外，alias指定的目录后面必须要加上”/“符号！！
4）alias虚拟目录配置中，location匹配的path目录如果后面不带”/“，那么访问的url地址中这个path目录后面加不加”/“不影响访问，访问时它会自动加上”/“；但是如果location匹配的path目录后面加上”/“，那么访问的url地址中这个path目录必须要加上”/“，访问时它不会自动加上”/“。如果不加上”/“，访问就会失败！
5）root目录配置中，location匹配的path目录后面带不带”/“，都不会影响访问。

举例说明（比如nginx配置的域名是www.wangshibo.com）：
示例一
location /huan/ {
alias /home/www/huan/;
}
在上面alias虚拟目录配置下，访问http://www.wangshibo.com/huan/a.html实际指定的是/home/www/huan/a.html。
注意：alias指定的目录后面必须要加上”/“，即/home/www/huan/不能改成/home/www/huan
上面的配置也可以改成root目录配置，如下，这样nginx就会去/home/www/huan下寻找http://www.wangshibo.com/huan的访问资源，两者配置后的访问效果是一样的！
location /huan/ {
root /home/www/;
}
示例二
上面的例子中alias设置的目录名和location匹配访问的path目录名一致，这样可以直接改成root目录配置；那要是不一致呢？
再看一例：
location /web/ {
alias /home/www/html/;
}

访问http://www.wangshibo.com/web的时候就会去/home/www/html/下寻找访问资源。
这样的话，还不能直接改成root目录配置。
如果非要改成root目录配置，就只能在/home/www下将html->web（做软连接，即快捷方式），如下：
location /web/ {
root /home/www/;
}
# ln -s /home/www/web /home/www/html //即保持/home/www/web和/home/www/html内容一直
所以，一般情况下，在nginx配置中的良好习惯是：
1）在location /中配置root目录；
2）在location /path中配置alias虚拟目录。
如下一例：
server {
listen 80;
server_name www.wangshibo.com;
index index.html index.php index.htm;
access_log /usr/local/nginx/logs/image.log;
location / {
root /var/www/html;
}
location /haha { //匹配的path目录haha不需要真实存在alias指定的目录中
alias /var/www/html/ops/; //后面的”/“符号一定要带上
rewrite ^/opp/hen.php(.)$ /opp/hen.php?s=$1 last;
# rewrite ^/opp/(.)$ /opp/hen.php?s=$1 last;
}
location /wang { //匹配的path目录wang一定要真实存在root指定的目录中（就/var/www/html下一定要有wang目录存在）
root /var/www/html;
}
}