Next.js項目部署，跨端適配，圖表渲染優(yōu)化復盤
最近開源了一款基于 Next.js + Antd5.0 的管理后臺系統(tǒng)，打算持續(xù)迭代到開發(fā)者能傻瓜式開發(fā)和部署管理后臺的程度， 下面和大家分享一下最近的一些更新。
- 添加pm2持久化部署配置
- 優(yōu)化打包后圖表渲染白屏問題
- 支持PC端和移動端適配
- 添加白板制作頁面
接下來會和大家分享一下具體的實現(xiàn)， 如果大家想了解 next-admin 這款開源管理系統(tǒng)。
同時也歡迎對 Next.js 感興趣的小伙伴一起共建。
Github地址：https://github.com/MrXujiang/next-admin
在線地址：http://next-admin.com
Next.js部署神器PM2
為什么會選擇PM2來部署呢？這里給大家總結幾個優(yōu)勢：
- 負載均衡：pm2使用Node.js的cluster模塊，可以在服務器上的所有CPU核心上運行多個應用實例，實現(xiàn)負載均衡。
- 后臺運行：與直接在前臺運行Node.js應用程序相比，pm2可以將應用程序在后臺運行，更加穩(wěn)定。
- 異常自動重啟（持久化）：pm2可以在應用程序停止之后立即重啟，減少了停機時間。pm2可以監(jiān)測應用程序的運行狀態(tài)，當進程發(fā)生異常（如無限循環(huán)）時，可以停止并重啟不穩(wěn)定的進程。
- 控制臺應用監(jiān)控：pm2提供了控制臺界面，可以方便地查看應用程序的狀態(tài)、日志和性能指標等信息。
所以說如果對于 nginx 高級玩法不太熟悉， 建議直接用 pm2。
下面給大家介紹一下 Next-Admin 的 pm2 配置：
const argEnvIndex = process.argv.indexOf('--env')
let argEnv = (argEnvIndex !== -1 && process.argv[argEnvIndex + 1]) || ''
const RUN_ENV_MAP = {
local: {
instances: 2,
max_memory_restart: '250M'
},
dev: {
instances: 2,
max_memory_restart: '250M'
},
prod: {
instances: 4,
max_memory_restart: '1000M'
}
}
if (!(argEnv in RUN_ENV_MAP)) {
argEnv = 'prod'
}
module.exports = {
apps: [
{
name: 'next-admin',
script: 'node_modules/next/dist/bin/next',
args: 'start -p 80',
instances: RUN_ENV_MAP[argEnv].instances,
exec_mode: 'cluster',
watch: false,
max_memory_restart: RUN_ENV_MAP[argEnv].max_memory_restart,
env_local: {
APP_ENV: 'local'
},
env_dev: {
APP_ENV: 'dev'
},
env_prod: {
APP_ENV: 'prod'
}
}
]
}配置基本上可以滿足大部分node應用的部署需求，大家可以參考一下。接下來我們只需要在服務器上運行腳本即可啟動：
"deploy:local": "pnpm build:local && pm2 start pm2.config.js --env local",
"deploy:dev": "pnpm build:dev && pm2 start pm2.config.js --env dev",
"deploy:prod": "pm2 start pm2.config.js --env prod"啟動后的效果：
優(yōu)化打包后圖表渲染白屏問題
由于新版react在開發(fā)環(huán)境下會渲染兩次，這會導致某些庫創(chuàng)建兩個實例， 導致開發(fā)環(huán)境出現(xiàn)渲染問題， 比如我明明渲染一張圖表，結果在開發(fā)瀏覽器卻渲染了兩張。為了避免開發(fā)環(huán)境react組件渲染兩次的問題， 我寫了一個緩存函數(shù)，來解決：
const MyChart = (props: IChart) => {
const chartRef = useRef<any>(null);
const { type, data, id } =props;
useEffect(() => {
let chart:any;
// 避免在開發(fā)環(huán)境渲染兩次
if(isDev) {
let curCache = localStorage.getItem(id);
if(!curCache) {
localStorage.setItem(id, '1');
chart = createChart(chartRef.current, type, data);
}
}else {
chart = createChart(chartRef.current, type, data);
}
return () => {
localStorage.removeItem(id);
chart && chart.destroy();
}
}, [type, data, id]);
return <div ref={chartRef}></div>
}這樣生產(chǎn)環(huán)境和開發(fā)環(huán)境就可以優(yōu)雅的渲染圖表了：
支持PC端和移動端適配
由于目前大部分管理后臺都是針對PC端的， 移動訪問體驗不好， 所以我在 Next-Admin 管理系統(tǒng)中做了適配， 保證在PC和移動端都能有不錯的適配效果。接下來分享幾張移動端訪問 Next-Admin 的頁面：
內(nèi)置在線白板
之前寫了一個自定義的白板應用，目前也內(nèi)置進去了，大家可以參考一下：
后期規(guī)劃
后面會對國際化支持，搭建引擎，頁面渲染引擎做一些內(nèi)置頁面，幫助大家更高效的開發(fā)管理系統(tǒng)。
