SolidJSのアプリをGithub Pagesで公開する

はじめに

注目が高まりつつあるフレームワーク、SolidJSを自分も試してみたい！　と思い立ち、どうせなら他の人にも見える形でいじっていこうとGitHub Pagesで公開することを考えていたのですが、すんなり行かなかったのでメモ的に手順を投稿しました。

SolidJS特有の詰まりポイントというわけではないため、viteベースの他のフレームワークの新規プロジェクトをGitHub Pagesで公開したいという方にも参考になるかもしれません。

手順

SolidJSの新規プロジェクトを立ち上げる

SolidJSの新規プロジェクトを立ち上げは公式ドキュメントを参考にしました。
適当なディレクトリーに移動してから以下のコマンドでテンプレートプロジェクトを立ち上げます。
(% 以下を実行してください)

% npx degit solidjs/templates/ts my-app
> cloned solidjs/templates#HEAD to my-app

% cd my-app
% npm i

added 92 packages, and audited 93 packages in 9s

8 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ここまででテンプレートの新規プロジェクトが立ち上がったので、ローカルで起動してみます。

% npm start

> vite-template-solid@0.0.0 start
> vite


  VITE v4.3.7  ready in 350 ms

  ➜  Local:   http://127.0.0.1:3000/
  ➜  Network: use --host to expose
  ➜  press h to show help

http://127.0.0.1:3000/にアクセスすると以下のような画面が出てくるので、テンプレートプロジェクトができたことが確認できます。
本記事の最終的な目標はこの画面をGitHub Pagesで公開することですね。

ここで一旦SolidJS側の作業は終了とし、GitHub側の設定に入ります。

GitHubにPushする

各々の方法でお使いのGitHubにPushしてください。
私はGitHub DesktopというアプリでGitの管理をしており、結構便利なのでそちらを用いた方法をお勧めすることが多いです。

ここでは、リポジトリー名はsolidjs-testで作成しました。

注意: 公開する都合上、リポジトリーの設定はPublicにしておく必要があります。

まずはリポジトリーを作成して、

% git init
Initialized empty Git repository in /Users/**/my-app/.git/

GitHub Desktop側では Add Existing RepositoryしてからPublishすればOKです。

これでリモート側にPushできました。

GitHub Pagesを有効化する

Pushした後、GitHubのリポジトリーを開くと以下のような画面になっていると思います。

Setting > Pages と選択していけば以下の表示になります。
もしここでリポジトリーがPublicになっていない場合は別の表示になっていると思いますので先に公開設定に変更してください。

以下のように、
Deploy from a branch > main > /(root) と(とりあえず)設定しておき、
saveボタンを選択するとデプロイがはじまります。

しばらくしてから画面をリロードすると以下のように表示が変わり、準備が完了していることがわかります。

しかし、アクセスしてみると以下のように真っ白でまだうまく表示できていないことがわかります。
コンソールを確認するとリソースがうまく取得できていないようですね。

というわけでここからはSolidJSで作成したプロジェクトをGitHub Pagesで表示するために設定に変更を加えていきます。

GitHub Pages用に変更を加える

主に必要な変更箇所は以下の通りです。

(1) SolidJSアプリのビルド

そもそもの話として、GitHub Pagesは静的ページのホスティングサービスです。
ローカルで確認するだけならviteで開発サーバーを立ち上げれば済む話ですが、公開するコードはソースをビルドする必要があるわけですね。

まずはビルドを行います。
SolidJSのデフォルトの設定ではビルドされたファイルは/distに格納されるようになっていますが、GitHub Pagesの参照ディレクトリー設定は/(root)と/docsの二つしかありません。
したがって、そこを変更してあげる必要があります。
設定する項目はvite.config.ts内にあります。

vite.config.ts

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
+   outDir: './docs',
  },
});

build設定の部分にoutDir: './docs'を追加することで、吐き出されるファイルが/docs以下に格納されるようになります。

設定を変更したらビルドします。

% npm run build                       

> vite-template-solid@0.0.0 build
> vite build

vite v4.3.7 building for production...
✓ 9 modules transformed.
docs/index.html                    0.59 kB │ gzip: 0.36 kB
docs/assets/logo-123b04bc.svg      1.60 kB │ gzip: 0.55 kB
docs/assets/favicon-0e726a38.ico  15.09 kB
docs/assets/index-ba74b708.css     0.71 kB │ gzip: 0.47 kB
docs/assets/index-f795380f.js      7.34 kB │ gzip: 3.16 kB
✓ built in 253ms

最終的にdocs以下にビルドされたファイルが格納されたはずです。
これでビルドの手順は終了です。

(2) GitHub Pagesの参照元変更

GitHub Pages側の変更は、/(root)にしていた部分を/docsに変えてsaveでデプロイするだけです。

しかしながらここまで変更してプッシュしても、紹介した手順通りに作成してきている場合まだアプリは表示できません。
さらにもう一箇所変更が必要な部分があります。

(3) SolidJSアプリのbase URLの変更

GitHub Pagesの仕様で、リポジトリー名に<user>.github.ioのような指定された形式の名前をつけた場合にはhttps://<user>.github.io/にデプロイされるためいまから実施する変更は不要になりますが、それ以外の場合はhttps://<user>.github.io/<リポジトリー名>/にデプロイされることになります。
そのため、そのままではhttps://<user>.github.io/の/docsを探そうとしてしまうため、baseを変更してhttps://<user>.github.io/<リポジトリー名>/から参照してやるように変更する必要があります。

baseの設定はvite.config.tsで行います。
リポジトリー名にsolidjs-test以外を設定している場合、この部分は適宜変更してください。

vite.config.ts

import { defineConfig } from 'vite';
import solidPlugin from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    port: 3000,
  },
  build: {
    target: 'esnext',
    outDir: './docs',
  },
+ base : "/solidjs-test/",
});

デプロイ成功！

この状態で再度ビルドし直して、GitHubに変更をプッシュしてください。
しばらくするとGitHub Pages側に反映されて以下のように目的の画面が表示されていると思います。

おまけ

ここまでやってきて、勘の良い方は
「これ毎回ビルドしてデプロイする手順踏まないといけないのか……面倒だな」
とお気づきの方もいらっしゃると思います。
本筋とは直接関係がないため最後に持ってきましたが、GitHub Actionsを利用すればプッシュにトリガーしてビルドを実行してくれるワークフローを作成可能です。
つまり、いちいちローカルでビルドせずともプッシュするだけで公開ページが更新されるようにできます！

GitHub Actionsでビルドを自動化

Settings > Pages > SourceをDeploy from a branchからGitHub Actionsに変更 > Static HTMLを選択します

名前は適当でいいので、テンプレートとして用意されているstatic.ymlを以下のように変更します。

build-pages.yml

name: Build and Deploy static content to Pages

on:
  push:
    branches: ['main']
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

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: Set up Node
        uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v3
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: './docs'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

これをCommit changes...して保存すれば手順は終了です。
以降Pushするたびにこのworkflowが走って自動でビルド・デプロイしてくれるようになります。

参考記事