九尾空間

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

倉庫サイトに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チュートリアルそのままの内容ですが、これから色々試していければなと考えています。

Svelte + TailwindCSS + daisyUI で雑多な倉庫ページを整備する

技術

以前、「実験的に作った細々としたものを雑に公開できるように」と思って倉庫ページを作っていたのですが、今日はそれをSvelte + TailwindCSS + daisyUIで書き直しました。

以前はNext.js + MUI で実装していたのですが、以下の理由からSvelteで全面的に書き直してみました:

  • 一覧ページ生成用のコードをあまりスケールする作りに出来なかった
  • 一覧ページ生成に使うメタデータの管理方法に不満が出てきた
  • そこまで複雑なSPAでもないのにNext.jsは少しオーバーキルすぎる感触だった
  • 単純にSvelteが使ってみたかった

まだまだ見た目的に綺麗に出来そうな余地は多分にありそうですが、そもそも倉庫にものがないと始まらないので、この後は中身を作るほうに注力しようかなと。

この記事では、こういう倉庫みたいなページを作る上で検討した事項を軽く備忘録的にご紹介できればと。

続きを読む

「破綻しない二重振り子シミュレーション」を書こうとしたらChatGPTに敗北した件について

技術

…… いやー、してやられました。どうもこんにちは、nullkalです。

今回は、年末にかけてニカイドウレンジさんが公開して話題になった「坊主がクレーン車で除夜の鐘を叩くゲーム」に便乗して、二重振り子のシミュレーションを書いていこうと思ったのですが、まさかのまさかChatGPTの優秀さに敗北してしまったのでその顛末を書き綴ってみようと思います。

続きを読む

2024年 明けましておめでとうございます

お知らせ

新年あけましておめでとうございます。nullkalです。
2024年、今年はインプットに加えてアウトプットも増やして行きたいと考えています。

長いこと放置気味だったこのブログですが、今年はいろいろ記事を書いていければと考えています。

具体的に何を書くかはまだ考えているところですが、mstdn.jpに巻き込まれ以来ストップ気味だった創作関係とかも、ゆるゆると復活していければな～と考えているところです。

nullkalの2024年にご期待ください。今年もよろしくお願いいたします～！

で、結局Mastodonって何だったの?

技術

アドベントカレンダーの記事にしようと思って書きはじめましたが、完全にポエムになってしまったのでこちらのほうに投稿して供養したいと思います。

Mastodonがブームになって最初の12月がやってきました。さて、みなさんはMastodonについてどんなイメージをお持ちでしょうか。もうすっかりMastodonの画面を開くのが癖になってしまった方から「一部の人があんな持ち上げていたのに結局流行らなかったな」と冷やかな目で見ている方まで様々な方々がいらっしゃると思います。

しかし、結局のところMastodonって何だったのでしょう? この記事ではその点について語っていきたいと思います。以下の文章は完全に自分の主観です。

続きを読む