你在苦苦寻找一个部署 Next.js 应用/网站到自己服务器上的方法吗？来到这就对了，在这篇文章里，大叔将告诉你，如何把 Next.js 网站部署到 Ubuntu 上？

大叔假设你已经拥有了自己的云服务器，并且已经安装好了 Node.js 环境，Nginx 网关等等一堆必备的东东。啥？还没有！对不起，那你先去准备好，回头再来接着往下看吧！（因为这些不是本文的重点）

代码准备

登录到你的服务器上，把代码库 clone 下来，大叔习惯在家目录下创建一个 ~/projects/ 的目录，用来管理服务器上的各种项目。进入刚才 clone 下来的代码目录，执行：npm install && npm run build 安装依赖并构建。就这样，可以用于产线服务的代码就准备好了！之后，执行：npm run start 就可以把服务启动起来了。

ok，通过 curl 访问一下试试：

curl -v http://127.0.0.1:3000 # 如果你没有更改端口的话

看到有返回信息，说用服务已经起来了。

再通过服务器公网 IP 访问一下试试，正常情况下，应该可以看到期望的页面了！那，不正常呢？请自行检查下边 LIST：

检查你的云服务器安全组对应端口有没打开？
Next.js 服务是否启动在 0.0.0.0 IP 上？

进程守护

上面，我们已经把服务启动起来了，是是就已经可以了呢？不不不，当你退出终端后，发现服务不可用了！！！哪尼？

这时我们需要把服务启动后，常驻到后台才可以，有这么几种办法可以做到：nohup、screen、pm2... 这里我们用 pm2 吧（理由：大叔喜欢，哈哈哈）。

开始了，我们初始化一个配置文件：

pm2 ecosystem

然后，把 ecosystem.config.js 内容修改如下：

module.exports = {
  apps: [
    {
      name: 'super-uncle',
      exec_mode: 'cluster',
      instances: 'max',
      script: 'npm',
      args: 'start',
    },
  ],
}

ok，搞定了！启动服务：

pm2 start ecosystem.config.js

访问服务，完美。

配置 Nginx

大叔假设你已经购买了域名，并且已经配置好了解析，接下来以大叔的一个站点为例：top.byetool.com。我们在目录：/etc/nginx/sites-available/ 下创建一个叫 top.byetool.com.conf 的配置文件，填充一下内容：

# Expires map
map $sent_http_content_type $expires {
  default off;
  ~text/html epoch; # html 不缓存
  ~text/css max; # css 缓存 10 年
  ~application/javascript max; js # 缓存 10 年
  ~image/ max; # 图片缓存 10 年
}

# 重定向 http 到 https
server {
  listen 80;
  listen [::]:80;
  server_name top.byetool.com;
  return 301 https://$server_name$request_uri;
}

server {
  listen 443 ssl http2; # 开启 https 和 http2
  listen [::]:443 ssl http2; # 支持 ipv6
  server_name top.byetool.com;

  # ssl 证书路径配置
  ssl_certificate /home/ubuntu/.ssl/byetool.com.crt;
  ssl_certificate_key /home/ubuntu/.ssl/byetool.com.key;

  # 设置字符集
  charset utf-8;

  # gzip 相关配置
  gzip on;
  gzip_vary on;
  gzip_min_length 1k;
  gzip_types text/plain application/xml text/css application/javascript;

  # 缓存配置
  expires $expires;

  # 代理到 next.js 服务
  location / {
    proxy_redirect off;
    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_set_header X-Forwarded-Proto $scheme;
    proxy_read_timeout 1m;
    proxy_connect_timeout 1m;
    proxy_pass http://127.0.0.1:3000;
  }

  location ~ /\.(?!well-known).* {
    deny all;
  }
}

关于 ca 证书的申请，你可以在域名注册商那里申请，比如：阿里云、腾讯云都有提供。大叔用的是 acme.sh 这个工具申请的免费泛域名证书。

好了，下一步，在 /etc/nginx/sites-enabled/ 目录建立一个同名软链：

sudo ln -s /etc/nginx/sites-available/top.byetool.com.conf top.byetool.com.conf

验证一下配置是否可用：

sudo nginx -t

重启 Nginx：

sudo nginx -s reload

终于，大功告成！感谢你认真看到最后 :-)

如何部署Next.js应用到Ubuntu服务器？

代码准备

进程守护

配置 Nginx