Как next.config.js настраивает переменные среды?

#node.js #next.js

#node.js #next.js

Вопрос:

NexJs — это совершенно новый фреймворк для меня, и я его изучал.

Я следую этому видеоуроку, и одним из шагов является создание файла next.config.js . В этом файле я помещаю:

 module.exports ={
    env: {
        MONGO_URI: "mongodb srv://username:pwd@cluster0.yxxxx.mongodb.net/ricoapp?retryWrites=trueamp;w=majority"
    }
}
 

И позже я подключаюсь к mongo db следующим образом:

 console.log('1: ', Object.keys(process.env).includes("MONGO_URI"));
console.log('2: ', "MONGO_URI" in process.env);
console.log('3: ', typeof process.env.MONGO_URI);
console.log('4: ', Object.getOwnPropertySymbols(process.env));
console.log('5: ',process.env.MONGO_URI);
const db = await mongoose.connect(process.env.MONGO_URI, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
});
 

В консоли я получаю следующий вывод:

1: false

2: false

3: строка

4: []

5: mongodb srv://username:pwd@cluster0.yxxxx.mongodb.net/ricoapp?retryWrites=trueamp;w=majority

Итак MONGO_URI , каким-то образом доступно корыто process.env.MONGO_URI , но мне кажется, что это не свойство process.env .

Чего мне здесь не хватает? Для меня это не имеет смысла.

Ответ №1:

Переменные среды, определенные в next.config.js , заменяются перед запуском сервера. Таким образом, каждое вхождение process.env.MONGO_URI будет заменено строковым значением, которое вы определили next.config.js .

Пример

Допустим, у вас есть такая конфигурация:

 // next.config.js
module.exports ={
    env: {
        MY_ENV_VAR: "value_of_my_env_var"
    }
}
 

И Next.js Функция API выглядит следующим образом:

 // pages/api/index.js
export default function handler(req, res) {
  const response = process.env.MY_ENV_VAR;

  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end(response)
}
 

После запуска npm run dev или npm run build код компилируется webpack для этого:

 // pages/api/index.js
export default function handler(req, res) {
  const response =  "value_of_my_env_var";

  res.statusCode = 200
  res.setHeader('Content-Type', 'text/plain')
  res.end(response)
}
 

Из документов:

Next.js заменит process.env.CustomKey на ‘my-value’ во время сборки. Попытка деструктурировать переменные process.env не будет работать из-за природы webpack DefinePlugin.

Комментарии:

1. Спасибо за ваш ответ. Но как нам управлять несколькими средами (например, «разработка», «стадия», «производство»)? Что-то вроде $ NODE_ENV=production npm start

2. Это зависит от вашего развертывания: Если вы создаете статический сайт (HTML CSS), вы всегда можете получить доступ process.env к нему во next.config.js время сборки. Таким образом, вы могли бы установить значение переменной env на основе вашего NODE_ENV: { MY_ENV_VAR: process.env.NODE_ENV === 'production' ? 'prod' : 'dev' } .

3. Если вы запустите Next.js как сервер (и не хотите иметь несколько сборок, основанных на вашей среде), вы можете полностью удалить переменные dynamic env next.config.js . Затем вы должны убедиться, что среда (например, контейнер docker) установила переменные среды, а затем вы можете получить к ним доступ process.env.XXX . Но это работает только с частями кода, которые находятся на стороне сервера (например, маршруты API или in getServerSideProps ).