tkancf.com

Sapperで作ったアプリをGitHub ActionsでビルドしてGitHub Pagesで公開する

投稿日: 2022-08-21

概要

Sapperで作ったアプリをGitHub ActionsでビルドしてGitHub Pagesで公開しようとした所、 BaseURLの設定周りで思ったよりハマってしまったので、記事にしておきます。

実現したいこと

前提

手順

アプリを作成

今回は公式ページに書いてあるテンプレートのアプリをデプロイしますので、 まずはテンプレートアプリをnpxでとってきます。

Terminal window
❯ 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を有効化しておきます。
下記コマンドを実行するだけです。

Terminal window
❯ node scripts/setupTypeScript.js
Adding TypeScript with Rollup...
Converted to TypeScript.

npm install を実行後、 npm run dev を実行して、動作確認してみます。
localhost:3000 をブラウザから開くと、ナイスガイが決めポーズをしている画像が表示されるはずです。

Terminal window
❯ npm install
.
.

※npm install長いので割愛してます。

Terminal window
❯ 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を初めて使ったんですが、便利ですね。色々と使い道はあるようなので、調べつつもう少し試してみたいと思います。