web-dev-qa-db-ja.com

create-react-appでAPIキーを非表示にするにはどうすればよいですか？

Create-react-appで天気アプリを作成しました。 GitHubにコミットできるようにAPIキーを非表示にするにはどうすればよいですか？

現在、キーはApp.jsにあります。const API_KEY = "123456";

reactjsapigithubcreate-react-appapi-key
21
J. Kim

免責事項

チュートリアルアプリを作成している場合を除き、クライアント側にapiキーなどの秘密を入れないでください（つまり、Reactアプリ）。

Reactドキュメントから、

WARNING: Do not store any secrets (such as private API keys) in your React app!

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

元の回答

Arup Rakshitのコメントを詳しく説明するには、

まず、srcフォルダーの外部に.envファイルを作成する必要があります。

それから加えて

REACT_APP_WEATHER_API_KEY=123456

コミットする前に、この.envファイルを除外して、.gitignoreファイルを見つけて.envを追加する必要があります。

これで自由に行くことができます。

.gitignoreファイルに.envを追加することを忘れないでください。

追加：

  1. コードでenv変数を使用する方法：
const API_KEY = process.env.REACT_APP_WEATHER_API_KEY;
  1. env変数は未定義です。どうすれば修正できますか？

Env変数を読み取るには、サーバーを再起動する必要があります。

30
이준형

結局のところ、create-react-appにはそれを支援する組み込み機能がいくつかあります。 George Karametas この洞察に感謝します。その機能にアクセスするには、次のことが必要です。

1.プロジェクトのディレクトリのルートに.envというファイルを作成します。

- your_project_folder
  - node_modules
  - public
  - src
  - .env         <-- create it here
  - .gitignore
  - package-lock.json
  - package.json

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

create-react-appツールは、REACT_APP_を使用してこれらの変数を識別します。 APIキー名で開始しない場合、create-react-appは表示されません。

// .env

REACT_APP_API_KEY=your_api_key  <-- yes
API_KEY=your_api_key            <-- no

// Example (from 이준형's response):
REACT_APP_WEATHER_API_KEY=123456

3. .envファイルを.gitignoreファイルに追加します。

以下の行を追加したら、.gitignoreファイルを保存し、git statusを実行して、.envファイルがgitに新しいファイルとして表示されないようにします。

// .gitignore

# api keys
.env       <-- add this line

# dependencies
/node_modules
...

4. process.envオブジェクトを介してAPIキーにアクセスします。

APIキーにアクセスできることを確認するには、App.jsファイルに移動し、requireステートメントの下の上部にconsole.logを追加します。ファイルを保存してページを再ロードした後、コンソールログにAPIキーが表示されない場合は、Reactサーバーを再起動してください。コードをコミットする前に、コンソールのログ行を必ず削除してください。

// src/App.js

import React, { Component } from 'react';
import './App.css';

console.log(process.env.REACT_APP_WEATHER_API_KEY)

class App extends Component {
...
47
richardsonae

反応から ドキュメント ：

警告：Reactアプリにはシークレット（プライベートAPIキーなど）を保存しないでください！

環境変数はビルドに組み込まれています。つまり、誰でもアプリのファイルを調べることでそれらを表示できます。

18
Tom Foxtrot

ここに私のために働いたものがあります：

ルートフォルダーに.envを作成しました。そのフォルダー内にキーを追加しました：

 REACT_APP_API_KEY_YT = "key"
//I added YT for youtube which is where my api key is from

それから.gitignore ||に行きましたルートディレクトリに.gitignoreがない場合は作成します。 .gitignore内に.envを追加しました

 #api key
 .env

次に、アプリのjsファイルのルートに戻りました。他の人のためのindex.jsだった私にとっては、おそらくApp.jsです。私はconst API_KEYを作成しました

 const API_KEY =`${process.env.REACT_APP_API_KEY_YT}`

コンソールでログを記録することで、機能しているかどうかを確認しました。

 console.log("API", API_KEY)

undefinedを取得していました。サーバーを停止し（Control + C）、サーバーを再起動しました。その後、私は鍵を見ることができました。

7
Roger Perez

残念ながら、gitignoreと.envファイルを使用している場合でも、Reactクライアントにキーを保持することは安全ではありません。 @ClaudiuCreangaが指摘したように、React環境変数はビルドに埋め込まれ、一般にアクセス可能です。

Node/ExpressなどのAPIキーまたはシークレットのみをバックエンドに保存する必要があります。クライアントにリクエストをバックエンドAPIに送信させると、APIキーを使用して実際のAPI呼び出しを行い、データをクライアントに送り返すことができます。

1
Antonia Blair

それが遅くないことを願っていますので、ここで私がそれをやった方法です。ルートフォルダーで、reactを使用している場合は、REACT_APP_を環境変数の先頭に追加するため、次のようになります。 REACT_APP_API_KEY=<keye here>しません。 React環境は.envを確認し、REACT_APP_を付加するかどうかを確認してから使用します。

import React from 'React';
console.log(`${process.env.REACT_APP_API_KEY}`);

それはあなたが変数であることを取得します。

ノードを使用している場合、パッケージが必要です https://www.npmjs.com/package/dotenv

それでおしまい。楽しい ：）

0
aRtoo

キーを含むconfig_keys.jsファイルを作成します。デフォルトとしてエクスポート

const API_K = "123456788345345235"
export default API_K

次に、それらをapp.jsまたはターゲット.jsファイルにインポートします

IMPORT API_K from './config_keys/js'
const API_KEY = API_K

config_keys.jsを.gitignoreに追加します

0
Vishnu Anilkumar

すべての資格情報を使用して個別のファイルを作成し、そこでキーを宣言できます。そして、このファイルを.gitignoreに追加します

//credentials.js
export const API_KEY = '12345'
0
tetta

上記のすべてのメソッドを実行した後、他の誰かが未定義になっている場合は、ほんの少しの追加です。 .envは、クライアント（create-react-app）フォルダーの下ではなく、ルートサーバーの下に配置しました。エラーが発生しました。もちろん、機密データをそこに置くと、特定のセキュリティへの影響があります。

0
CyberMessiah