Nginx 如何部署spa前端应用

相信很多前端开发者都是开发了很多年的前端，但是并不是很了解我们的代码是如何部署到线上并且呈现在我们眼前的。

先决条件

1. 拥有一个nginx运行环境
2. 拥有一个spa 应用

一、nginx

标题为nginx文档链接

作为前端开发者，我们可能没用过nginx但是我们一定听过nginx，它擅长于底层服务器端资源的处理（静态资源处理转发、反向代理，负载均衡等）不过多赘述nginx细节

1.1 修改nginx config

安装好nginx，将spa包存放到nginx服务器的具体位置(/usr/local/web/spa/), 然后打开nginx配置文件 vi /usr/local/${path}/nginx/conf/nginx.conf(图一)

图一

1.2 配置location

找到 server listen 80位置进行location的配置 alias /usr/local/web/spa/; 是spa包的位置

    # 该方法适用于哈希模式的spa应用部署 
    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
                alias /usr/local/web/spa/;
         }
         
    }

1.3 history spa应用 nginx location的配置

    server {
        listen       80;
        server_name  localhost;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
                try_files $uri $uri/ /usr/local/web/spa/;
         }
         
    }

1.4 重启nginx

# 正常配置了 nginx命令并且使用的是默认的nginx.conf
nginx -s reload

# 使用独立的nginx.conf
nginx -c /nginx/self.conf -s reload