React APIキーを安全に隠す方法

React.jsでAPIキーを隠す方法 (日本語)

React.jsアプリケーションでAPIキーを隠すことは、セキュリティの観点から非常に重要です。公開リポジトリにAPIキーをコミットしてしまうと、悪意のあるユーザーがそれを利用して不正なアクセスを行う可能性があります。

方法

1. 環境変数を設定する
   
   • .envファイルを作成する: プロジェクトのルートディレクトリに.envというファイルを作成します。
   • APIキーを定義する: ファイルに以下のようにAPIキーを定義します。

     REACT_APP_API_KEY=your_api_key_here
     

     ここで、your_api_key_hereを実際のAPIキーに置き換えてください。
2. 環境変数にアクセスする
   
3. .gitignoreファイルを作成する
   
   • .envファイルを無視する: ファイルに以下のように.envファイルを無視するように設定します。

     .env
     

   • Gitにコミットする: .gitignoreファイルをGitにコミットすることで、.envファイルが公開リポジトリに含まれないようにします。

注意

• デプロイメント
  デプロイメント時にAPIキーを環境変数として設定する方法が異なります。デプロイ先のプラットフォームのドキュメントを参照してください。
• ローカル環境での開発
  ローカル環境での開発中にAPIキーを直接.envファイルに保存する場合は、注意が必要です。公開リポジトリに.envファイルをコミットしないようにしてください。

GitHub Actionsでの例

GitHub Actionsを使用して、デプロイ時に環境変数を設定することができます。以下は、例です。

name: Deploy to Heroku

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-   version: 16
      - run: npm    install
      - run: npm run build

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm    install
      - name: Deploy to Heroku
        uses: actions/heroku@v3
        with:
          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
          heroku_app_name: your-app-name
          heroku_email: [email protected]

この例では、GitHub Secretsを使用してAPIキーを安全に保存しています。

name: Deploy to Heroku

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-   version: 16
      - run: npm    install
      - run: npm run build

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm    install
      - name: Deploy to Heroku
        uses: actions/heroku@v3
        with:
          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
          heroku_app_name: your-app-name
          heroku_email: [email protected]

name: Deploy to Heroku

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-   version: 16
      - run: npm    install
      - run: npm run build

  deploy:
    runs-on: ubuntu-latest
    needs: build
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm    install
      - name: Deploy to Heroku
        uses: actions/heroku@v3
        with:
          heroku_api_key: ${{ secrets.HEROKU_API_KEY }}
          heroku_app_name: your-app-name
          heroku_email: [email protected]