Блог

Главная - Вопросы по программированию - Переменная среды, доступная на сервере, но не на клиенте, даже если она имеет префикс

Переменная среды, доступная на сервере, но не на клиенте, даже если она имеет префикс

#typescript #environment-variables #next.js

#typescript #переменные среды #next.js

Вопрос:

У меня есть .env.local файл, в котором заданы три переменные:

 NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY=pk_test_<get-your-own>
MAGIC_SECRET_KEY=sk_test_<get-your-own>
TOKEN_SECRET=some-secret

Я распечатываю их в pages/login.ts :

 import UserAuthenticationPage from 'client/features/user-authentication/user-authentication-container';
import redirectIfLoggedIn from 'client/hocs/redirect-if-logged-in';
import { NextPage } from 'next';

(UserAuthenticationPage as NextPage).getInitialProps = async () => {
  console.log('env in login.ts getInitialProps', process.env);
  return {
    namespacesRequired: ['common', 'user-authentication'],
  };
};
console.log('env in login.ts client side', process.env);

export default redirectIfLoggedIn('/')(UserAuthenticationPage);

что приводит к:

 env in login.ts getInitialProps {
  __NEXT_PROCESSED_ENV: 'true',
  NEXT_PUBLIC_MAGIC_PUBLISHABLE_KEY: 'pk_test_BD092E437FE31429',
  MAGIC_SECRET_KEY: 'sk_test_C02E14264C276A40',
  TOKEN_SECRET: 'my-secret-token-thingy'
}

на сервере и

 env in login.ts client side {}

на клиенте. Я также вижу Loaded env from /Users/dev/my-nextjs-project/.env.local распечатку при запуске next dev .

Какие общедоступные переменные среды не отображаются в браузере?

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

1. Я бы предположил, что они устанавливаются для клиента во время сборки , а не во время выполнения (это может быть проблемой, особенно в нескольких средах, по причинам, которые я раскрываю в blog.jonrshar.pe/2020/Sep/19/spa-config.html ). Как выглядит ваш процесс развертывания?

2. @jonrsharpe Спасибо, это решило проблему. Мне пришлось использовать publicRuntimeConfig .

Ответ №1:

Как указал JonRSharpe, я смог решить эту проблему, используя: publicRuntimeConfig .

 import getConfig from 'next/config';

/**
 * @param key The key of the environment variable you want to get.
 * @throws Throws if the environment variable is absent.
 * @returns The value of the environment variable.
 */
function getEnvironmentVariable(key: string, checkRuntime = false) {
  const variable = process.env[key];

  if (variable) {
    return variable;
  }

  if (checkRuntime) {
    const { publicRuntimeConfig } = getConfig();
    const runtimeVariable = publicRuntimeConfig[key];

    if (runtimeVariable) {
      return runtimeVariable;
    }
  }

  throw new Error(`Missing environment variable for key: ${key}.`);
}

export default getEnvironmentVariable;