使用Nginx和pm2部署Next.js項(xiàng)目
概述

只有一臺(tái)服務(wù)器,所以上圖服務(wù)都都在一個(gè)云服務(wù)器上。其中Nginx 分別在用戶(hù)和Next服務(wù)之間代理、在Next和后臺(tái)之間代理。
常規(guī)的前臺(tái)頁(yè)面不需要這樣做,例如Vue中直接把build之后的dist文件拷貝到nginx的html目錄并配置nginx指向即可,但是Next可以做到服務(wù)端渲染(SSR)所以Next的前臺(tái)頁(yè)面實(shí)際上是一個(gè)nodejs服務(wù),所以nginx在這里是代理用戶(hù)請(qǐng)求,proxy_pass到這個(gè)nodejs服務(wù)上。
而前后臺(tái)之間的nginx代理屬于反向代理,一般也通過(guò)proxy_pass去rewrite路徑進(jìn)行代理,我沒(méi)配置這個(gè)。
Next.js配置
在需要SSR的page中需要添加 getStaticProps(getStaticProps這些function只能寫(xiě)在page文件夾中,不可以在components中用),注意可以設(shè)置revalidate定時(shí)重新build頁(yè)面,這樣頁(yè)面也可以定期更新,如下:
export async function getStaticProps() {
//后臺(tái)取數(shù)據(jù)
const result = await queryTimelineList()
// console.log(result)
return {
props: {
timelineData: result.data,
},
// 重新繪制頁(yè)面時(shí)長(zhǎng) 1200 ,單位秒
revalidate: 1200
};
}另外,注意在動(dòng)態(tài)路由的page中,需要設(shè)置fallback為true,且頁(yè)面中要增加對(duì)fallback為false的處理,否則build的時(shí)候會(huì)報(bào)錯(cuò),如下 一個(gè)名為 [postId].js的page:
const PostId = ({postId, postDetail, recentPosts,curTags}) => {
const router = useRouter()
// 注意,這里要處理
if (router.isFallback) {
return <div>Loading...</div>
}
...
}
// Fetch data at build time
export async function getStaticProps(context) {
const postId = context.params.postId
const
[postDetailResult,
recentPostsResult,
curPostTagsResult] = await Promise.all([
queryPostDetailByPostId(postId),
queryRecentPostList(),
queryTagListByPostId(postId)
]
)
return {
props: {
postId: postId,
postDetail: postDetailResult?.data,
recentPosts: recentPostsResult?.data,
curTags: curPostTagsResult?.data
},
revalidate: 300
};
}
// Specify dynamic routes to pre-render pages based on data.
// The HTML is generated at build time and will be reused on each request.
export async function getStaticPaths() {
const postIdsResult = await queryPostIdList();
const postIdList = postIdsResult.data
return {
paths: postIdList.map((postId) => {
// 這里如果傳的是數(shù)字會(huì)報(bào)錯(cuò),必須轉(zhuǎn)為字符串
return {params: {postId: postId.toString()}}
}),
// 設(shè)置為true
fallback: true,
};
}Nginx配置
完整的nginx.conf配置文件如下:
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#log_format main '$remote_addr - $remote_user [$time_local] "$request" '
# '$status $body_bytes_sent "$http_referer" '
# '"$http_user_agent" "$http_x_forwarded_for"';
#access_log logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
# HTTPS server
#
server {
listen 443 ssl;
server_name btyhub.site, www.btyhub.site;
# ssl兩個(gè)文件,放在 nginx的conf目錄中
ssl_certificate btyhub.site_bundle.pem;
ssl_certificate_key btyhub.site.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
# 代理到Next的服務(wù),默認(rèn)3000端口,也可以在start的時(shí)候指定
location / {
proxy_pass http://127.0.0.1:3000/;
}
}
# 監(jiān)聽(tīng)普通http請(qǐng)求,重寫(xiě)至https
server{
listen 80;
server_name btyhub.site, www.btyhub.site;
rewrite ^(.*)$ https://$host$1 permanent;
}
}pm2啟動(dòng)
ps:除了使用pm2啟動(dòng)Next服務(wù)外,也可以npm run build之后直接nohup npm run start。
首先要安裝node環(huán)境,安裝完了將命令添加到全局bin中:
# /usr/local/node是我的node安裝目錄 ln -s /usr/local/node/bin/npm /usr/local/bin/ ln -s /usr/local/node/bin/npx /usr/local/bin/ ln -s /usr/local/node/bin/node /usr/local/bin/
其次,全局安裝pm2 并加入全局bin:
npm install -g pm2 ln -s /usr/local/node/bin/pm2 /usr/local/bin/
測(cè)試,是否安裝成功:
pm2 -version
運(yùn)行next服務(wù)
需要將項(xiàng)目源文件上傳至云服務(wù)器:

運(yùn)行npm run build
運(yùn)行pm2 start --name yourappname npm -- start
后記:
域名配置完要隔幾天才可以給網(wǎng)站備案,備案之后才可以通過(guò)域名訪(fǎng)問(wèn),在這之前可以先用ip地址測(cè)試。
到此這篇關(guān)于使用Nginx和pm2部署Next.js項(xiàng)目的文章就介紹到這了,更多相關(guān)Nginx和pm2部署Next.js內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
nginx+lua+redis防刷和限流的實(shí)現(xiàn)
本文將介紹如何使用nginx lua redis實(shí)現(xiàn)防刷和限流,首先,我們將了解防刷和限流的基本概念和必要性,然后,我們將詳細(xì)介紹如何使用nginx lua redis實(shí)現(xiàn)防刷和限流,感興趣的可以了解一下2023-09-09
Nginx報(bào)錯(cuò)403問(wèn)題排查與解決辦法
在Web開(kāi)發(fā)中Nginx作為高性能的Web服務(wù)器和反向代理服務(wù)器,常遇到403錯(cuò)誤,這篇文章主要介紹了Nginx報(bào)錯(cuò)403問(wèn)題排查與解決辦法的相關(guān)資料,需要的朋友可以參考下2025-06-06
Nginx access 日志通過(guò) Filebeat 8.15.5 寫(xiě)
本文基于 Filebeat 8.15.5 版本,詳細(xì)實(shí)現(xiàn)了Nginx access日志到ES 8的采集流程,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2025-12-12
Nginx實(shí)現(xiàn)根據(jù)域名http、https分發(fā)配置示例
這篇文章主要介紹了Nginx實(shí)現(xiàn)根據(jù)域名http、https分發(fā)配置示例,本文同時(shí)介紹了openssl證書(shū)生成方法,需要的朋友可以參考下2014-10-10
Nginx內(nèi)置變量應(yīng)用場(chǎng)景分析
Nginx內(nèi)置變量速查表,涵蓋請(qǐng)求URI、客戶(hù)端信息、服務(wù)器信息、文件路徑、響應(yīng)與性能等類(lèi)別,這篇文章給大家介紹Nginx內(nèi)置變量應(yīng)用場(chǎng)景分析,感興趣的朋友跟隨小編一起看看吧2025-11-11
Nginx 動(dòng)態(tài)域名解析過(guò)程詳解
這篇文章主要為大家介紹了Nginx 動(dòng)態(tài)域名解析過(guò)程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03

