Next.js是一個(gè)新的通用JavaScript框架仿荆，它為基于React和服務(wù)器的Web應(yīng)用提供了一個(gè)新的可選方案贰您。
Next.js目前已經(jīng)開源，https://zeit.co/blog/next
你遇到過這個(gè)問題嗎?
如何部署我的Next.js應(yīng)用?
我們還沒有討論過這個(gè)問題拢操，但它非常簡單明了锦亦。
您可以部署Next.js應(yīng)用到任何你可以運(yùn)行node.js的地方。因此令境，沒有任何類型的鎖定杠园，即使部署到ZEIT中也非常簡單。
讓我們學(xué)習(xí)部署Next.js應(yīng)用舔庶。
首先抛蚁，我們需要一個(gè)簡單的Next.js應(yīng)用程序。試著下載下面的示例應(yīng)用程序:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout using-shared-components
你可以執(zhí)行以下命令：
npm install
npm run dev
現(xiàn)在惕橙，您可以通過導(dǎo)航到http://localhost:3000來訪問該應(yīng)用程序瞧甩。
構(gòu)建和啟動(dòng)
首先，我們需要建立Next.js應(yīng)用于生產(chǎn)弥鹦。它將為生產(chǎn)生成一組優(yōu)化的代碼肚逸。
為此，只需在package.json添加以下的npm腳本:
"scripts": {
"build": "next build"
}
然后你需要啟動(dòng)Next.js應(yīng)用在一個(gè)端口上。這將執(zhí)行副渲染和服務(wù)頁面(用上面的命令構(gòu)建)朦促。
為此犬钢，只需在package.json添加以下的npm腳本:
"scripts": {
"start": "next start"
}
這將在3000端口啟動(dòng)我們的應(yīng)用。
因此思灰，您可以運(yùn)行以下命令來運(yùn)行我們的應(yīng)用程序:
npm run build
npm run start
運(yùn)行兩個(gè)實(shí)例
現(xiàn)在，我們要運(yùn)行兩個(gè)應(yīng)用程序混滔，通常洒疚，我們這樣做是為了水平地?cái)U(kuò)展我們的應(yīng)用程序。
首先坯屿，對我們的start npm腳本做如下更改:
"scripts": {
"start": "next start -p $PORT"
}
如果你在Windows上油湖，你的啟動(dòng)腳本應(yīng)該是 next start -p %PORT%.
現(xiàn)在讓我們先來構(gòu)建我們的應(yīng)用程序。
npm run build
然后嘗試在自己的終端中運(yùn)行以下命令:
PORT=8000 npm start
PORT=9000 npm start
在Windows上领跛，您需要以不同的方式運(yùn)行命令乏德。一種選擇是將npm模塊 cross-env
安裝到你的應(yīng)用中。
然后運(yùn)行 cross-env PORT=9000 npm start 從命令行吠昭。
是否有可能在兩個(gè)端口上訪問我們的應(yīng)用程序?
構(gòu)建一次喊括，運(yùn)行多個(gè)實(shí)例
正如您所看到的，您需要一次構(gòu)建您的應(yīng)用程序矢棚。然后你可以在任意多的端口上啟動(dòng)它郑什。
部署到 ▲ZEIT now
現(xiàn)在我們知道如何構(gòu)建和y啟動(dòng)Next.js。我們用npm腳本做了所有的事情蒲肋。因此蘑拯，您將能夠定制它，以使用您最喜歡的部署服務(wù)兜粘。
但如果你使用 ▲ZEIT now, 只有一個(gè)步驟申窘。
只需添加以下的npm腳本:
"scripts": {
"build": "next build",
"start": "next start -p 8000"
}
然后 install now. 然后應(yīng)用以下命令:
now
基本上，您運(yùn)行您的應(yīng)用程序根目錄內(nèi)"現(xiàn)在"命令孔轴。
在這里剃法，我們提到端口8000作為我們啟動(dòng)應(yīng)用程序的端口，但是我們在部署到ZEIT時(shí)并沒有改變它距糖。
那么玄窝，在部署到ZEIT的時(shí)候，我們可以在哪個(gè)端口訪問我們的應(yīng)用呢?
ZEIT總是使用443
實(shí)際上悍引，即使你在端口8000上啟動(dòng)你的應(yīng)用程序恩脂，你也可以使用端口443(默認(rèn)端口為“https”網(wǎng)站)訪問它。
這是ZEIT的一個(gè)特點(diǎn)趣斤。你只需要在你喜歡的任何端口上啟動(dòng)你的應(yīng)用程序俩块。ZEIT現(xiàn)在將把它映射到端口443。
構(gòu)建您的應(yīng)用程序在本地
▲ZEIT now 將檢測npm構(gòu)建腳本，并在它的構(gòu)建基礎(chǔ)結(jié)構(gòu)中構(gòu)建它玉凯。
但是势腮，并不是所有的主機(jī)供應(yīng)商都有類似的東西。
在這種情況下漫仆，你可以在本地創(chuàng)建你的應(yīng)用:
npm run build
然后將應(yīng)用程序部署到該應(yīng)用程序中.next目錄捎拯。
使用定制服務(wù)器部署應(yīng)用程序
我們剛剛部署的應(yīng)用程序不使用自定義服務(wù)器代碼。但是如果我們有這個(gè)盲厌，我們怎么能部署它呢?
因此署照，請檢出以下分支:
git checkout .
git checkout clean-urls-ssr
在這一點(diǎn)上，我們使用自定義服務(wù)器來運(yùn)行我們的應(yīng)用程序吗浩，所以在你的應(yīng)用中加入Express:
npm install --save express
構(gòu)建應(yīng)用程序
即便如此建芙，你也可以用Next.js來構(gòu)建你的應(yīng)用。因此懂扼，添加以下的npm腳本:
"scripts": {
"build": "next build"
}
啟動(dòng)應(yīng)用程序
我們需要?jiǎng)?chuàng)建自定義服務(wù)器代碼來說明這是一個(gè)生產(chǎn)應(yīng)用程序禁荸，為此，請從我們的server.js中查看這段代碼
const express = require('express')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare()
.then(() => {
const server = express()
server.get('/p/:id', (req, res) => {
const actualPage = '/post'
const queryParams = { title: req.params.id }
app.render(req, res, actualPage, queryParams)
})
server.get('*', (req, res) => {
return handle(req, res)
})
server.listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
.catch((ex) => {
console.error(ex.stack)
process.exit(1)
})
看看下面的一行:
const dev = process.env.NODE_ENV !== 'production'
因此阀湿，我們可以像這樣啟動(dòng)我們的應(yīng)用程序:
NODE_ENV=production node server.js
因此赶熟，我們的“npm start”腳本將如下:
"scripts": {
"start": "NODE_ENV=production node server.js"
}
這就是你要做的。
最后
現(xiàn)在炕倘，您幾乎知道了如何部署Next.js應(yīng)用钧大。
您還可以了解更多關(guān)于部署的內(nèi)容 deploying Next.js 從我們的文檔。
