🌏
【GitHub Actions】GitHub Pagesで環境変数を使う
はじめに
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