Next.js項目部署，跨端適配，圖表渲染優化復盤

作者：徐小夕 2024-04-01 09:01:20

開發前端

最近開源了一款基于 Next.js + Antd5.0 的管理后臺系統，打算持續迭代到開發者能傻瓜式開發和部署管理后臺的程度。本文和大家分享一下最近的一些更新。

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

添加pm2持久化部署配置
優化打包后圖表渲染白屏問題
支持PC端和移動端適配
添加白板制作頁面

接下來會和大家分享一下具體的實現，如果大家想了解 next-admin 這款開源管理系統。

同時也歡迎對 Next.js 感興趣的小伙伴一起共建。

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

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

Next.js部署神器PM2

為什么會選擇PM2來部署呢？這里給大家總結幾個優勢：

負載均衡：pm2使用Node.js的cluster模塊，可以在服務器上的所有CPU核心上運行多個應用實例，實現負載均衡。
后臺運行：與直接在前臺運行Node.js應用程序相比，pm2可以將應用程序在后臺運行，更加穩定。
異常自動重啟（持久化）：pm2可以在應用程序停止之后立即重啟，減少了停機時間。pm2可以監測應用程序的運行狀態，當進程發生異常（如無限循環）時，可以停止并重啟不穩定的進程。
控制臺應用監控：pm2提供了控制臺界面，可以方便地查看應用程序的狀態、日志和性能指標等信息。

所以說如果對于 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"

啟動后的效果：

優化打包后圖表渲染白屏問題

由于新版react在開發環境下會渲染兩次，這會導致某些庫創建兩個實例，導致開發環境出現渲染問題，比如我明明渲染一張圖表，結果在開發瀏覽器卻渲染了兩張。為了避免開發環境react組件渲染兩次的問題，我寫了一個緩存函數，來解決：

const MyChart = (props: IChart) => {
    const chartRef = useRef<any>(null);
    const { type, data, id } =props;
    useEffect(() => {
        let chart:any;
        // 避免在開發環境渲染兩次
    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>
}

這樣生產環境和開發環境就可以優雅的渲染圖表了：