Next.js 环境变量控制部署

Next.js 部署与 devops

前言

需要将 Next.js 部署到云平台上，同一份镜像，通过环境变量来控制项目的 api 链接，实现CI/CD 的流程。云平台框架使用的是 rainbond。

Next.js 环境变量控制部署

一、 安装 cross-env

cross-env 用来设置环境变量，因为 win 和 linux 设置环境变量的方法不同，所以引入第三方库来方便设置

npm i --save cross-env

二、创建 config 目录

在根目录下创建 config 目录, 根据不同的 NODE_ENV 创建不同的文件夹， 底下新建不同的 dev ,test 文件。

dev 文件中，有 服务器地址等，ex : PORT=3000 …, test 文件也是

  your-project
  |- pages
  |- public
+ |- config
+  |- development
+    |- dev
+    |- test
+  |- production
+    |- dev
+    |- test

dev 内容如下, ORIGIN ，NEXT_PUBLIC_ORIGIN 就是远程服务器的地址

HOST=xxxx
PORT=8888
ORIGIN=http://xxxx:8888
NEXT_PUBLIC_ORIGIN=http://xxxx:8888

三、 新建 env.js 文件

在根目录下新建 env.js 文件， .env.js 内容如下：

const fs = require('fs')
const path = require('path');

// 从环境变量中获取
const {
    NODE_ENV = 'production', RTE = 'test' } = process.env; 

//封装 resolve
const resolve = (p) => path.join(__dirname, p); 

/**
 * 读取文件
 * 文件格式内容为
 * TEST=ABC
 * @param {路径} p 路径
 * @return [[TEST:ABC]]
 */
const readEnv = (p) => {
   
    fs
    .readFileSync(resolve(p)