學習 Next.js: 部署

原始文檔在 https://github.com/developerw... 如今搬過來.

學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 建立動態內容
學習 Next.js: 使用路由掩碼建立乾淨的URL
學習 Next.js: 乾淨URL的服務器支持
學習 Next.js: 獲取數據
學習 Next.js: 部署

部署

要部署一個Next.js應用程序, 固然咱們首先須要一個可部署的, 已經開發完成的應用程序. 如下面這個Next.js開發的小型博客爲例, 來講明如何部署一個Next.js應用程序.

git clone https://github.com/developerworks/next.js-blog.git
cd next.js-blog
yarn build
yarn start

這樣咱們就就實現了一個Next.js應用程序的部署. 簡單吧. 可是, 實際的產品環境可沒有這麼簡單, 要解決不少問題, 好比:

隨操做系統的Reboot, 自動啓動Next.js應用程序, 咱們這裏使用PM2來管理咱們的Next.js進程, 首先咱們使用下面的命令啓動這個Next.js應用程序.

# 自定義Express服務器
# https://github.com/zeit/next.js/tree/master/examples/custom-server-express
NODE_ENV=production pm2 start ./server.js --interpreter ./node_modules/.bin/babel-node --watch src --name next-blog
# 默認Next.js內置的方式
NODE_ENV=production pm2 start npm --name "next-blog" -- start

其次, 運行 pm2 save 保存進程啓動信息, 最後, 運行pm2 startup建立系統啓動服務. 以Ubuntu 16.04爲例, 它會建立一個名爲pm2-www.service的SYSTEMD服務.

經過 systemctl status pm2-www.service 能夠查看PM2管理的Next.js應用程序狀態.

➜  ~ systemctl status pm2-www.service
● pm2-www.service - PM2 process manager
   Loaded: loaded (/etc/systemd/system/pm2-www.service; enabled; vendor preset: enabled)
   Active: active (running) since Thu 2017-08-31 15:17:30 CST; 3 days ago
     Docs: https://pm2.keymetrics.io/
  Process: 695 ExecStart=/usr/local/lib/node_modules/pm2/bin/pm2 resurrect (code=exited, status=0/SUCCESS)
 Main PID: 1195 (PM2 v2.6.1: God)
   CGroup: /system.slice/pm2-www.service
           ├─ 1195 PM2 v2.6.1: God Daemon (/home/www/.pm2)
           ├─ 1215 node ./node_modules/.bin/babel-node /usr/local/lib/node_modules/pm2/lib/ProcessContainerFork.js
           ├─ 1221 node ./node_modules/.bin/babel-node /usr/local/lib/node_modules/pm2/lib/ProcessContainerFork.js
           ├─ 1234 node ./node_modules/.bin/babel-node /usr/local/lib/node_modules/pm2/lib/ProcessContainerFork.js
...
...
...
Aug 31 15:17:30 iZwz99do2ak2kdy3324r6bZ systemd[1]: Started PM2 process manager.

到這兒, Next.js 應用程序就部署完成了.

如何指定運行的端口

Next.js 應用程序默認跑在3000端口上, 若是咱們運行一個Web門戶站點, 那麼咱們須要把端綁定在80, 或443端口上.

注意: $PORT 在1024如下, 須要ROOT權限, 建議使用以sudo方式啓動Nginx, 讓Ngnix做爲Next的反向代理監聽80,或443端口, Next監聽其餘端口. 並且對於HTTPS配置Nginx的證書也要比Next簡單得多, 而且能夠做爲一個通用的HTTPS解決方案, 下降後端應用服務器的複雜度.

首先配置 package.json, 修改 scripts 爲:

"scripts": {
  "start": "next start -p $PORT"
}

而後在項目目錄中啓動:

PORT=8000 yarn start

使用Nginx反向代理

固然, 也能夠不直接指定端口, 讓Next.js 應用程序在Nginx反向代理後面跑.

location / {
  # default port, could be changed if you use next with custom server
  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;

  # if you have try_files like this, remove it from our block
  # otherwise next app will not work properly
  # try_files $uri $uri/ =404;
}