学习 Next.js: 部署

laznrbfe 发布于2019-08-20 19:08 / 2240人阅读

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署部署要部署一个应用程序当然我们首先需要一个可部署的已经开发完成的应用程序以下面这个开发的小型博客

原始文档在 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;
}

超融合服务器私有云 next.js next.js 样式 Next.js 12 正式发布、Yarn 公有云部署和私有云部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85199.html

学习 Next.js: 入门

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署哪位分高的帮忙创建一个的标签谢谢现暂时放在标签下面了新建文章有时间限制一会全部发上来这是最近两天原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

Miracle 2019-08-20 16:54 评论0 收藏0
【翻译】Next.js背后的哲学和设计

摘要：无数的模板语言和框架应运而生但是技术始终被分割为前端和后端。这意味着一个页面可以有很多的这并不会对其余的页面有任何影响。提前绑定和编译预测是一个非常有效的部署方式。最后，这是我们对于这个特定问题的贡献。 Next.js 原文地址 Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) 和 Tony Kovanen (@tonykova...

plokmju88 2019-08-21 11:17 评论0 收藏0
学习 Next.js: 使用路由掩码创建干净的URL

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署使用路由掩码创建干净的在前面的课程中我们学到了如何使用查询串创建动态页面一次为基础我们一篇博客的原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

silenceboy 2019-08-20 16:56 评论0 收藏0
学习 Next.js: 页面之间的导航

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署页面之间的导航现在我们知道了如何创建一个应用程序并且运行它我们的示例应用程序只有一个简单的页面但原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

layman 2019-08-20 16:54 评论0 收藏0
学习 Next.js: 创建动态内容

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署创建动态页面现在我们知道了如何使用多个页面创建一个基本的应用程序为了创建页面我们需要在磁盘上创建原始文档在 https://github.com/developerw... 现在搬过来. 学习 Next.js: 入门学习 Next.js: ...

caohaoyu 2019-08-20 16:56 评论0 收藏0