哎呀，老铁，今天咱们聊聊怎么用 Nginx 把前端项目给整出来。

先说个心里话，别以为只会写代码就完事儿，部署这块儿可真是把人逼上紧箍咒。

不过别慌，跟我一起慢慢拆。

在 Linux 上敲几行命令就Neng装好。

sudo apt update

sudo apt install nginx

装完记得检查一下版本：

nginx -v

Ru果你是自己编译的，那一定要加上 SSL 模块：

./configure --prefix=/usr/local/nginx --with-http_ssl_module

前端项目一打包，基本就是一个 dist 目录。

把它拷贝到 Nginx 的根目录，一般是 /usr/local/nginx/html 或者 /var/www/html。

比如：

cp -r dist/* /var/www/html/

这里要注意文件权限，确保 nginx 用户Neng读。

Nginx 要帮我们把所有找不到的路径dou指向 index.html。

location / {

  try_files $uri $uri/ /index.html;

}

前端跑在 80 端口，后端 API 在 8080，这俩儿玩儿跨域，那就得靠代理。

location /api/ {

  proxy_pass http://127.0.0.1:8080/;

  proxy_set_header Host $host;

  proxy_set_header X-Real-IP $remote_addr;

  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

}

proxy_pass 后面的斜杠决定是否保留 /api 前缀。

/api/ → http://127.0.0.1:8080/ // 去掉前缀

/api → http://127.0.0.1:8080/api // 保留前缀

先准备好证书和私钥，放到服务器的某个目录。

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

server {
    listen 443 ssl http2;
    server_name yourdomain.com;
    ssl_certificate     /etc/nginx/ssl/fullchain.pem;
    ssl_certificate_key /etc/nginx/ssl/privkey.pem;
    root /var/www/html;
    index index.html;
    # 静态资源缓存
    location ~* \.$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
        access_log off;
    }
    # SPA 路由
    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "no-cache";
    }
    # API 代理
    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Brotli 比 Gzip 压缩率geng高，但不是所有老旧浏览器dou支持。我们Ke以两手抓：

gzip on;
gzip_comp_level 6;
gzip_min_length 1024;
gzip_types text/plain text/css application/javascript application/json image/svg+xml;
brotli on;
brotli_comp_level 5;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;

- 配置语法错误？敲 , kan报错哪行。

   https://yourdomain.com/
   https://yourdomain.com/about
   https://yourdomain.com/contact

User-agent: *
Allow: /
Sitemap: https://yourdomain.com/sitemap.xml
# 不要随便写 Disallow: /

log_format main '$remote_addr - $remote_user  '
                '"$request" $status $body_bytes_sent '
                '"$http_referer" "$http_user_agent" '
                'rt=$request_time';
access_log /var/log/nginx/access.log main;

error_log /var/log/nginx/error.log warn;

sudo tail -f /var/log/nginx/access.log | grep "/api/"