单页应用浏览器刷新404？看这里

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

1. nginx中文文档
2. nginx入门到精通

再见2021，你好2022，还在刷掘金的小伙伴们，新年快乐！

1.单页应用nginx 404 问题

vue,react 编写的应用在刷新页面时由于服务端找不到虚拟路由的配置，造成页面返回404报错

解决方法:重写虚拟路由的路径

Nginx指令	说明	demo
try_files	尝试路由匹配的文件是否存在	try_files $uri$uri/ @router;
rewrite	重写路径	rewrite ^.*$ / last;
last	本条规则匹配完成后继续向下匹配新的location URI规则	其他可选值有（last，break，redirect，permanent）

location / {
    root   /usr/share/nginx/html;
    try_files $uri $uri/ @router; #尝试多个路径和虚拟路径
    index  index.html index.htm;
}

location @router {
    rewrite ^.*$ / last;  #重定向未找到的虚拟路径为根目录 重新执行根路径逻辑
}

注意：nginx的配置必须要有‘；’结束，否则可能测试配置通过，实际使用时配置不生效。

2.配置SSL证书

⚠️不要给密钥设置密码

server {
        #SSL 访问端口号为 443
        listen 443 ssl; 
        #填写绑定证书的域名
        server_name xxxx.com; 
        #证书文件名称
        ssl_certificate xxxx.crt; 
        #私钥文件名称
        ssl_certificate_key xxxx.key; 
        ssl_session_timeout 5m;
        #请按照以下协议配置
        ssl_protocols TLSv1.2 TLSv1.3; 
        #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
        ssl_prefer_server_ciphers on;
        location / {
           #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
           #例如，您的网站运行目录在/etc/www下，则填写/etc/www。
            root html; 
            index  index.html index.htm;
        }
    }

nginx -t #测试配置文件是否正确

双向认证配置点这里

3.配置80端口重定向到443

server {
    listen 80;
    #填写绑定证书的域名
    server_name xxxx.com; 
    #把http的域名请求转成https
    return 301 https://$host$request_uri; 
}

4.配置Nginx转发前的真实IP

proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
real_ip_header   X-Forwarded-For;
#set_real_ip_from 192.168.181.0/24; #需要排除真实ip的网段，可以配置多条
#real_ip_recursive on;  #开启递归排除