SPA モードの Remix を GitHub Pages にデプロイする方法が Remix のアカウントでポストされていたので、ふとそのリポジトリを見てみると、GitHub Actions を使った GitHub Pages へのデプロイが簡単に行えるようになっていて驚いた。
このポストを見ると GitHub Actions から提供されている Action など知らなかったものがいくつかあったので、Remix SPA モードのデプロイ方法など含め、内容を紹介したい。
動作確認した環境
関連がありそうな依存を記す。
"dependencies": {
"@remix-run/node": "^2.8.1",
"@remix-run/react": "^2.8.1",
"@remix-run/serve": "^2.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
},
"devDependencies": {
"@remix-run/dev": "^2.8.1",
"vite": "^5.1.0",
"vite-tsconfig-paths": "^4.2.1"
},
Vite からの Remix のセットアップ
Vite のプロジェクトを作成するコマンド久しぶりに実行してみると Remix が選択肢に増えてる。
Remix が Vite をサポートしたのちょっと前だった気がするけども、Vite のセットアップの選択肢の中にも増えてる。仕事が早い。
pnpm create vite
✔ Project name: … hoge
✔ Project name: … hoge
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC
❯ Remix ↗
# Remix増えとるやんか
SPA モードの設定
Vite で Reimix を選択しプロジェクトを作成したら、生成されるvite.config.tsを変更することで SPA モードが利用できる。ssrをfalseにするだけ。簡単。
export default defineConfig({
- plugins: [remix(), tsconfigPaths()],
+ plugins: [remix({
+ ssr: false
+ }), tsconfigPaths()]
});
GitHub Pages の設定を追加
GitHub Pages は公開先の URL がhttps://{github-account-name}.github.io/{repository-name}になるので、その対応を vite.config.ts に追加する。
+ import { copyFileSync } from "node:fs";
+ import { join } from "node:path";
export default defineConfig({
+ base: "/repository-name/",
plugins: [remix({
ssr: false,
+ basename: "/repository-name/",
+ buildEnd(args) {
+ if (!args.viteConfig.isProduction) return;
+ const buildPath = args.viteConfig.build.outDir;
+ copyFileSync(
+ join(buildPath, "index.html"),
+ join(buildPath, "404.html"),
+ );
+ }
}), tsconfigPaths()]
});
Remix が Vite をサポートしたことで Basename にも対応してる。
また、ポストで紹介されていたリポジトリでもコメントされていたが、GitHub Pages の場合、全てが index.html に行かない場合があるので同様の内容を 404.html としてコピーする処理をbuildEndで追加している。
SPA モードの Remix を GitHub Pages にデプロイする
GitHub のリポジトリの Settings から Pages を選択し、Build and deployment の Source を GitHub Actions に設定すれば、あとは、ポストで紹介されている次の yaml ファイルを追加することで SPA モードの Remix を GitHub Pages にデプロイできる。
んだが、久しぶりに触った GitHub Actions で自分の中でいくつかアップデートがあったので、その内容をまとめる。
permissions
permissions:
contents: read
pages: write
id-token: write
pagesはその名前通り、GitHub Pages を扱う上で必要な権限。許可される詳細の Endpoint もドキュメントに記載されてる。id-tokenはドキュメント読む感じ、writeにすることで GitHub の OIDC プロパイダから JWT 受け取れるようになる権限なのかな。
pagesとid-tokenは後に紹介するactions/deploy-pagesで必要な権限になる。
pnpm/action-setup
- uses: pnpm/action-setup@v3
name: Install pnpm
with:
version: 8
run_install: false
今回はpnpmを使っているが、pnpm ではセットアップ用の action が提供されているので、ドキュメント通りに使うことで GitHub Actions 上でもすぐに pnpm を利用できる。
cache を使ってインストール時間を短縮する方法も記載されてる親切設計。
- name: Get pnpm store directory
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
- uses: actions/cache@v4
name: Setup pnpm cache
with:
path: ${{ env.STORE_PATH }}
key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
restore-keys: |
${{ runner.os }}-pnpm-store-
actions/configure-pages
README には GitHub Pages を有効にすると書かれている。この有効にするの詳細は実装を見ると、GitHub Pages のサイトを作成するための API が呼ばれていた。
なので、この Action を使っていれば前述した次の手順はもしかしたら必要ないかも知れない。
GitHub のリポジトリの Settings から Pages を選択し、Build and deployment の Source を GitHub Actions に設定すれば
actions/upload-pages-artifact
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: "build/client"
GitHub Pages にデプロイするために必要なファイルを artifact にアップロードしてくれる Action。pathの"build/client"は Remix の SPA モードでビルドされたファイルが出力されるディレクトリ。
この設定をすることで、pathで指定した対象がgithub-pagesという名前で artifact にアップロードされる。
actions/deploy-pages
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
actions/upload-pages-artifactで artifact にアップロードされたファイルを使って GitHub Pages にデプロイする Action。なので、デフォルト値はactions/upload-pages-artifactのものが使われている（artifact の名前はgithub-pagesがデフォルト値）。
id: deploymentの指定は Context から参照したいためなのかな。
action の実装みたけど id を使ってるとこはないように見えたけど、step の id を指定することで何かしらが識別できるのかな。
あとがき
自分は以前まで、github-pages-deploy-actionを使い、GitHub Pages 用のブランチを作って、そのブランチをデプロイするみたいな方法をとっていたが、今は GitHub Actions の公式が提供する Action を使うことで、もっと簡単に、かつ、素早いデプロイができるようになっていた。
もちろん初期段階でコード量が多くないのもあるが、今回紹介した方法では GitHub Pages へのデプロイの実行時間は 24 秒しかかからなかった。速い。すごい。
Discussion