一个域名配置多个Vue项目

时间 2019-11-21

标签一个域名配置多个 vue 项目繁體版

原文原文链接

从业前端4年对于前端部署天然掌握一点，部署过许多静态网站、PHP站点、vue项目，每当要进行配置的时候总会耽误点时间，毕竟配置是低频的，部署才是高频，恰好手头比较闲也想写一些文档来提炼一下本身，若是可以帮助正在阅读的你，我也是倍感荣幸。虽然网上关于此类文章比比皆是，可是老是零零散散，掌握不到原理，下次配置时依旧须要度娘。php

想必你们都查阅过资料，譬如：一个域名如何配置多个vue项目？nginx try_files 详解，nginx php代理转发等等，这些在我这篇文档当中基本都已涵盖，我不常常写文章，因此文笔不是很好，若是有什么说的不明白或者很差的请你们帮忙指出。css

本文经过nginx配置vue项目的例子来帮助你们理解nginx的使用以及原理：html

nginx路由匹配规则与优先级
nginx日志输出调试
nginx重定向、代理转发
nginx root和alias区别
真正的 nginx try_files 详解
vue-router的两种模式
一个域名配置一个vue项目
一个域名配置多个vue项目

nginx 路由匹配规则与优先级

一般咱们所说的nginx路由匹配其实就是 nginx location匹配，下面咱们简单进行介绍：前端

location路由匹配规则

命令	说明
~	波浪线表示执行一个正则匹配，区分大小写
~*	执行一个正则匹配，不区分大小写
^~	普通字符匹配，若是该选项匹配，只匹配该选项，不匹配别的选项，通常用来匹配目录
=	普通字符精确匹配
@	"@" 定义一个命名的 location，使用在内部定向时，例如 error_page, try_files

示例：vue

#精准匹配
location = / {
    #只匹配www.xxx.com
}

location / {
    #匹配任何URI
}
复制代码

nginx 路由匹配优先级

看过官方文档或者实践过的同窗都知道，location匹配规则不是从上往下按顺序匹配的，而是根据nginx匹配规则来匹配的。好比：你医院排队挂号时有老人、军人以及军属优先挂号的规则。webpack

下面为nginx 路由匹配规则：nginx

=前缀的指令严格匹配这个查询。若是找到，中止搜索。web
全部剩下的常规字符串，最长的匹配。若是这个匹配使用^〜前缀，搜索中止。正则表达式
正则表达式，在配置文件中定义的顺序。vue-router
若是第3条规则产生匹配的话，结果被使用。不然，使用第2条规则的结果。

nginx日志输出调试

在咱们设置了 location 匹配规则以后，不肯定本身的匹配是否生效时，能够尝试使用nginx的access_log来输出指定log_format模板日志。因为只作调试使用，咱们选择使用nginx默认的main模板，若是感兴趣的朋友，能够本身去查阅相关文档。

首先，确认设置nginx规则以后是否重启nginx服务。

其次，确认无误以后在咱们设置的nginx location规则里面，利用access_log输出日志。示例以下：

http {
  ...
  #日志模板 main
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  server {
    ...
    location /ar-meet {
      #输出日志，日志文件保存在/val/log/nginx/access1.log,使用的是main的日志模板（默认的）
      access_log  /var/log/nginx/access1.log  main;
      ...
    }
  }
}
复制代码

最后，使用 tail命令查看是否有日志输出，从而来判断是否进入匹配的规则中，若是刷新浏览器有日志输出，则说明匹配成功进一步排查问题，反之未匹配成功，检查规则正则是否正确。

tail -f /val/log/nginx/access1.log
复制代码

nginx重定向、代理转发

下面咱们将以几个例子开讲解 nginx重定向和 nginx代理转发。

以HTTPS站点为例：

nginx重定向，当用户访问 HTTP站点时，咱们须要重定向至 HTTPS的站点上。
HTTPS 代理转发，当咱们的服务不支持HTTPS时，咱们能够利用HTTPS代理转发至HTTP服务上。

在建立https站点以前，咱们须要先建立 SSL证书，再将证书放到服务器上。此处不着重介绍SSL证书，请自行百度，若是有阿里云服务器能够在阿里云后台购买免费的证书。

nginx重定向

server {
  listen       80;
  server_name  www.xxx.com xxx.com;

  #重定向https
  rewrite ^(.*)$  https://$host$1 permanent;
}
复制代码

HTTPS 代理转发

