學習 Next.js: 部署

laznrbfe 發(fā)布于2019-08-20 19:08 / 2391人閱讀

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署部署要部署一個應用程序當然我們首先需要一個可部署的已經(jīng)開發(fā)完成的應用程序以下面這個開發(fā)的小型博客

原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來.學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 創(chuàng)建動態(tài)內(nèi)容
學習 Next.js: 使用路由掩碼創(chuàng)建干凈的URL
學習 Next.js: 干凈URL的服務器支持
學習 Next.js: 獲取數(shù)據(jù)
學習 Next.js: 部署

部署

要部署一個Next.js應用程序, 當然我們首先需要一個可部署的, 已經(jīng)開發(fā)完成的應用程序. 以下面這個Next.js開發(fā)的小型博客為例, 來說明如何部署一個Next.js應用程序.

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

這樣我們就就實現(xiàn)了一個Next.js應用程序的部署. 簡單吧. 但是, 實際的產(chǎn)品環(huán)境可沒有這么簡單, 要解決很多問題, 比如:

隨操作系統(tǒng)的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內(nèi)置的方式
NODE_ENV=production pm2 start npm --name "next-blog" -- start

其次, 運行 pm2 save 保存進程啟動信息, 最后, 運行pm2 startup創(chuàng)建系統(tǒng)啟動服務. 以Ubuntu 16.04為例, 它會創(chuàng)建一個名為pm2-www.service的SYSTEMD服務.

通過 systemctl status pm2-www.service 可以查看PM2管理的Next.js應用程序狀態(tài).

?  ~ 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的反向代理監(jiān)聽80,或443端口, Next監(jiān)聽其他端口. 而且對于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;
}

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/85199.html

學習 Next.js: 入門

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署哪位分高的幫忙創(chuàng)建一個的標簽謝謝現(xiàn)暫時放在標簽下面了新建文章有時間限制一會全部發(fā)上來這是最近兩天原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Miracle 2019-08-20 16:54 評論0 收藏0
【翻譯】Next.js背后的哲學和設計

摘要：無數(shù)的模板語言和框架應運而生但是技術始終被分割為前端和后端。這意味著一個頁面可以有很多的這并不會對其余的頁面有任何影響。提前綁定和編譯預測是一個非常有效的部署方式。最后，這是我們對于這個特定問題的貢獻。 Next.js 原文地址 Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) 和 Tony Kovanen (@tonykova...

plokmju88 2019-08-21 11:17 評論0 收藏0
學習 Next.js: 使用路由掩碼創(chuàng)建干凈的URL

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署使用路由掩碼創(chuàng)建干凈的在前面的課程中我們學到了如何使用查詢串創(chuàng)建動態(tài)頁面一次為基礎我們一篇博客的原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

silenceboy 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 頁面之間的導航

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署頁面之間的導航現(xiàn)在我們知道了如何創(chuàng)建一個應用程序并且運行它我們的示例應用程序只有一個簡單的頁面但原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

layman 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 創(chuàng)建動態(tài)內(nèi)容

摘要：原始文檔在現(xiàn)在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創(chuàng)建動態(tài)內(nèi)容學習使用路由掩碼創(chuàng)建干凈的學習干凈的服務器支持學習獲取數(shù)據(jù)學習部署創(chuàng)建動態(tài)頁面現(xiàn)在我們知道了如何使用多個頁面創(chuàng)建一個基本的應用程序為了創(chuàng)建頁面我們需要在磁盤上創(chuàng)建原始文檔在 https://github.com/developerw... 現(xiàn)在搬過來. 學習 Next.js: 入門學習 Next.js: ...

caohaoyu 2019-08-20 16:56 評論0 收藏0