部署前端单页应用程序

最新推荐文章于 2024-08-05 16:29:41 发布

墨痕丶

最新推荐文章于 2024-08-05 16:29:41 发布

阅读量277

点赞数

文章标签： nginx

本文链接：https://blog.csdn.net/zahirah11/article/details/108070671

版权

nginx 部署

通常将打包出来的 dist 文件夹中的内容放到 nginx 的 html 目录内，启动 nginx 即可打开前端页面。

但是如果项目使用的路由模式是 history 模式的话，刷新页面会报 404 错误。

可以这样解决：

# nginx.conf
location / {
  try_files $uri $uri/ /index.html;
}

一个完整的 server 块

server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;

        access_log /usr/src/app/logs/api_access.log trace;
    }
}