Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。
Next.js目前已经开源，https://zeit.co/blog/next
你遇到过这个问题吗?
如何部署我的Next.js应用?
我们还没有讨论过这个问题，但它非常简单明了。
您可以部署Next.js应用到任何你可以运行node.js的地方。因此，没有任何类型的锁定，即使部署到ZEIT中也非常简单。
让我们学习部署Next.js应用。
首先，我们需要一个简单的Next.js应用程序。试着下载下面的示例应用程序:
git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout using-shared-components
你可以执行以下命令：
npm install
npm run dev
现在，您可以通过导航到http://localhost:3000来访问该应用程序。
构建和启动
首先，我们需要建立Next.js应用于生产。它将为生产生成一组优化的代码。
为此，只需在package.json添加以下的npm脚本:
"scripts": {
"build": "next build"
}
然后你需要启动Next.js应用在一个端口上。这将执行副渲染和服务页面(用上面的命令构建)。
为此，只需在package.json添加以下的npm脚本:
"scripts": {
"start": "next start"
}
这将在3000端口启动我们的应用。
因此，您可以运行以下命令来运行我们的应用程序:
npm run build
npm run start
运行两个实例
现在，我们要运行两个应用程序，通常，我们这样做是为了水平地扩展我们的应用程序。
首先，对我们的start npm脚本做如下更改:
"scripts": {
"start": "next start -p $PORT"
}
如果你在Windows上，你的启动脚本应该是 next start -p %PORT%.
现在让我们先来构建我们的应用程序。
npm run build
然后尝试在自己的终端中运行以下命令:
PORT=8000 npm start
PORT=9000 npm start
在Windows上，您需要以不同的方式运行命令。一种选择是将npm模块 cross-env
安装到你的应用中。
然后运行 cross-env PORT=9000 npm start 从命令行。
是否有可能在两个端口上访问我们的应用程序?
构建一次，运行多个实例
正如您所看到的，您需要一次构建您的应用程序。然后你可以在任意多的端口上启动它。
部署到 ▲ZEIT now
现在我们知道如何构建和y启动Next.js。我们用npm脚本做了所有的事情。因此，您将能够定制它，以使用您最喜欢的部署服务。
但如果你使用 ▲ZEIT now, 只有一个步骤。
只需添加以下的npm脚本:
"scripts": {
"build": "next build",
"start": "next start -p 8000"
}
然后 install now. 然后应用以下命令:
now
基本上，您运行您的应用程序根目录内"现在"命令。
在这里，我们提到端口8000作为我们启动应用程序的端口，但是我们在部署到ZEIT时并没有改变它。
那么，在部署到ZEIT的时候，我们可以在哪个端口访问我们的应用呢?
ZEIT总是使用443
实际上，即使你在端口8000上启动你的应用程序，你也可以使用端口443(默认端口为“https”网站)访问它。
这是ZEIT的一个特点。你只需要在你喜欢的任何端口上启动你的应用程序。ZEIT现在将把它映射到端口443。
构建您的应用程序在本地
▲ZEIT now 将检测npm构建脚本，并在它的构建基础结构中构建它。
但是，并不是所有的主机供应商都有类似的东西。
在这种情况下，你可以在本地创建你的应用:
npm run build
然后将应用程序部署到该应用程序中.next目录。
使用定制服务器部署应用程序
我们刚刚部署的应用程序不使用自定义服务器代码。但是如果我们有这个，我们怎么能部署它呢?
因此，请检出以下分支:
git checkout .
git checkout clean-urls-ssr
在这一点上，我们使用自定义服务器来运行我们的应用程序，所以在你的应用中加入Express:
npm install --save express
构建应用程序
即便如此，你也可以用Next.js来构建你的应用。因此，添加以下的npm脚本:
"scripts": {
"build": "next build"
}
启动应用程序
我们需要创建自定义服务器代码来说明这是一个生产应用程序，为此，请从我们的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'
因此，我们可以像这样启动我们的应用程序:
NODE_ENV=production node server.js
因此，我们的“npm start”脚本将如下:
"scripts": {
"start": "NODE_ENV=production node server.js"
}
这就是你要做的。
最后
现在，您几乎知道了如何部署Next.js应用。
您还可以了解更多关于部署的内容 deploying Next.js 从我们的文档。
网友评论