使用Nginx和pm2部署Next.js項目
概述
只有一臺服務器，所以上圖服務都都在一個云服務器上。其中Nginx 分別在用戶和Next服務之間代理、在Next和后臺之間代理。
常規(guī)的前臺頁面不需要這樣做，例如Vue中直接把build之后的dist文件拷貝到nginx的html目錄并配置nginx指向即可，但是Next可以做到服務端渲染(SSR)所以Next的前臺頁面實際上是一個nodejs服務，所以nginx在這里是代理用戶請求，proxy_pass到這個nodejs服務上。
而前后臺之間的nginx代理屬于反向代理，一般也通過proxy_pass去rewrite路徑進行代理，我沒配置這個。
Next.js配置
在需要SSR的page中需要添加 getStaticProps（getStaticProps這些function只能寫在page文件夾中，不可以在components中用），注意可以設置revalidate定時重新build頁面，這樣頁面也可以定期更新，如下：
export async function getStaticProps() {
//后臺取數據
const result = await queryTimelineList()
// console.log(result)
return {
props: {
timelineData: result.data,
},
// 重新繪制頁面時長 1200 ，單位秒
revalidate: 1200
};
}另外，注意在動態(tài)路由的page中，需要設置fallback為true，且頁面中要增加對fallback為false的處理，否則build的時候會報錯，如下 一個名為 [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) => {
// 這里如果傳的是數字會報錯，必須轉為字符串
return {params: {postId: postId.toString()}}
}),
// 設置為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兩個文件，放在 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的服務，默認3000端口，也可以在start的時候指定
location / {
proxy_pass http://127.0.0.1:3000/;
}
}
# 監(jiān)聽普通http請求，重寫至https
server{
listen 80;
server_name btyhub.site, www.btyhub.site;
rewrite ^(.*)$ https://$host$1 permanent;
}
}pm2啟動
ps：除了使用pm2啟動Next服務外，也可以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/
測試，是否安裝成功：
pm2 -version
運行next服務
需要將項目源文件上傳至云服務器：
運行npm run build
運行pm2 start --name yourappname npm -- start
后記：
域名配置完要隔幾天才可以給網站備案，備案之后才可以通過域名訪問，在這之前可以先用ip地址測試。
到此這篇關于使用Nginx和pm2部署Next.js項目的文章就介紹到這了,更多相關Nginx和pm2部署Next.js內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了Nginx網站服務,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
本文將介紹如何使用nginx lua redis實現防刷和限流,首先,我們將了解防刷和限流的基本概念和必要性,然后,我們將詳細介紹如何使用nginx lua redis實現防刷和限流,感興趣的可以了解一下2023-09-09
在Web開發(fā)中Nginx作為高性能的Web服務器和反向代理服務器,常遇到403錯誤,這篇文章主要介紹了Nginx報錯403問題排查與解決辦法的相關資料,需要的朋友可以參考下2025-06-06
Nginx access 日志通過 Filebeat 8.15.5 寫
本文基于 Filebeat 8.15.5 版本,詳細實現了Nginx access日志到ES 8的采集流程,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-12-12
Nginx實現根據域名http、https分發(fā)配置示例
這篇文章主要介紹了Nginx實現根據域名http、https分發(fā)配置示例,本文同時介紹了openssl證書生成方法,需要的朋友可以參考下2014-10-10
本文主要介紹了nginx配置ipv6支持的實現示例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-12-12
Nginx內置變量速查表,涵蓋請求URI、客戶端信息、服務器信息、文件路徑、響應與性能等類別,這篇文章給大家介紹Nginx內置變量應用場景分析,感興趣的朋友跟隨小編一起看看吧2025-11-11
這篇文章主要介紹了nginx常用配置conf，包括配置vue項目，配置接口代理的代碼詳解，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Nginx1.8.0版本平滑升級新版本1.9.7的相關資料,需要的朋友可以參考下2016-02-02
這篇文章主要為大家介紹了Nginx 動態(tài)域名解析過程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03