Github ActionsによるGithub Pagesのデプロイを試してみた
先日、Github PagesがGithub Actionsからデプロイできるようになった。
何が嬉しいのか
今までは静的サイトジェネレーターで構築したサイトを公開するには手動でビルドして予め静的ファイルを作っておく必要があったが、Github Actionsを利用することで、ソースをプッシュしたら自動でビルドしてデプロイするようなことも可能になった。
今回やったこと
Reactで構築された静的なサイトを、mainブランチにPushしたタイミングでビルド＆デプロイするようにした。
普通にマウスでポチポチして出来上がったActionsではビルドまでやってくれる感じにはならなかったので、そこは若干手を加えた。
詳細
Actionsの指定
リポジトリの
Setting → Pages
のページを見てみると、Sourceという設定項目が増えていて、従来のDeploy from Branchの代わりにGithub Actionsが選べるようになった。なのでさっそくGithub Actionsの方を選択する。
すると自分のリポジトリの場合は2択が表示された。静的サイトジェネレーターのJekyllか、Static HTML。この2択を選ばずにマーケットプレイスから他の選択肢を探すこともできるし、全部手動で作ることもできる。
リポジトリによっては違う選択肢が出たこともあるので、使用言語によって良い感じのサジェストしているのかもしれない。
今回は余計なものが入ってなさそうなStatic HTMLを選択した。
するとこんな感じのworkflowが作られた。
name: Deploy static content to Pages
on:
# ★★★Github Actionsを起動するブランチ★★★
push:
branches: ["main"]
# Github Actionsを手動で起動できるようにする。
workflow_dispatch:
# パーミッションの設定
permissions:
contents: read
pages: write
id-token: write
# これを指定していると、重複してActionsが走った時に前のをキャンセルしてくれる
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
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@v1
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# ★★★ Deployするディレクトリ ★★★
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@main
環境によって書き換えが必要になりそうなのがこのあたり。[1]
Github Actionsを起動するブランチを指定する。昔作ったリポジトリだとmasterだったりする。
push:
branches: ["main"]
デプロイするディレクトリを指定する。
publicだったり、destだったり、いろいろ。
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
path: '.'
ビルド設定の追加
ただここまでだとビルドまではしてくれない。
なのでActionsのymlファイルに追記する。
name: Deploy static content to Pages
on:
# ★★★Github Actionsを起動するブランチ★★★
push:
branches: ["main"]
# Github Actionsを手動で起動できるようにする。
workflow_dispatch:
# パーミッションの設定
permissions:
contents: read
pages: write
id-token: write
# これを指定していると、重複してActionsが走った時に前のをキャンセルしてくれる
concurrency:
group: "pages"
cancel-in-progress: true
jobs:
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@v1
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 16
- name: build
run: npm ci && npm run build
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# ★★★ Deployするディレクトリ ★★★
path: '.'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@main
変更点としてはUpload artifactの前に以下を差し込んでる。
- name: Setup Node
uses: actions/setup-node@v3
with:
node-version: 16
- name: build
run: npm ci && npm run build
今回ビルドするのはReactのプログラムだったので、nodeのインストールと、npmのインストール、そしてビルドを行ってる。
この辺は対象となるアプリケーションによって変わってきそう。
デプロイされたページを見ると、ちゃんと更新されてる。いい感じ。
Discussion
（Actions全般に言えることですが）こちらは設定を開始したRepositoryのdefault branchが設定されるようになっていますので、ユーザーは気にする必要はないと思います。
が展開されると思います。