先日、個人的な実験ページを公開する用のリポジトリを作った話をしましたが、今回はViteでビルドしたWebページをそこに自動デプロイする話です。
つまり、先週作ったガワに対してコンテンツをばしばし投入していけるようにしよう、と言うお話です。 前回の記事を軽くおさらいしておくと、倉庫サイトは以下のような仕様で作成しました:
- SvelteKit製のアプリ。
- CloudFlare Pagesを設定済みなので、gitでmainブランチにpushすると自動でデプロイされてページが公開される。
static/<コンテンツ名>
にコンテンツを入れていく。基本的に各コンテンツのサブフォルダ間に依存関係は作らない想定。- 一覧ページに項目を追加するには、 src/catalog.yaml を編集する。
基本的にコンテンツは static
フォルダ以下にpushできればどんな方法で作っても問題無い作りにしています。
つまり、バニラのHTML, CSS, JavaScriptでコンテンツを作るのも可能ですが、Vite等でビルドしたデータをサブフォルダにコピーする形でコンテンツを作ることも可能なのです。
やっぱりモダンなWeb開発をしようとするとどうしてもTypeScriptは欠かせないため、何らかのビルドを噛ましたかったんですよね。 そこで今回は、Viteを使ってTypeScriptをビルドするようにしました。とはいっても、React等のフレームワークは使わずにHTMLは手書きです。 HTMLでこだわると言うよりかは、PixiJS等のCanvasで色々出来る系のフレームワークと戯れてみたい気分なので、HTML部分はかなり手抜きで行きます。
また自動ビルドについてですが、手動でビルドしてdistフォルダをコピーしてcommitするみたいな形にしても良いのですが、やっぱり極力楽な方が更新続くかなと思いまして。コンテンツの開発リポジトリに設定した GitHub Actions から自動で倉庫サイトのリポジトリにコミットする設定を行って、個人ページのコンテンツ更新を完全自動化してみました。
コンテンツ更新の自動化ですが、とっても簡単です。
- catalog.yaml を適宜編集しておく。
- 新しいリポジトリ (ここでは hello-pixi と言う名前で作成) を作る。
- hello-pixi にViteでプロジェクトを作る。
- npm run build で vite buildが走ることを確認しておく。
- 新しいSSHの秘密鍵を作って garage.nil.nu のリポジトリにDeloy Keyとして登録する。
- hello-pixi の GitHub を開いて、 Settings > Secrets and variables > Actions から (5) で作成したSSHの秘密鍵を DEPLOY_PRIVATE_KEY という名前で登録しておく。
- パスフレーズは付けない。
- hello-pixi に .github/workflows/deploy-to-garage.yml を以下の内容でコミットする
name: Deploy to garage.nil.nu on: push: branches: - main env: TARGET_PATH: hello-pixi/ jobs: deploy: name: Deploy to garage.nil.nu runs-on: ubuntu-latest steps: - uses: actions/checkout@master - name: Use Node.js uses: actions/setup-node@main with: node-version: 18.x - name: npm install and build run: | npm ci npm run build -- --base=/${{ env.TARGET_PATH }} - name: Deploy uses: s0/git-publish-subdir-action@develop env: FOLDER: dist REPO: git@github.com:nullkal/garage.nil.nu.git SSH_PRIVATE_KEY: ${{ secrets.DEPLOY_PRIVATE_KEY }} BRANCH: main TARGET_DIR: static/${{ env.TARGET_PATH }}
このGitHub Actionsのworkflowファイルで鍵となってくるのが s0/git-publish-subdir-action です。 s0/git-publish-subdir-action を使用すると、特定のフォルダのファイルを別リポジトリの特定ディレクトリにコピーしてコミットできます。
workflowファイルの中身は、GitHub ActionsでViteの自動ビルドを走らせたあと、garage.nil.nuのリポジトリの static/hello-pixi 以下にビルドの成果物をコピーしてコミットするだけです。 これだけで作業がめっちゃ楽になるのでありがたいですね。
こうして自動ビルド出来るようにしたページがこれです: garage.nil.nu
まだ公式のPixiJSチュートリアルそのままの内容ですが、これから色々試していければなと考えています。