NetlifyでReact環境変数にアクセスする

これで、最新のReactアプリケーションの開発が完了し、世界中の人々と共有する準備が整いました。邪魔になるのは、アプリケーションをデプロイすることだけです。これを実現する方法は数十ありますが、この記事では、Netlifyでアプリケーションをホストする方法と、フロントエンドの環境変数を適切に構成する方法について説明します。

環境変数とは何ですか？

環境変数は、プログラムの外部で定義され、名前と値のペアで構成される変数です。次に、その値にアクセスするために、コード内の任意の場所で変数の名前を参照できます。

前提条件

• react-dotenvnpmパッケージをインストールします
• アプリケーションはGithubリポジトリに適切に同期されています
• Netlifyアカウントをお持ちです

先に進み、Netlifyアカウントにログインしてから、[チームの概要]タブに移動します。ボタンをクリックして、Gitから新しいサイトを追加します。利用可能なプロバイダーからGitHubを選択すると、GitHubが資格情報にアクセスすることを許可するように求められます。ログインすると、リポジトリを検索し、デプロイするブランチを選択して、ビルド設定を構成できます。今のところ、ビルド設定をそのままにして[サイトのデプロイ]をクリックできますreact-dotenvが、アプリケーションで適切に構成したら、少し後でこれに戻ります。

Reactアプリケーションで「react-dotenv」ライブラリを構成します

でreact-dotenvインストールされ、のに手放すpackage.jsonファイルと、次の編集を行います。"scripts"キーが含まれるべきであるreact-dotenvの一環として、"start"及び"build"以下に示すように、コマンド：

"scripts": {
"start": "react-dotenv && react-scripts start",
"build": "react-dotenv && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}

"react-dotenv": {
"whitelist": [
"ENV_VAR_1",
"ENV_VAR_2"
]
}

.envファイルを動的に作成する

.envファイルをGitHubリポジトリにプッシュすることはないため、Netlifyがビルドをデプロイするときにこのファイルを生成する小さなスクリプトを作成できます。このスクリプトではwriteFileSync()、fsライブラリのJavaScript関数を使用します。これは次のようになります。

const fs = require('fs')
const path = `./.env`
const vars = `
 ENV_VAR_1=${process.env.ENV_VAR_1_NETLIFY}\n
 ENV_VAR_2=${process.env.ENV_VAR_2_NETLIFY}
`
fs.writeFileSync(path, vars)

Netlifyサイト設定を構成する

次に、Netlifyアカウントにログインして、新しいサイトの[サイトの設定]タブに移動します。下にビルド＆展開>環境、我々はこのような何かを見てすべき、私たちのプログラムで使用したいという環境変数を指定することができます。

これは、環境変数の実際の値を指定する必要がある唯一の場所です。次に、.envカスタムスクリプトを実行してファイルを生成するようにNetlifyに指示する必要があります。

概要

すごい！すべてが構成されたら、[デプロイ]タブに移動して、アプリケーションの新しいデプロイをトリガーしましょう。buildコマンドは.envファイルを生成する必要があります。このファイルは、Netlifyで指定した値を使用して環境変数を定義.react-dotenvし、コンポーネントにライブラリをインポートすることでそれらの値にアクセスできるようにします。ハッピーコーディング！