NGINX 反向代理 Next.js 项目配置

分享下自己使用 NGINX 代理 Next.js 项目的配置，可以借鉴借鉴

发布于  星期五，三月 22 2024

正常情况，使用 HTTP 协议

# 开启gzip
gzip on;

##
# http配置
##
server {
  listen 80;
  server_name fuxiaochen.com;

  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_read_timeout 60;
    proxy_connect_timeout 60;
    proxy_redirect off;

    # Allow the use of websockets
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  location /_next/static {
    add_header Cache-Control "public, max-age=3600, immutable";
    proxy_pass http://127.0.0.1:3000/_next/static;
  }
}

使用 HTTPS 时的配置并开启 HTTP2

HTTP2.0 标准中，虽然没有强制提出要使用加密（HTTPS）但是目前主流浏览器，Chrome、Firefox 等都已经公开宣布只支持加密的 HTTP2，所以目前互联网上能见到的 HTTP2 基本都是基于 HTTPS 协议的。所以目前来说，要开启 HTTP2，就必须设置 HTTPS

前提

注意根据自己实际项目信息修改

  • Next.js 项目已经 build 了，并且启动了，端口为 3000
  • HTTPS 相关证书文件已放在 /etc/nginx/cert 目录下，有以下两个文件
    • fuxiaochen.com.pem，证书文件名称
    • fuxiaochen.com.key，证书私钥文件名称
# 开启gzip
gzip on;

##
# HTTPS配置
##
#以下属性中，以ssl开头的属性表示与证书配置有关。
server {
  #配置HTTPS的默认访问端口为443。
  #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
  #如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
  # 默认HTTP 1.1
  # listen 443 ssl;

  # 开启HTTP2
  listen 443 ssl http2;

  #填写证书绑定的域名
  server_name fuxiaochen.com;

  #填写证书文件名称
  ssl_certificate /etc/nginx/cert/fuxiaochen.com.pem;
  #填写证书私钥文件名称
  ssl_certificate_key /etc/nginx/cert/fuxiaochen.com.key;

  ssl_session_timeout 5m;
  #表示使用的加密套件的类型
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  #表示使用的TLS协议的类型，您需要自行评估是否配置TLSv1.1协议。
  ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;

  ssl_prefer_server_ciphers on;

  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_read_timeout 60;
    proxy_connect_timeout 60;
    proxy_redirect off;

    # Allow the use of websockets
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }

  location /_next/static {
    add_header Cache-Control "public, max-age=3600, immutable";
    proxy_pass http://127.0.0.1:3000/_next/static;
  }
}

##
# HTTP配置
##

server {
  listen 80;
  #填写证书绑定的域名
  server_name fuxiaochen.com;
  #将所有HTTP请求通过rewrite指令重定向到HTTPS。
  rewrite ^(.*)$ https://$host$1;
}

参考链接

  • NGINX
  • Next.js