最近開(kāi)源了一款基于 Next.js + Antd5.0 的管理后臺(tái)系統(tǒng)，打算持續(xù)迭代到開(kāi)發(fā)者能傻瓜式開(kāi)發(fā)和部署管理后臺(tái)的程度， 下面和大家分享一下最近的一些更新。

• 添加pm2持久化部署配置
• 優(yōu)化打包后圖表渲染白屏問(wèn)題
• 支持PC端和移動(dòng)端適配
• 添加白板制作頁(yè)面

接下來(lái)會(huì)和大家分享一下具體的實(shí)現(xiàn)， 如果大家想了解 next-admin 這款開(kāi)源管理系統(tǒng)。

同時(shí)也歡迎對(duì) Next.js 感興趣的小伙伴一起共建。

Github地址：https://github.com/MrXujiang/next-admin

在線地址：http://next-admin.com

Next.js部署神器PM2

為什么會(huì)選擇PM2來(lái)部署呢？這里給大家總結(jié)幾個(gè)優(yōu)勢(shì)：

• 負(fù)載均衡：pm2使用Node.js的cluster模塊，可以在服務(wù)器上的所有CPU核心上運(yùn)行多個(gè)應(yīng)用實(shí)例，實(shí)現(xiàn)負(fù)載均衡。
• 后臺(tái)運(yùn)行：與直接在前臺(tái)運(yùn)行Node.js應(yīng)用程序相比，pm2可以將應(yīng)用程序在后臺(tái)運(yùn)行，更加穩(wěn)定。
• 異常自動(dòng)重啟（持久化）：pm2可以在應(yīng)用程序停止之后立即重啟，減少了停機(jī)時(shí)間。pm2可以監(jiān)測(cè)應(yīng)用程序的運(yùn)行狀態(tài)，當(dāng)進(jìn)程發(fā)生異常（如無(wú)限循環(huán)）時(shí)，可以停止并重啟不穩(wěn)定的進(jìn)程。
• 控制臺(tái)應(yīng)用監(jiān)控：pm2提供了控制臺(tái)界面，可以方便地查看應(yīng)用程序的狀態(tài)、日志和性能指標(biāo)等信息。

所以說(shuō)如果對(duì)于 nginx 高級(jí)玩法不太熟悉， 建議直接用 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應(yīng)用的部署需求，大家可以參考一下。接下來(lái)我們只需要在服務(wù)器上運(yùn)行腳本即可啟動(dòng)：

"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"

啟動(dòng)后的效果：

優(yōu)化打包后圖表渲染白屏問(wèn)題

由于新版react在開(kāi)發(fā)環(huán)境下會(huì)渲染兩次，這會(huì)導(dǎo)致某些庫(kù)創(chuàng)建兩個(gè)實(shí)例， 導(dǎo)致開(kāi)發(fā)環(huán)境出現(xiàn)渲染問(wèn)題， 比如我明明渲染一張圖表，結(jié)果在開(kāi)發(fā)瀏覽器卻渲染了兩張。為了避免開(kāi)發(fā)環(huán)境react組件渲染兩次的問(wèn)題， 我寫了一個(gè)緩存函數(shù)，來(lái)解決：

const MyChart = (props: IChart) => {
    const chartRef = useRef<any>(null);
    const { type, data, id } =props;
    useEffect(() => {
        let chart:any;
        // 避免在開(kāi)發(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)境和開(kāi)發(fā)環(huán)境就可以優(yōu)雅的渲染圖表了：

支持PC端和移動(dòng)端適配

由于目前大部分管理后臺(tái)都是針對(duì)PC端的， 移動(dòng)訪問(wèn)體驗(yàn)不好， 所以我在 Next-Admin 管理系統(tǒng)中做了適配， 保證在PC和移動(dòng)端都能有不錯(cuò)的適配效果。接下來(lái)分享幾張移動(dòng)端訪問(wèn) Next-Admin 的頁(yè)面：

內(nèi)置在線白板

之前寫了一個(gè)自定義的白板應(yīng)用，目前也內(nèi)置進(jìn)去了，大家可以參考一下：

后期規(guī)劃

后面會(huì)對(duì)國(guó)際化支持，搭建引擎，頁(yè)面渲染引擎做一些內(nèi)置頁(yè)面，幫助大家更高效的開(kāi)發(fā)管理系統(tǒng)。