Preact プロジェクトを GitHub Pages にデプロイした
以前ちょっとだけ触った Preact。
Preact CLI で作ったプロジェクトをそのまま GitHub Pages にデプロイすると、ベースとなるパスがズレてしまうので、ルーティングが上手く動作しなかった。
https://neos21.github.io/my-preact/(例) でアクセスすると初期ページは表示されるhttps://neos21.github.io/my-preact/second-pageに遷移しようとすると…https://neos21.github.io/second-pageという URL に解釈されてしまい (/my-preact/部分が欠落する)、正常に動作しない
どうしたらいいのかなーと調べていたところ、上手くコレを解決したサンプルプロジェクトを発見した。
- flameddd/preact-github-actions-to-github-pages: This is a DEMO how to use github actions deploy Preactjs to github pages
- preact-github-actions-to-github-pages
内部実装を調べたところ、やっていることは大きく2つだった。
- 環境変数
GITHUB_PAGESと、baseroute.jsというファイルを利用して、環境変数によってベースとなるディレクトリパスを定義している- 上の例でいくと
/my-preact/部分を環境変数で注入している - ページリンクを実装する際は必ず
baserouteをimportして、${baseroute}/profileのようなリンクパスで記述している - GitHub Pages へのデプロイ時に実行するビルドコマンドの実行時のみ、環境変数を付与するようにしている (
package.jsonのnpm run buildがそれ) preact.config.jsでもこの環境変数を元に調整している。ローカル開発時は余計なディレクトリパスが付与されないように工夫されている
- 上の例でいくと
- PWA 向けに
manifest.jsonに記述されるパスを同様に書き換えておく- dot-json というパッケージを使って、GitHub Pages 向けビルド時に
manifest.jsonのstart_urlを書き換えている
- dot-json というパッケージを使って、GitHub Pages 向けビルド時に
このプロジェクトの本質に的を絞って、より小さくまとめた Fork 版で、自分でも動作を検証してみた。
- Neos21/practice-preact-on-github-pages: It's a demo about how to use Github Actions to deploy a Preact.js website to Github Pages
- practice-preact-on-github-pages
プロジェクト名を書き換えたが、上手く動いている。
ディレクトリパスを持っているのは package.json の scripts.build 部分のみだ。preact.config.js や baseroute.js などは、環境変数 GITHUB_PAGES を参照するだけなので、特に変更不要。
manifest.json の name や short_name などは任意で書き換えて良い (name 値が title 属性値に使われる)。start_url はビルド時に成果物ファイルの方を書き換えるので、src/manifest.json の記述は / のままで良い。
app.js や header.js でどんな風にリンクを組み立てているかだけ確認してもらったら、あとは好きにプロジェクトを組んでもらって良い。npm run dev で開発サーバが起動してローカルで上手く動作するし、npm start は serve パッケージを使ってビルドした資材をローカルで動かせる。いずれも環境変数 GITHUB_PAGES は渡されていないので、http://localhost:5000/ で正しく動く構成としてビルドされる。
GitHub Actions を用意してあり、npm run build (GitHub Pages 向けのビルドスクリプト) を実行して GitHub Pages にデプロイ出来るようにしてある。コレも Fork 元はちょっと古かったので、直しておいた。Secret の用意は不要である。
コレでとりあえず、Preact のルータが動くようになった。同様に Riot.js も GitHub Pages 上で動かしたいなーと思っているのだが、パス調整を参考にして頑張ってみるか。
