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.

知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议

人生中没有四季 唯有那寒冬的荒野