nginx 部署 spa 应用

[wangjing013]

如果还没安装 nginx, 可以参考上一篇文章 install nginx .

开始前还先说下为什么需要了解基本的 nginx 知识. 作为一个前端，可能很多人认为没有必要去了解它，但它确跟我们息息相关，通常项目部署都是放在 nginx 上，利用它来做一些事情如(解决跨域、代理、反向代理、缓存、负载均衡). 通常跨域、代理是我们最熟悉不过的.

有时线上部署有问题时，如果能在本地模拟环境可能更加方便排查问题时，所以了解基本配置是必须的.

下面先来了解下项目打包后，是如何通过 nginx 进行部署的.

下面以 vue 项目为例, 假设通过 build 命令打包后产物如下:

|---- build
|-------- static
|----------------js
|----------------css
|----------------images
|-------- index.html

具体产物可以根据实际项目定. 下面假设打包后产物路径为: /Users/wangjing/Desktop/project/react-demo/build/.

下面通过修改配置文件来部署对应的应用:

server {
    listen       9090;
    server_name  localhost;

    #access_log  logs/host.access.log  main;

   location / {
        alias /Users/wangjing/Desktop/project/react-demo/build/;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    location /static {
        alias /Users/wangjing/Desktop/project/react-demo/build/static/;
    }
}

启动服务, 可以通过 http://localhost:9090 访问到对应的打包后的应用.