Next.js项目部署云服务器全流程（git仓库直接部署版）

TL;DR：这篇文章是关于用最简单的方法在云服务器上部署Next.js项目的简易教程。主要使用Ubuntu 22.04,（Google Cloud）,pm2, screen, Nginx

一. 准备工作

  1. 本地项目存储到github仓库
  2. 准备一台云服务器。这里使用的是Ubuntu 22.04, Google Cloud

二. 云服务器准备工作

  1. 云服务器安装 Node.js 和 npm
    1. 更新系统包列表：sudo apt update
    2. 安装一些必要的工具：sudo apt install -y curl dirmngr apt-transport-https lsb-release ca-certificates software-properties-common
    3. 导入 NodeSource GPG 密钥：
      curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg –dearmor -o /etc/apt/keyrings/nodesource.gpg
    4. 创建 NodeSource 仓库文件：echo “deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_20.x nodistro main” | sudo tee /etc/apt/sources.list.d/nodesource.list
    5. sudo apt update
    6. 安装 Node.js 和 npm：sudo apt install -y nodejs
    7. 检查：node -v npm -v
  2. 安装 PM2 (用于进程管理，比较容易，推荐安装)
    1. npm install -g pm2

三. 将 Next.js 项目传输到服务器

  1. 在服务器上 clone 您的仓库
  2. .env文件，直接从本地上传。Google Cloud提供本地上传文件服务。（注意：.开头的文件，在Linux中默认隐藏。使用）

四. 在服务器上构建您的项目

1.
cd your-nextjs-project
npm install
npm run build
2. 使用 PM2 启动您的应用
1. 创建一个名为 ecosystem.config.js 的文件，内容如下：

1
2
3
4
5
6
7
8
9
10
module.exports = {
  apps: [{
    name: "nextjs-app",
    script: "npm",
    args: "start",
    env: {
      NODE_ENV: "production",
    },
  }],
}

   然后运行：

   
1
pm2 start ecosystem.config.js
  1. 配置 Nginx
    1. 安装 Nginx：sudo apt install nginx (Ubuntu) 或 sudo yum install nginx (CentOS)
  2. 检查防火墙：确保开放 80 端口（HTTP）和 443 端口（HTTPS，如果使用）
    1. 注意，google cloud 默认的端口是开放的，所以不需要另外设置。
  3. 设置 SSL。使用 Let’s Encrypt 和 Certbot 可以轻松设置免费的 SSL 证书
    1. sudo apt install certbot python3-certbot-nginx -y
    2. sudo certbot –nginx -d your_domain.com

五.启动应用

  1. 使用 screen 创建一个新会话：screen -S nextjs
  2. 在 screen 会话中，使用 PM2 启动您的应用：pm2 start npm –name “next-app” – start
  3. 设置 PM2 在服务器重启时自动启动您的应用：
    pm2 startup systemd
    pm2 save
  4. 分离 screen 会话：按 Ctrl+A 然后按 D

六. Nginx配置

  1. sudo nano /etc/nginx/sites-available/[项目名字或者域名]例如 podcasthighlight.com

  2. 添加Nginx配置：
    server {
    listen 80;
    listen [::]:80;
    server_name podcasthighlight.com;
    return 301 https://$server_name$request_uri;
    }

    server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name podcasthighlight.com;

    ssl_certificate /path/to/your/fullchain.pem;
    ssl_certificate_key /path/to/your/privkey.pem;

    # 推荐的 SSL 设置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    ssl_session_tickets off;

    # HSTS (可选，但推荐)
    add_header Strict-Transport-Security “max-age=31536000; includeSubDomains” always;

    location / {
    proxy_pass http://localhost:3000;
    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;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 可选：配置访问日志和错误日志
    access_log /var/log/nginx/podcasthighlight.access.log;
    error_log /var/log/nginx/podcasthighlight.error.log;
    }

  3. 启动 Nginx
    sudo ln -s /etc/nginx/sites-available/[项目名字或者域名] /etc/nginx/sites-enabled
    sudo nginx -t
    sudo systemctl restart nginx

七.域名相关

  1. Google Cloud需要设置静态 IP，这个可能需要一点费用。

请注意：先设置静态IP，然后配置域名DNS，再配置SSL。