NextJS 项目部署:Node Server + PM2 + Nginx + Linux
最近nextjs 13发布,于是用它写了个小项目妹子图-魔力美少女[1],部署在阿里云上,简单记录一下过程。
• meizitu.mzh.ren[2]
• 妹子图-魔力美少女[3] Vercel备用地址
nextjs 官方文档Deployment | Next.js[4]有详细的部署指南,主要是三种方式:
• 部署到 Vercel 云平台[5]
• 导出为静态文件,随意托管[6]
• 自己部署
• Nodejs Server
• Docker 方式
其中 Vercel.com
我访问不了,静态文件
不支持某些特性,Docker 暂时没用过,所以就选了 Node.js Server
方式。
安装 Node Server环境
Node Server 环境主要涉及到:
• 运行环境:Node.js
• 包管理器:npm/cnpm/yarn
• 版本管理:nvm
安装过程略。
nextjs要求node版本在16以上,我本地也是16,所以没什么问题。但部署上去的时候,我发现我的服务器上的node版本是14,于是我就安装了nvm,用nvm安装了node16。
运行项目
下载项目文件到服务器。在next项目文件 package.json
会有 "build" 和 "start" 两个命令:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
}
}
首先,运行 build
来构建您的应用程序。然后,运行 next start
启动 Node.js 服务器
。该服务器支持 Next.js 的所有功能。
PM2进程守护
PM2[7]是node进程管理工具,可以利用它来简化很多node应用管理的繁琐任务,如性能监控、自动重启、负载均衡等,而且使用非常简单。
安装 PM2
npm install pm2 -g
启动项目
pm2 start npm --name "nextjs" -- start
设置端口(默认为3000)
sudo pm2 start npm --name "nextjs" -- run start -- --port=8080
也可以在 package.json
文件中添加端口:
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 8080"
}
}
查看进程
pm2 list
pm2 show nextjs
进程监控
pm2 monit
关闭、重启、删除进程
pm2 stop nextjs
pm2 restart nextjs
pm2 delete nextjs
查看日志
pm2 logs nextjs
pm2 服务开机、重启自启动
pm2 startup
绑定域名
我服务器上用的是nginx。nginx[8] 是一个高性能的HTTP和反向代理服务器,同时也提供了IMAP/POP3/SMTP服务。反向代理配置如下:
server {
server_name meizitu.mzh.ren;
location / {
proxy_pass http://127.0.0.1:8080;
proxy_read_timeout 60;
proxy_connect_timeout 60;
proxy_redirect off;
# Allow the use of websockets
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;
}
}
Linux 目录权限问题
因为我不经常使用Linux,部署的时候遇到了一些权限问题,比如:
Error: EACCES: permission denied, mkdir '/root/.next/cache'
给目录加上权限就好了:
sudo chmod -R 777 /root/.next
参考资料
• Deploying NEXTJS site with nginx + pm2[9]
• Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04[10]
• How to Update Node and NPM to the Latest Version[11]
• Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04[12]
往期推荐
欢迎关注我的公众号“码中人”,原创技术文章第一时间推送。
引用链接
[1]
妹子图-魔力美少女: http://meizitu.mzh.ren/[2]
meizitu.mzh.ren: http://meizitu.mzh.ren/[3]
妹子图-魔力美少女: https://mgirls.vercel.app/[4]
Deployment | Next.js: https://nextjs.org/docs/deployment[5]
部署到 Vercel 云平台: vercel.com[6]
导出为静态文件,随意托管: https://nextjs.org/docs/advanced-features/static-html-export[7]
PM2: https://pm2.keymetrics.io/[8]
nginx: https://www.nginx.com/[9]
Deploying NEXTJS site with nginx + pm2: https://gist.github.com/jjsquady/5399d6e1b23f501083a9c262d806e248[10]
Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04: https://www.willandskill.se/en/articles/setup-a-next-js-project-with-pm2-nginx-and-yarn-on-ubuntu-18-04[11]
How to Update Node and NPM to the Latest Version: https://www.freecodecamp.org/news/how-to-update-node-and-npm-to-the-latest-version/[12]
Setup a Next.js project with PM2, Nginx and Yarn on Ubuntu 18.04: https://www.willandskill.se/en/articles/setup-a-next-js-project-with-pm2-nginx-and-yarn-on-ubuntu-18-04