server {
  listen       443;
  server_name  www.xxx.com xxx.com;
  index index.html;

  #ssl证书配置
  ssl on;
  ssl_certificate			  /usr/local/nginx_ssl/www.xxx.com.pem;#配置ssl证书
  ssl_certificate_key		/usr/local/nginx_ssl/www.xxx.com.key;#配置ssl证书
  ssl_session_timeout 5m;

  location / {
    #代理转发，当用户访问https://www.xxx.com/yourapi/getInfo时
    #实际访问的是 http://xx.xx.xx.xx:6666/yourapi/getInfo
    if ($request_uri ~ ^/yourapi(/)?.*){
      proxy_pass http://xx.xx.xx.xx:6666$request_uri;
  	}
  }

  error_page 404 /404.html;
  location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  }
}
复制代码

nginx root和alias区别

经过以上配置，咱们分别使用了root和alias指定静态资源目录，咱们能够看出二者的区别：

root实例：

location /ar-meet {
	root /home/www/;
}
复制代码

当请求URI为 www.xxx.com/ar-meet/a.html nginx会返回 /home/www/ar-meet/a.html文件。

alias实例:

location /ar-call {
	alias /home/www/ar-call/dist/;
}
复制代码

当请求URI为 www.xxx.com/ar-call/a.htmlnginx会返回 /home/www/ar-call/dist/a.html文件，若是此处不是alias 而是 root，那么nginx 返回 /home/www/ar-call/dist/ar-call/a.html

总结：alias 会忽略location后面的路径，而root只是更改根目录指向。

nginx `try_files` 精解

若是你没有动力看下去，或者以为很难看下去，那么先看这一句话而后再慢慢看下去。其实它就是重定向，按照这个思路往下阅读。

try_files 按顺序检查文件是否存在，返回第一个找到的文件。它提供三个参数：

参数	说明
`$url`	表明nginx会去指定路径（root或alias）中查找文件，若是找到则返回该文件，不然继续匹配第二个参数。
`$url/`	若是第一个参数没有找到文件，则会在路径后面添加一个`/`，继续查询，一样找到文件返回该文件，不然重定向到最后一个参数。
重定向URL	以上都不符合要求时，重定向至指定页面，好比：`=404`，经过以上两个例子，咱们来分析一下 try_files；

例子：

假设请求URI为 demos.xxx.com/ar-meet

location /ar-meet {
  root /home/www/;
  #在重置root根目录以后，此时nginx指向了`/home/www/ar-meet`
  #因为当前location继承http的 `index` 属性，即：index index.html;
  #默认打开html文件，也就是说此时nginx指向了 `/home/www/ar-meet/index.html`
}
复制代码

假设请求URI为 demos.xxx.com/ar-meet/meet/123

location /ar-meet {
  root /home/www/;
  #在重置root根目录以后，此时nginx指向了`/home/www/ar-meet`
  #可是在ar-meet的目录里找不到meet
  #所以nginx会返回404
  try_files	$url $urs/ /ar-meet/index.html;
  #重定向至demos.xxx.com/ar-meet/index.html;
}
复制代码

vue-router的两种模式

为何vue-router的 history 模式须要配置，而 hash 模式则不须要呢？由于history模式利用HTML5 historyAPI来完成URL跳转，而hash则是监听hash变化，除此以外咱们常用hash来防止浏览器跳转。

下面不妨咱们来测试一下这两种模式：

1. hash模式

因为 hash模式为vue-router默认模式，因此咱们无需配置，直接在main.js中监听hash变化事件。

window.addEventListener('hashchange', (e) => {
	console.log('hash值发生了改变 ', e);
}, false);
复制代码

2. history模式

首先，咱们须要将vue-router的模式改成history模式。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
复制代码

一样，咱们在main.js中监听HTML5History变化事件：

window.addEventListener('popstate', function(e) {
	console.log('HTML5History路由变化了', e);
}, false);
复制代码

vue是个单页面应用，经过解析URL的hash或者经过 history的 API 来实现页面跳转和渲染。

一个域名配置一个项目

单项目配置比较简单，因此咱们直接上代码。参考官方配置。

server {
  listen       443;
  server_name  www.xxx.com xxx.com;
  index index.html;

  ssl on;
  ssl_certificate			  /usr/local/nginx_ssl/www.xxx.com.pem;#配置ssl证书
  ssl_certificate_key		/usr/local/nginx_ssl/www.xxx.com.key;#配置ssl证书
  ssl_session_timeout 5m;

  location / {
    #project为项目目录，咱们将build以后的目录
    root /usr/share/nginx/html/project;
    try_files $uri $uri/ /index.html;
  }

  error_page 404 /404.html;
  location = /40x.html {
  }

  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
  }
}
复制代码