nginx 部署vue或者react等单页面应用

前后端分离需要使用nginx部署前端，反向代理到后端。记录下配置。

nginx 配置

upstream server-api{
    #后台
    server 127.0.0.1:8080;
}
server {
    listen       3111;
    server_name  localhost;      # 域名
    root /html; #静态文件地址
    # 反向代理
    location ^~/api/ {
        rewrite ^/(.*)$ /$1 break;
        proxy_pass http://server-api;
    }
    #由于是单页面，所以刷新会找不到文件，所以在404的时候转发给index.html
    location / {
        try_files $uri $uri/ /index.html =404;
    }
}

Q.E.D.