Webpackコンフィグ

.env

ほとんどのWebアプリケーションのように、機密性の高い環境変数は.envファイルに保存されます。Re:Earthが気にする必要があるのは、以下のことだけです： REEARTH_WEB_AUTH0_DOMAIN, REEARTH_WEB_AUTH0_AUDIENCE, REEARTH_WEB_AUTH0_CLIENT_ID.

webpackは.envファイルをチェックし、利用可能であればアプリケーション起動時にすべての環境変数をロードします。

let envfile = "";
  try {
    envfile = fs.readFileSync(`.env`);
  } catch {
    // ignore
  }

そして、.envファイルの変数とprocess.envのREEARTH_WEB_で始まるキーを持つ変数が解析され、configというレコードに設定されます。

const config = readEnv("REEARTH_WEB", {
    source: {
      ...dotenv.parse(envfile),
      ...process.env,
    },
  });

Re:Earth config.json

上記の設定を行った上で、バックエンドの/reearth_config.jsonルートにAPIリクエストを行い、そのファイルが返ってきたので、webpack.config.jsでその設定を挿入します。

本番環境下では、この手順は省略されます。

// ...inside the return of webpack config file
before(app) {
  app.get("/reearth_config.json", (_req, res) => {
    res.json({
      api: "<http://localhost:8080/api>",
      published: "<http://localhost:8080/p/{}>",
      ...Object.fromEntries(Object.entries(config).filter(([, v]) => Boolean(v))),
    });
  });
}

コンフィグを読み込む

これでwebpackが実行され、バックエンドから取得したreearth_config.jsonファイルに環境変数が挿入されたので、アプリはsrcディレクトリにあるsrc/config.tsファイルから設定データを読み込むことができるようになりました。

export default async function loadConfig() {
  if (window.REEARTH_CONFIG) return;
  window.REEARTH_CONFIG = defaultConfig;
  window.REEARTH_CONFIG = {
    ...defaultConfig,
    ...(await (await fetch("/reearth_config.json")).json()),
  };
}