【React(初心者向け)】外部ファイルへ値を保存・取り出す! 環境変数 process.envの導入、使い方
2021.08.18
※本サイトにはプロモーション・広告が含まれています。
(最終更新月:2021年8月)
「データベースではなく、外部のファイルに値を保存して.jsファイルで取り出したい!」
「シークレットキーなど直接コードに記述したくない!」
という方へ向けて、外部ファイルへ保存した文字列を.jsファイルから取り出す方法をお伝えします
✔Webアプリの公開にはVPSがおすすめ
DjangoなどのWebアプリは、レンタルサーバーでの公開ができません。
自由度の高いVPSを使うのです。
VPS11社を比較し、おすすめをご紹介しています。
Webアプリの公開には、Ubuntuが搭載できるVPSを選びましょう。
Ubuntu環境が用意できたら、こちらのチュートリアルで公開方法を無料公開中。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ(月間20万PV)/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
当サイトチュートリアルで作成したデモ版日報アプリ
Django × Reactで開発したツール系Webアプリ
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
「.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を追記するのを忘れずに!