九尾空間

この世はとてもキュービックな空間ですね

トップ > 技術 > 倉庫サイトにViteで作ったコンテンツを自動デプロイする

倉庫サイトにViteで作ったコンテンツを自動デプロイする

技術

先日、個人的な実験ページを公開する用のリポジトリを作った話をしましたが、今回はViteでビルドしたWebページをそこに自動デプロイする話です。

blog.nil.nu

つまり、先週作ったガワに対してコンテンツをばしばし投入していけるようにしよう、と言うお話です。 前回の記事を軽くおさらいしておくと、倉庫サイトは以下のような仕様で作成しました:

  • 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 から自動で倉庫サイトのリポジトリにコミットする設定を行って、個人ページのコンテンツ更新を完全自動化してみました。

コンテンツ更新の自動化ですが、とっても簡単です。

  1. catalog.yaml を適宜編集しておく。
  2. 新しいリポジトリ (ここでは hello-pixi と言う名前で作成) を作る。
  3. hello-pixi にViteでプロジェクトを作る。
  4. npm run build で vite buildが走ることを確認しておく。
  5. 新しいSSHの秘密鍵を作って garage.nil.nu のリポジトリにDeloy Keyとして登録する。
    • Deploy Keyでリポジトリ内のデータ更新を行いたいので "Allow write access" にチェックを入れておく。
  6. hello-pixi の GitHub を開いて、 Settings > Secrets and variables > Actions から (5) で作成したSSHの秘密鍵を DEPLOY_PRIVATE_KEY という名前で登録しておく。
  7. 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チュートリアルそのままの内容ですが、これから色々試していければなと考えています。