11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

APIキーを非表示にする方法

Posted at

create-react-app にて、GitHubにコミットできるようAPIキーを非表示にする方法を簡単にまとめておきます。

#①プロジェクトのディレクトリのルートに .env ファイルを作成

スクリーンショット 2021-06-07 18.59.32.png

#② .envファイル内で、選択したAPIキー名にREACT_APP_を追加して割り当てる。

.env 内に、下記を記入。

React_APP_OPENWEATHERMAP_API_KEY = (ここにAPIキーを書く)

※React_APP_ こちらを書き忘れないこと。

#③ .envファイルを.gitignoreファイルに追加。
gitignoreはGitで使われる特殊なファイル名で、このファイルに書かれたファイルは上から順に処理されて、Gitのトラッキングの対象外になる。 Gitのトラッキングの対象外になるということは、Gitで管理していたディレクトリの中にあっても無視されるということ。

# api keys
.env

#④使用する
process.envオブジェクトを介してAPIキーにアクセスできる。

const APIKEY = process.env.React_APP_OPENWEATHERMAP_API_KEY;

#デプロイ時は...
ページをデプロイする前に、.envファイルを削除し、プラットフォームのキー管理システムを使用する。

#その他注意点
○チーム開発時の注意点
githubには上がらなくなるから、git pullしても、他の人の環境には入らない。
APIキーは、別で教えないといけない。

○.env を作ったあとは、再起動をすること。
( yarn start やり直すの忘れない)

11
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?