【React(初心者向け)】外部ファイルへ値を保存・取り出す！環境変数 process.envの導入、使い方

（最終更新月：2021年8月）

「データベースではなく、外部のファイルに値を保存して.jsファイルで取り出したい！」

「シークレットキーなど直接コードに記述したくない！」

という方へ向けて、外部ファイルへ保存した文字列を.jsファイルから取り出す方法をお伝えします

✔Webアプリの公開にはVPSがおすすめ

DjangoなどのWebアプリは、レンタルサーバーでの公開ができません。

自由度の高いVPSを使うのです。

VPS11社を比較し、おすすめをご紹介しています。

Webアプリの公開には、Ubuntuが搭載できるVPSを選びましょう。

Ubuntu環境が用意できたら、こちらのチュートリアルで公開方法を無料公開中。

筆者プロフィール

【現職】プロジェクトマネージャー/SE（元外資系金融機関営業）

【副業】ブログ（月間15万PV）/YouTube/Web・アプリ制作

コミュニケーション × ビジネススキル × 文章力 × プログラミングスキルを活かし、30後半からのIT系職へシフト。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

created by Rinker

¥2,640(2023/12/01 14:00:14時点 Amazon調べ-詳細)

「.env」ファイルを作成します

プロジェクトフォルダ直下（Reactの場合はpackage.jsonと同ファイル内）に、

.env

というファイルを作成します

最初に「 . (ドット)」をつけるのを忘れずに！」

.env内で、

変数名=保存したい文字列

と記述します

文字列の前後に「”」「’」は不要です

例えば、BASE_URL変数に「http://localhost:8000」を保存したい場合、

BASE_URL=http://localhost:8000

などとします

process.env(“変数名”)

で値を取り出しましょう！

const BASE_URL = process.env.BASE_URL

.envファイルに記述するのは外に公開したくない情報ですので、

.gitignoreに.envを追記するのを忘れずに！