Sapperで作ったアプリをGitHub ActionsでビルドしてGitHub Pagesで公開する
概要
Sapperで作ったアプリをGitHub ActionsでビルドしてGitHub Pagesで公開しようとした所、 BaseURLの設定周りで思ったよりハマってしまったので、記事にしておきます。
実現したいこと
- アプリのexportはGitHub Actionsで実行する
- Sapperで作ったアプリをGitHub Pagesで公開する
- 公開先のURLは
https://<username>.github.io/<repository name>/とする
- 公開先のURLは
前提
- Sapper v0.28.10
- node v14.13.0
手順
アプリを作成
今回は公式ページに書いてあるテンプレートのアプリをデプロイしますので、 まずはテンプレートアプリをnpxでとってきます。
❯ npx degit "sveltejs/sapper-template#rollup" sapper-gh-pages-gh-actions
npx: installed 1 in 1.19s
> cloned sveltejs/sapper-template#rollup to sapper-gh-pages-gh-actions
❯ cd sapper-gh-pages-gh-actions現在はTypeScriptがサポートされているので、TypeScriptを有効化しておきます。
下記コマンドを実行するだけです。
❯ node scripts/setupTypeScript.js
Adding TypeScript with Rollup...
Converted to TypeScript.npm install を実行後、 npm run dev を実行して、動作確認してみます。
localhost:3000 をブラウザから開くと、ナイスガイが決めポーズをしている画像が表示されるはずです。
❯ npm install
.
.※npm install長いので割愛してます。
❯ npm run dev
> [email protected] dev /Users/tkancf/src/github.com/tkancf/sapper-gh-pages-gh-actions
> sapper dev
✔ server (2.7s)
✔ client (2.7s)
> Listening on http://localhost:3000
✔ service worker (576ms)ここまでは 公式ページのGetting started にも書いてある内容なので、 問題ないはずです。
BaseURL の変更
公開したいページのURLが
https://<username>.github.io/<repository name>/ となります。
末尾にサブディレクトリの形でリポジトリ名が入っており、今のアプリのままでは画像等が表示されません。
まずはアプリをこのURL形式に対応させます。変更箇所は以下の2箇所です。
Gitのdiffを貼っておきます。各々のリポジトリ名に合わせて読み替えて下さい。
src/server.ts
diff --git a/src/server.ts b/src/server.ts
index c77f593..085e55a 100644
--- a/src/server.ts
+++ b/src/server.ts
@@ -8,6 +8,7 @@ const dev = NODE_ENV === 'development';
polka() // You can also use Express
.use(
+ 'sapper-gh-pages-gh-actions',
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()rollup.config.js
diff --git a/rollup.config.js b/rollup.config.js
index b5f1b96..3999295 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -39,7 +39,7 @@ export default {
}),
url({
sourceDir: path.resolve(__dirname, 'src/node_modules/images'),
- publicPath: '/client/'
+ publicPath: '/sapper-gh-pages-gh-actions/client/'
}),
resolve({
browser: true,上記を追加した後、再度 npm run dev を実行すると、 localhost:3000/<repository name> がアプリのURLになっているはずです。
GitHub Actionsの設定
アプリは用意出来たのでGitHub Actionsを設定します。
.github/workflows/deploy.yml というファイルを作成して以下の内容を書きます。(sapper-gh-pages-gh-actions の部分は適宜自分のリポジトリ名に変更して下さい。)
GitHub Actionsの truewebartisans/actions-sapper、 peaceiris/actions-gh-pagesを利用しています。
name: deploy
on: push
jobs:
build_deploy:
name: Build sapper app
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@master
- name: Build Sapper
uses: truewebartisans/actions-sapper@master
with:
args: "--legacy --basepath sapper-gh-pages-gh-actions"
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
publish_dir: __sapper__/export/sapper-gh-pages-gh-actions
publish_branch: gh-pages
github_token: ${{ secrets.GITHUB_TOKEN }}デプロイ
GitHubへpushしたら、リポジトリのSettingsからGithub PagesのSourceを gh-pages ブランチの /(root)に設定します。
ここまでの設定が問題なく完了していれば、 https://<username>.github.io/<repository name>/ でアプリが確認出来るはずです。
あとがき
今回GitHub Actionsを初めて使ったんですが、便利ですね。色々と使い道はあるようなので、調べつつもう少し試してみたいと思います。