环境变量

构建时变量

以下环境变量在构建时嵌入。

process.env.RAZZLE_PUBLIC_DIR：服务器文件系统中 public 目录的绝对路径。
process.env.RAZZLE_ASSETS_MANIFEST：包含已编译的资产输出的文件的路径
process.env.REACT_BUNDLE_PATH：在开发期间 React 将被捆绑到的相对路径。除非您修改 webpack 配置的文件路径，否则可以安全地忽略它。react-error-overlay 和 webpack 使用此路径来增强美观运行时错误 iframe。例如，如果您利用了 common chunk 并利用额外的入口用 React、React-dom、React-router 等信息创建一个名为 vendor.js 的 vendor bundle，且在开发环境中已把 webpack 的输出修改为 [name].js，那么您需要将此环境变量设置为 /static/js/vendor.js。如果不进行此更改，并不会发生什么不好的事情，只是在运行时出现错误时，将不显示友好的错误覆盖。您只会看到它们在控制台中的显示。注意：这不会影响生产环境捆绑。
process.env.VERBOSE：默认为 false，在开发环境中编辑时，将其设置为 true 不会清除控制台（对于调试很有用）。
process.env.PORT：BUILD_TARGET=server 构建在针对所有 NODE_ENV 的此端口中侦听。默认为 3000
process.env.HOST：服务器将绑定的 IP 地址。默认为 0.0.0.0，表示 INADDR_ANY
process.env.NODE_ENV：'development' 或 'production'
process.env.BUILD_TYPE: 等构/通用应用程序中的 'iso' 或单页面应用程序中的 'spa'。默认值为 'iso'。此值由 CLI 参数设置。
process.env.BUILD_TARGET：'client' 或 'server' 之一
process.env.PUBLIC_PATH：仅在 razzle build 中使用。可以更改客户端资产（包、css 和图像）的 webpack.config.output.publicPath。如果你计划从 CDN 提供资产，这将非常有用。务必包含尾部斜杠（例如 PUBLIC_PATH=https://cdn.example.com/）。如果你正在使用 React 并更改公共路径，请务必在 src/server.js 中的 <script> 标记上也包含 crossorigin 属性。
process.env.CLIENT_PUBLIC_PATH：NODE_ENV=development 版本的 BUILD_TARGET=client 具有与 BUILD_TARGET=server 不同的 PUBLIC_PATH。默认值为 http://${process.env.HOST}:${process.env.PORT + 1}/

你可以创建自己的自定义环境变量，它们将在构建过程中内联。它们必须以 RAZZLE_ 开头。除了上面列出的变量之外，任何其他变量都将被忽略，以避免意外公开机器上的私钥，该私钥可能具有相同的名称。更改任何环境变量都需要你在运行时重新启动开发服务器（如果它正在运行）。

这些环境变量将在 process.env 中为你定义。例如，具有名为 RAZZLE_SECRET_CODE 的环境变量将在 JS 中显示为 process.env.RAZZLE_SECRET_CODE。

使用 dotenv 包或在 shell 中定义变量（见下文），你可以获取运行时环境变量。这对于动态设置 process.env.PORT 的服务（例如 Heroku）非常有用。在等构代码中引用运行时变量时要小心，因为它们在浏览器中将为 undefined，但在 Node 中运行时将被定义。这会导致奇怪的行为。如果你需要将运行时变量提供给浏览器，则取决于你将它们传递过去。你可以将它们字符串化并放置在 window 中...

// config.js
export const runtimeConfig =
  typeof window !== 'undefined'
    ? {
        // client
        myThing: window.env.myThing,
        anotherThing: window.env.anotherThing,
      }
    : {
        // server
        myThing: process.env.MY_THING,
        anotherThing: process.env.ANOTHER_THING,
      };

现在，当我们呈现 HTML 时，我们将 window.env 设置为 runtimeConfig。

import App from './App';
import React from 'react';
import express from 'express';
import { renderToString } from 'react-dom/server';
import serialize from 'serialize-javascript'; // Safer stringify, prevents XSS attacks
import { runtimeConfig } from './config';
const chunks = require(process.env.RAZZLE_CHUNKS_MANIFEST);
const server = express();
server
  .disable('x-powered-by')
  .use(express.static(process.env.RAZZLE_PUBLIC_DIR))
  .get('/*', (req, res) => {
    const markup = renderToString(<App />);
    res.send(
      // prettier-ignore
      `<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charSet='utf-8' />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ${chunks.client.css.map(path => `<link rel="stylesheet" href="${path}">`)}
    </head>
    <body>
        <div id="root">${markup}</div>
        <script>window.env = ${serialize(runtimeConfig)};</script>
        ${chunks.client.js.map(path => `<script src="${path}" defer crossorigin></script>`)}        
    </body>
</html>`
    );
  });
export default server;

在你的 shell 中添加临时环境变量

定义环境变量在不同的操作系统之间可能有所不同。重要的是要知道，这种方式对 shell 会话的生存期是临时的。

Windows (cmd.exe)

set RAZZLE_SECRET_CODE=abcdef&&npm start

（注意：缺少空格是故意的。）

Linux, macOS (Bash)

RAZZLE_SECRET_CODE=abcdef npm start

向 .env 中添加环境变量

要定义永久的环境变量，请在项目的根目录下创建一个名为 .env 的文件

RAZZLE_SECRET_CODE=abcdef

在 .env 中扩展环境变量

扩展您计算机上的变量，以便在您的 .env 文件中使用。

例如，获取环境变量 npm_package_version

RAZZLE_VERSION=$npm_package_version
# also works:
# RAZZLE_VERSION=${npm_package_version}

或扩展当前 .env 文件中的局部变量

DOMAIN=www.example.com
RAZZLE_FOO=$DOMAIN/foo
RAZZLE_BAR=$DOMAIN/bar

还可以使用哪些其他 .env 文件？

.env：默认。
.env.local：本地覆盖。此文件加载到除测试之外的所有环境。
.env.development、.env.test、.env.production：特定于环境的设置。
.env.development.local、.env.test.local、.env.production.local：特定于环境的设置的本地覆盖。

左侧的文件比右侧的文件优先级高

npm start：.env.development.local、.env.development、.env.local、.env
npm run build：.env.production.local、.env.production、.env.local、.env
npm test：.env.test.local、.env.test、.env（注意缺少 .env.local）

如果机器未显式设置这些变量，则它们将作为默认设置。
请参考 dotenv 文档以了解更多详情。

注意：如果您正在定义开发环境变量，则您的 CI 和/或托管平台很可能也需要将这些变量定义为 well。查阅其文档以了解如何操作。例如，请参阅 Travis CI 或 Heroku 的文档。