web-dev-qa-db-ja.com

NetlifyのCreate-React-Appでビルド環境変数を使用できますか？

Create-React-Appを使用してNetlifyでビルド環境変数を使用するにはどうすればよいですか？

environment-variablescreate-react-appnetlify
7
Laura J

あなた[〜＃〜] [〜＃〜]は、Netlifyのcreate-react-appで環境変数を使用できますが、作成Reactアプリは引き続き適用されます。

  • デフォルトでは、NODE_ENVが定義されています
  • REACT_APP_で始まる他の環境変数はすべて使用可能になります
  • NODE_ENV以外の変数はすべて無視されます
  • 環境変数を変更すると、新しいビルド/デプロイをトリガーする必要があります

重要な注意：Netlifyでホストされているブラウザからcreate-react-appから動的に環境変数にアクセスすることはできません！静的サイトで使用するには、ビルド時にアクセスする必要があります。

Netlifyでホストされている example create-react-app repo から：

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Environment Variables in a Create React App on Netlify</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and commit to your repo.
        </p>
        <p>NODE_ENV value is "{process.env.NODE_ENV}"</p>
        <p>CUSTOM_ENV_VAR value is "{process.env.CUSTOM_ENV_VAR}"</p>
        <p>REACT_APP_CUSTOM_ENV_VAR value is "{process.env.REACT_APP_CUSTOM_ENV_VAR}"</p>
        <p>TOML_ENV_VAR value is "{process.env.TOML_ENV_VAR}"</p>
        <p>REACT_APP_TOML_ENV_VAR value is "{process.env.REACT_APP_TOML_ENV_VAR}"</p>
      </div>
    );
  }
}

export default App;

https://netlify-cra-env-vars.netlify.com/ で以下を生成します： enter image description here

Netlify.comのサイト設定での環境変数の設定

app.netlify.comでは、CUSTOM_ENV_VARとREACT_APP_CUSTOM_ENV_VARは次のように設定されています。 enter image description here

netlify.tomlでの環境変数の設定

netlify.toml 環境変数は次のように設定されました。

[build]
  command = "yarn build"
  publish = "build"

[context.production.environment]
  TOML_ENV_VAR = "From netlify.toml"
  REACT_APP_TOML_ENV_VAR = "From netlify.toml (REACT_APP_)"

[追加].envで環境変数を設定する

プロジェクトのルートにある.envファイルに環境変数を設定し、リポジトリにコミットできます。以下は[email protected]以上で使用でき、package.jsonファイルのversion値を取得します。

.env

REACT_APP_VERSION=$npm_package_version

注：バージョン（および他の多くの npm公開環境変数 ）アクセスできます。
秘密鍵をリポジトリに配置しないでください。

16
talves

これを実現するには多くの方法がありますが、Netlify環境変数を自分のReactアプリに含めるには、.envプロジェクトのルートにあるファイルで、次の内容が含まれています。

# React Environment Variables
# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env

# Netlify Environment Variables
# https://www.netlify.com/docs/continuous-deployment/#environment-variables
REACT_APP_VERSION=$npm_package_version
REACT_APP_REPOSITORY_URL=$REPOSITORY_URL
REACT_APP_BRANCH=$BRANCH
REACT_APP_PULL_REQUEST=$PULL_REQUEST
REACT_APP_HEAD=$HEAD
REACT_APP_COMMIT_REF=$COMMIT_REF
REACT_APP_CONTEXT=$CONTEXT
REACT_APP_REVIEW_ID=$REVIEW_ID
REACT_APP_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
REACT_APP_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
REACT_APP_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
REACT_APP_URL=$URL
REACT_APP_DEPLOY_URL=$DEPLOY_URL
REACT_APP_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL

これを可視コンポーネントに配置して、これらすべての環境変数を表示します。

<pre>{JSON.stringify(process.env, undefined, 2)}</pre>

重要！これらの環境変数が変更されるたびにこれらの環境変数を設定するには、アプリを再起動（または再構築）する必要があります。

2
Beau Smith