前端Nginx部署

前置

1. 安装nginx
2. 搞一台服务器

---

安装完后nginx一般在/etc/nginx里，而配置一般是根据需求配置在里面的sites-available里(我自己摸索的，我看nginx.conf里自动包含了这个目录的配置，不知道规不规范)。所以我一般新增配置都是直接在/etc/nginx/sites-available里touch file新增文件来配置的，这里也是如此！

回到正题，这里区分部署node服务和部署SPA（所有需要静态文件部署而不是起一个node服务部署的项目，包括各vue/react等框架构建的产物和jq等项目，当然也能用node来部署这些项目就是了）页面。

Node

部署node服务很简单，Terminal启动node服务之后会在控制台返回localhost+端口，回到nginx配置页创建一个配置，配置好server_name 域名地址，在location里配置proxy_pass指向这个node服务地址就可以了。

其他像配置请求头啥的可以自行百度了

比如：

server {
        server_name blog.iquax.cn;
        location / {
                proxy_pass http://127.0.0.1:3000;
                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_set_header X-Forwarded-Proto $scheme;

                proxy_http_version 1.1;
                proxy_set_header Connection "";
        }
}

配置保存完执行sudo nginx -t测试配置是否正常。

SPA

部署SPA服务，打包构建好之后上传到服务器。

进入nginx配置页面新增一个配置来使其生效，需要配置root来指向打包的入口文件，即dist里的index.html文件。比如：

server {
  server_name 你的域名解析地址;
  location / {
          root /var/www/frontend/xxx/dist;
          index index.html;
          # 重定向到index
          try_files $uri $uri/ /index.html;
  }
}

同时指定try_files在页面刷新的时候指向index避免404。因为前端项目（路由history模式）路由是浏览器的，而当刷新浏览器时会重新向服务器发送请求，但是很明显带上了路由path，这些path在服务器并不存在，所以要配置try_files在没有找到的时候统一返回index。而hash路由的#后面的路由path并不会被服务器识别为资源路径，所以hash路由模式不需要配置这个，但是会很丑！

同时配置完后记得执行sudo nginx -s reload来重启nginx使配置生效～

---

这里需要知道的是:

node服务是有端口号的，所以需要指定proxy_pass指向这个地址，此时nginx会把80端口转发到这个地址上。

而SPA则相当于是静态文件，nginx会把所有静态文件部署放到默认80端口上，通过server_name来区分不同的服务（node服务其实也是一样）。

如果SPA服务部署后访问提示缺少什么assets *js/*css等文件，那基本就是nginx没有权限访问root里文件的读写权限，需要给他配置权限。

---

构建文件配置里有配置base的，记得把location /这里的/替换成你写的base