[解決済み] Reactプロジェクトに.envファイルを追加する

質問

githubにコミットする際にAPI Keyを隠したいのですが、フォーラムでガイダンスに目を通しましたが、特に以下の投稿が参考になりました。

create-react-appでAPIキーを隠すにはどうしたらいいですか？

変更を加え、yarnを再起動しました。何が間違っているのかよくわかりません。 .env ファイルをプロジェクトのルートに追加しました (ファイル名は process.env を作成し、そのファイルの中に REACT_APP_API_KEY = 'my-secret-api-key' .

キーを追加する方法が原因かもしれないと考えています。 fetch テンプレートリテラルを使用しないなど、複数の形式を試しましたが、私のプロジェクトはまだコンパイルされません。

よろしくお願いします。

performSearch = (query = 'germany') => {
    fetch(`https://api.unsplash.com/search/photos?query=${query}&client_id=${REACT_APP_API_KEY}`)
    .then(response => response.json())
    .then(responseData => {
        this.setState({
            results: responseData.results,
            loading: false
        });
     })
     .catch(error => {
            console.log('Error fetching and parsing data', error);
     });
}

解決方法は？

4ステップ

1. npm install dotenv --save

2. 次に、アプリに次の行を追加します。

   require('dotenv').config()

3. 次に .env ファイルをアプリケーションのルートディレクトリに作成し、そこに変数を追加してください。

// contents of .env 

REACT_APP_API_KEY = 'my-secret-api-key'

1. 最後に .env に .gitignore ファイルを作成すると、Git がそれを無視し、GitHub にも残らないようにします。

を使用している場合 create-react-app であれば、ステップ 3 と 4 だけで済みますが、変数が REACT_APP_ を実行します。

参考にしてください。 https://create-react-app.dev/docs/adding-custom-environment-variables/

ノート - .envファイルに変数を追加した後、アプリケーションを再起動する必要があります。

参考資料 https://medium.com/@thejasonfile/using-dotenv-package-to-create-environment-variables-33da4ac4ea8f