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

React

(最終更新月:2021年8月)

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

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

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

筆者プロフィール

筆者プロフィールアイコン

【現職】プロマネ/システムプランニング

【副業】ブログ(月間7万PV)/YouTube/Web・アプリ制作

【元】外資系金融機関の営業

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

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

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

ChatGPTでLINEボット

【今なら無料】ChatGPTでLINEボットを作りました!

友だち追加

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

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

.env

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

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

.env内での記述

.env内で、

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

と記述します

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

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

BASE_URL=http://localhost:8000

などとします

値を取り出す

process.env(“変数名”)

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

const BASE_URL = process.env.BASE_URL

忘れずに!

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

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

✔当ブログは以下のような方に向けて書かれています

「Djangoでのアプリ開発を学びたい!」

「Djangoで開発したアプリをWebで公開するにはどうするの?」

✔当ブログ掲載の記事

  • Djangoで作る日報アプリ開発
  • WebアプリをWeb上に公開する方法
  • Webアプリ開発に必要なそのほかの情報
【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

ITCブログにご協力いただける方は、以下もご検討いただけると嬉しいです。

ITCへ投げ銭をする

タイトルとURLをコピーしました