大学生/大学院生向け

在宅ワークのお仕事

プルグラミング学習の無料相談も可能良く

プログラミング学習の定額のサブスク

サイト/ブログ作成をコスパ良く

プロフィール

学ぶパンダ

初心者向けにプログラミング学習や

就職・転職に向けた情報を発信

Google Workspceで便利に作業

大学生/大学院生向け

在宅ワークのお仕事

プルグラミング学習の無料相談も可能良く

プログラミング学習の定額のサブスク

サイト/ブログ作成をコスパ良く

React で環境変数などを「.env」ファイルに変更した件

Reactで実装していたときに、

各種APIのURLなど、

小さな規模であれば、

そのまま書いておくこともあるが、

本来、切り分けて管理した方が良いので、

ローカル環境だけでなく、

別の環境にファイルをアップロードする際に、

分けることにした時のメモ。

参考にしたサイト

こちらのサイトを参考にしました。

リンクをメモ。

Gitで管理するので、.gitignoreに.envを設定

実際に設定ファイルにしていく。

このとき、

Git管理しているのであれば、

.gitignore

のファイルの中に、

.env

を追加しておく。

環境変数を「.env」ファイルに設定

環境変数に関して設定するときに、

.env

ファイルを作成する。

そして、その中に、

  • キー

の値を設定していく。

Reactのアプリケーションで作っているので、

プレフィックス(キーの先頭につける)として、

REACT_APP_

が必要なので、

「.env」での設定は、

REACT_APP_API_URL=https://api.url

のように設定する。

Reactアプリ内での「.env」の値の取得

環境変数を、

「.env」のファイルに準備したら、

Reactアプリ内での取得方法で、

もともとの文字列を変更する。

取得方法は、

process.env.キー

という形で、

「.env」の値を取得できるので、

上記の「.env」の例の

REACT_APP_API_URL=https://api.url

であれば、

process.env.REACT_APP_API_URL

のように取得する。

設定変更の際はReactアプリを再コンパイル

環境変数として設定した「.env」の値は、

実際に反映させるためには、

Reactのアプリケーション自体を、

再コンパイルする必要があるので、

npm run start

などで、

再コンパイルするとうまく値が反映されるかと思います。

スキルを使って、就職/転職/副業する時のサイト

プログラミングのスキルなどを、自分なりに高めた上で、

自分のスキルをアピールして就職や転職を行い、年収をあげるか、

副業という形で、年収にプラスアルファの稼ぎを増やすことはできます。

まずはできる範囲で取り組むことで、

少しずつ、経験値も増え、自分のスキルが収入につながるのでおすすめです。

ピックアップ

おすすめ記事