🐶

GitHubのActions用にAPIキーを登録する

2023/08/30に公開

APIキーを使った処理を行う際、プログラムに直接書いていませんよね？
以前、GitHubを介してFirebaseのHostingにReactAppを公開する手順を書きました。
GitHubでは何も設定をしなければPublicで公開されてしまっているので、プログラムに直書きしてしまうとキーが丸見えになってしまいます。
非常にセキュリティ上よろしくありませんね。

それではどうやったら隠れるのか・・・。
今回は環境変数としてAPIキーを読み込むテストを行います。

環境は以前に構築したReact+GitHub+Firebaseの状態からスタートします。

環境変数を使った基本方法

.env.local を作る

.env.localファイルをルートディレクトリ内に作成します。
ルートディレクトリ（ここではREACT-TEST）にカーソルを合わせると「新しいファイル...」アイコンが出てくるので、そこから作ると確実です。
env = environment = 環境。.localを追加して、ローカル用環境変数指定ファイルだと思っていただければ大丈夫です。

作成したらファイルを開いて中身の編集をします。

.env

REACT_APP_API_KEY='HELLO API_KEY!!'

これで、REACT_APP_API_KEYという環境変数に対してAPI KEY TESTというstring型の値を設定しました。
REACTで読み込む環境変数を作る場合、REACT_APPから始まらなければならないことに注意してください。

.gitignoreの編集

ただし、通常ですと .env.local ファイルもGitHubに共有されてしまい、APIキーが丸見えになってしまいます。
共有されないようにGit管理から外れるように設定します。
.gitignoreファイルを見てみましょう。

.gitignore

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

ファイルを見てみると、# miscの項目に.env.localが入っています。
ignore = 無視する。つまり、gitignoreはgitで管理しないファイルのリストということです。
ここにファイル名を追加しておけばGitHubにファイルがアップロードされず、秘密のAPIキーが保存されることになります。

読み込みの確認をする

最後に、App.tsxを編集して環境変数を読み取れるか確認してみましょう。

App.tsx

import './App.css';

function App() {
  // 環境変数からAPI_KEYを読み取る
  const api_key = process.env.REACT_APP_API_KEY;

  // 表示テスト
  return (
    <p>{api_key}</p>
  );
}

export default App;

これで表示確認の準備ができました。

process.env.REACT_APP_API_KEY

ここで環境変数名REACT_APP_API_KEYを読み取っています。

この状態でReactのテストをしてみます。
もしサーバーをスタートしていた場合は一度停止してから起動しなおしてください。
環境変数の設定はnpm startを実行した時点で読み直ししています。

npm start

ブラウザが表示され、HELLO API_KEY!!が表示されればOKです。

Githubにpushする

まずはGitHubにpushし、Firebaseにデプロイします。
pushしたらば一度GitHubを開き、.env.localがリポジトリに存在していないことを確認してください。
存在する場合、ファイル名、.gitignore内の記述の確認し、間違っていれば直してpushしなおしてください。
GitHubでのActionがグリーンランプになったのを確認してからFirebaseのhostingからページを開きます。

白い

ページに何も表示されません。なぜでしょうか。
理由は簡単。先ほど確認した通り.env.localがGitHub内に存在しないため、buildするときに環境変数が設定されないためです。
それでは、GitHub内で使う環境変数の設定をしていきましょう。

Repository Secretを登録する

GitHubのドキュメントをです。もし実際に作業していて説明と違った場合、ドキュメントを参照してください。

GitHubのリポジトリメニューからSettingsを開きます。
次に、左のメニューからSecrets and variablesからActionsを開きます。
最後にNew repository secretを開きます。

開いたら、先ほど使用した環境変数名、REACT_APP_API_KEYにHELLO API_KEY!!を登録しましょう。
AddSecretボタンを押すと先ほどの画面に戻り、Repository secret内に新しく登録した環境変数が表示されます。
一度登録をするとGitHub内で値を確認することは出来なくなります。安全ですね。

Actionを編集する

最後に、buildするときに上記で登録した環境変数を読み込むようにAction時の動作を編集します。
VSCodeに戻り、firebase-hosting-merge.ymlを開きます。.github\workflowsディレクトリ内にあるかと思います。

firebase-hosting-merge.yml

name: Deploy to Firebase Hosting on merge
'on':
  push:
    branches:
      - main
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - run: npm ci && npm run build
        env:
          REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}}
      - uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_PROJECT_ID }}'
          channelId: live
          projectId: PROJECT_ID

PROJECT_ID部分はFirebaseのプロジェクトごとのIDが入ります。
編集した場所は下記のenv:から始まる2行の部分です。

      - run: npm ci && npm run build
        env:
          REACT_APP_API_KEY: ${{secrets.REACT_APP_API_KEY}}

これで、ビルド時に環境変数を適用できるようになります。
ymlファイルを編集したので、GitHubに対してpushしてみましょう。
pushするとGitHub上でactionが動き出し、Firebaseに対してデプロイします。

作業が終了したら、FirebaseのReactAPPページを見てみましょう。

無事、HELLO APP_KEY!!が表示できました。

まとめ

この方法でAPIキーを一般に公開することなくGitHubに登録することができます。
テスト環境と本番環境で環境変数を変えることも出来るのですが、個人の趣味であればローカルの.env.localを開発環境、GitHubのsecretsを本番環境とすることもできるかなと思っています。
必要に駆られたら、より詳しい環境変数についてもメモしていきます。