はじめに
新し目のフレームワークを使ってWebアプリを作る体験がしてみたいと思い、作ったはいいもののそれをGitHub Pagesでホスティングするのに詰まったので、解決までの手順を備忘録として残しておきます。
作ったもの
「あなたと親族の関係性」というWebアプリです。"深さ2:あなた->父->母"のように関係性の深さと対象を選択し、最後に「結果を見る」ボタンを押すと、あなたと対象の家系図上の続柄が分かります。
何に詰まったか
.svelteファイルを編集し終え、アプリのルートディレクトリでnpm run buildして、生成されたファイル群をデプロイ用のブランチに置いたのですが、生成されたURLを辿っても空白のページになってしまう(リソースが正しく読み込まれていない)か、CSSとJSの抜け落ちた生のhtmlが表示されている状態でした。
解決までの手順
まず、Svelteの公式ページに載っている手順でプロジェクトの初期化を行いました。
npm create vite@latest myapp -- --template svelte cd myapp npm install npm run dev
初めのnpm createを叩いた段階で、テンプレートプロジェクトを3種類のうちから選ぶよう聞かれますが、デフォルトで選択されているCounter付きのものを選択しました。
その後は自分の好きなようにApp.svelteファイルを編集した後、このブログのdeploy it in Github pages以降を参考に
npm install --save-dev gh-pages
を打ち、vite.config.jsファイルを
import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; export default defineConfig({ base: "/my-app/", plugins: [svelte()], });
のように編集し(my-appの部分は公開したいリポジトリ名)、最後にpackage.jsonファイルを
"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "deploy": "npx gh-pages -d dist" },
のように編集しました。
あとはプロジェクトに変更を加えるたびに
npm run build npm run deploy
を走らせれば、指定したリポジトリでデプロイ用のブランチが生成(更新)され、Webアプリとして利用できるようになりました。