前言

前端项目写完了，怎么部署到服务器上让别人访问？现在前端都是 Vue、React 这种单页应用，打包出来一堆静态文件，扔到 Nginx 上就能跑。本文就讲一下怎么用 Nginx 部署前端静态网站。

第一步：打包前端项目

前端项目一般用 npm 或 yarn 打包：

npm run build

打包完会生成一个 dist 目录，里面就是所有静态文件（HTML、CSS、JS）。

第二步：上传到服务器

把 dist 目录上传到服务器上，比如放到 /var/www/html/my-app：

# 用 scp 上传
scp -r dist/ root@你的服务器IP:/var/www/html/my-app

或者用 FTP 工具上传。

第三步：配置 Nginx

最简单的配置

server {
    listen 80;
    server_name www.example.com;

    root /var/www/html/my-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

关键配置说明

root 网站根目录：

root /var/www/html/my-app;

就是你上传静态文件的目录。

index 默认首页：

index index.html;

用户访问网站根目录的时候，默认打开 index.html。

try_files 路由支持：

try_files $uri $uri/ /index.html;

这个很重要！Vue/React 这种单页应用，前端路由是靠 H5 History API 实现的。如果用户直接访问 /about 这种路径，Nginx 找不到对应的文件，就会 404。

加了 try_files 之后，Nginx 找不到文件就返回 index.html，交给前端路由处理。

检查并重载

nginx -t
systemctl reload nginx

测试

浏览器访问 www.example.com，应该能看到你的前端页面了。

加上 HTTPS

如果要配 HTTPS，加上 SSL 配置：

server {
    listen 80;
    server_name www.example.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl;
    server_name www.example.com;

    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem;

    root /var/www/html/my-app;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

常见优化配置

开启 gzip 压缩

server {
    # ... 其他配置

    gzip on;
    gzip_types text/css application/javascript application/json image/svg+xml;
    gzip_min_length 1k;
    gzip_comp_level 6;
}

开启 gzip 之后，文件传输体积小很多，加载更快。

静态资源缓存

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, immutable";
}

静态资源缓存 30 天，不用每次都重新下载。

隐藏 Nginx 版本号

http {
    server_tokens off;
}

在 nginx.conf 的 http 块里加上这行，安全一点。

常见坑

坑1：刷新页面 404

路由是 /about，刷新就 404。

原因： Nginx 找不到 /about 对应的文件。

解决： 加 try_files：

location / {
    try_files $uri $uri/ /index.html;
}

坑2：JS/CSS 404

打包完访问页面，JS 和 CSS 全 404。

原因： 打包的时候 publicPath 没配对。

解决： Vue 项目在 vue.config.js 里配：

module.exports = {
  publicPath: '/'
}

React 项目在 .env 里配：

PUBLIC_URL=/

坑3：跨域问题

前端调后端接口，浏览器报跨域错误。

解决： 用 Nginx 反向代理把接口请求转发到后端，不要让前端直接请求后端地址。

location /api/ {
    proxy_pass http://后端地址;
}

坑4：权限不够

访问报 403 Forbidden。

原因： Nginx 没有读取文件的权限。

解决：

chown -R nginx:nginx /var/www/html/my-app
chmod -R 755 /var/www/html/my-app

总结

前端项目部署到 Nginx 的完整流程：

1. 打包：npm run build
2. 上传：把 dist 目录传到服务器
3. 配置 Nginx：root 指向静态文件目录，加 try_files
4. 重载：nginx -t && systemctl reload nginx
5. 测试：浏览器访问域名

部署静态网站是前端开发的必备技能，记住 try_files 那行就不会踩刷新 404 的坑了。

遇到问题加QQ23979811 协助处理