🌏

【GitHub Actions】GitHub Pagesで環境変数を使う

2023/01/15に公開約4,200字

はじめに

GitHub Pages を使っていますか?
静的サイトを作ってとりあえず公開したい時に、気軽にデプロイできて便利ですよね。
GitHub Pages にデプロイする方法にはデプロイ用のブランチを選択する方法か、GitHub Actions を使う方法の二種類があります。
これまでブランチを選択する方法しか使ったことがなかったのですが、 GitHub Actions を使ってデプロイする方法を試してみたので備忘のためにこの記事を書きます。
また GitHub Pages で環境変数を利用する方法で少し詰まったのでその内容も残しておきたいと思います。

GitHub Actions で GitHub Pages にデプロイする

※Vue3 のプロジェクトをデプロイする方法を例として記載します。

1. vite.config.js を編集する

vite.config.js
  export default defineConfig({
+   base: "<githubのリポジトリ名>",
    plugins: [vue()],
    resolve: {
      alias: {
        "@": fileURLToPath(new URL("./src", import.meta.url)),
      },
    },
  });

2. GitHub Pages のデプロイ方法を選択する

  • デプロイしたいリポジトリの Setting から Pages の設定画面を開く。
  • Source から GitHub Actions を選択する。

3. GitHub Actions のワークフローを編集する。

  • Static HTML のテンプレートを選択する。
    (上記の設定ページか、Actions のタブから選択する。)

  • ビルドコマンドとビルドされたファイルのパスを追記する。

  # Simple workflow for deploying static content to GitHub Pages
  name: Deploy static content to Pages

  on:
    # Runs on pushes targeting the default branch
    push:
      branches: ["main"]

    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:

  # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
  permissions:
    contents: read
    pages: write
    id-token: write

  # Allow one concurrent deployment
  concurrency:
    group: "pages"
    cancel-in-progress: true

  jobs:
    # Single deploy job since we're just deploying
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v3
        - name: Setup Pages
          uses: actions/configure-pages@v2
+       - run: npm ci
+       - run: npm run build
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            # Upload entire repository
-           path: "."
+           path: "dist"
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v1

4. コミットする

  • 編集が終わったら、右上のボタンからコミットする。

ここまででひとまず GitHub Pages へのデプロイが完了したかと思います。
次に環境変数を設定する方法を記載します。

環境変数を設定する

1. 設定画面から Secret を登録する

  • Environments から github-pages を選択する。

  • Add secret から環境変数を登録する。

2. ワークフローに環境変数を追記する

  # Simple workflow for deploying static content to GitHub Pages
  name: Deploy static content to Pages

  on:
    # Runs on pushes targeting the default branch
    push:
      branches: ["main"]

    # Allows you to run this workflow manually from the Actions tab
    workflow_dispatch:

  # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
  permissions:
    contents: read
    pages: write
    id-token: write

  # Allow one concurrent deployment
  concurrency:
    group: "pages"
    cancel-in-progress: true

  jobs:
    # Single deploy job since we're just deploying
    deploy:
      environment:
        name: github-pages
        url: ${{ steps.deployment.outputs.page_url }}
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v3
        - name: Setup Pages
          uses: actions/configure-pages@v2
        - run: npm ci
        - run: npm run build
+         env: <環境変数名>: ${{ secrets.<登録した環境変数名> }}
        - name: Upload artifact
          uses: actions/upload-pages-artifact@v1
          with:
            # Upload entire repository
            path: "dist"
        - name: Deploy to GitHub Pages
          id: deployment
          uses: actions/deploy-pages@v1

※vite アプリの場合、環境変数の接頭語に"VITE_"が必要。

3. デプロイする

  • main ブランチにプッシュして再度デプロイすることで、環境変数が反映される。

まとめ

GitHub Pages に GitHub Actions を使ってデプロイする方法と、GitHub Pages で環境変数を使う方法をまとめました。
テンプレートを使うことで意外にも簡単にデプロイすることができました。
GitHub Actions にはこれ以外にも様々なテンプテートが用意されているので、色々と試していきたいと思います。

Discussion

ログインするとコメントできます