Nginx 部署 SPA 的现代方法

关于 nginx 部署 SPA（单页应用）查了很多资料，但发现都过时严重，而且方法不够简洁明了。实际上现在 nginx 部署 SPA 的步骤很简单，没有很多教程写得那么复杂。

以 Ubuntu 为例（因为看到了太多 CentOS 的教程，这里就拿 Ubuntu 演示下，俩系统除了文件夹名有点区别外其他都一样）

首先安装 nginx

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install nginx

然后进入 nginx 的配置目录

$ cd /etc/nginx

创建 html 文件夹，过会儿我们的静态文件就放在这里。当然你也可以随便起个别的名字，或者之后指定到别的文件夹上。选择将静态文件放在 nginx 配置文件目录里主要是为了避免之后可能出现的 nginx 权限不够的问题。如果你想把静态文件放在其他目录中，比如/www中，nginx 一般来说默认是没有访问该文件夹的权限的，此时需要手动给这个文件夹赋一下权限，比如chmod -R 777 /www。当然，我们这里直接在 nginx 目录下放静态文件，不用管这事儿。

然后进入/etc/nginx/conf.d文件夹。

创建default.conf

$ vi default.conf

然后粘贴以下内容

server {
        # 监听端口，一般就是80，这也是网页访问时的默认端口
        listen 80;
        # server_name是你的服务器地址，ip或网址都行
        # 注意不要写localhost，因为这个地址是外网访问时的地址
        # 除非你就打算在局域网访问，那么写localhost确实没问题
        server_name www.example.com;

        location / {
                # alias是静态文件所在的文件夹
                # 由于打算将静态文件放在/etc/nginx/html目录下，
                # 所以这里也这么写
                # 有很多教程这里使用root + try_files
                # 这其实是不合适的，root本身就不是给单页应用使用的
                # 使用alias更合适
                alias /etc/nginx/html/;
                index index.html index.htm;
        }

        # 如果你的应用采用了将请求转发的方式（很多框架和模板都会这么干）
        # 那么需要在nginx上设置一下代理
        # 比如这里假设该网页的后端就部署在这个服务器上，端口是8081
        # 然后SPA自身配置的是把请求都转发到/api/...上
        # 根据实际情况，这里的location可能会是/prod-api/等其他形式
        # 如果实在搞不清楚这里该代理啥，就先把网页部署上去，按F12看看请求报错信息
        # 就知道请求的是哪个地址了
        location /api/ {
                proxy_pass http://localhost:8081/;
        }
}

然后保存

别忘了把静态文件传到刚刚创建的 html 文件夹下，这里就把这步骤省略了

然后检查一下配置文件有没有语法错误

$ nginx -t

然后输入以下命令重载配置

$ nginx -s reload

然后就结束了

然后说明一下为啥改的是conf.d/default.conf而不是nginx.conf。很多教程都是改的nginx.conf，这其实一点也没错，但nginx.conf内容比较多，改的时候容易眼花改错。而nginx.conf默认是把conf.d/目录下的配置文件都加载进去的，所以直接在这个目录下创建配置文件就好了，改起来更清楚和方便。顺便只要配置文件是.conf结尾的就会被读进去，叫不叫default其实无所谓。