この記事は、Svelte Advent Calendar 2020の21日です。
はじめに
つい最近、業務でSvelte + Snowpackを使って、小さいアプリケーションを作ったので、その準備の過程を書きました。
業務だとS3 + CloudFrontを使ったので、GitHub Pagesを使っていないけどね
SvelteとSnowpackがなんぞや？な方は下の公式サイトへのリンクを置いたので読んでみてください！
この記事でできること
この記事を一通りやると下記のことができるようになります。
- Svelte + TypeScriptが使える環境ができる
- GitHub Pagesで公開できる
開発環境とかバージョン
これを作るにあたり、次のバージョンと環境で行いました。
| 名前 | バージョン |
|---|---|
| OS | macOS Big Sur 11.1 |
| Node.js | 14.15.3 |
| Yarn | 1.22.10 |
| Svelte | ^3.31.0 |
| Snowpack | ^2.18.4 |
| TypeScript | ^4.0.0 |
実際にやってみた
実際にGitHub Pagesに公開するまでを書いていきます。
1.コーディングできる状態にする
コーディングできる状態にするために、Snowpackのテンプレートの@snowpack/app-template-svelte-typescriptを使って環境を作っていきます。
1-1.Snowpackとテンプレートからソースコードを取ってくる
次のコマンドの[ディレクトリ名]を任意で入力し実行してください。
$ npx create-snowpack-app [ディレクトリ名] --template @snowpack/app-template-svelte-typescript --use-yarn
これで環境はできました！お疲れ様です！
1-2.[Option] npm使いたいんだけど...
--use-npmか、オプションを付けなければいいですよ。
$ npx create-snowpack-app [dirname] --template @snowpack/app-template-svelte-typescript $ npx create-snowpack-app [dirname] --template @snowpack/app-template-svelte-typescript --use-npm
1-3.[Option] SassとかScssを使いたいんだけど...
Snowpackのプラグインの@snowpack/plugin-sassを使ってください。
1-3-1.インストール
初めに、次のコマンドでインストールしてください。
$ yarn add -D @snowpack/plugin-sass
1-3-2.snowpack.config.jsを編集
snowpack.config.jsのpluginsにパッケージ名を追記してください。
また、Scssのプラグインには、オプション設定ができるので必要に応じて追記してください。
module.exports = {
...
plugins: [
'@snowpack/plugin-svelte',
'@snowpack/plugin-dotenv',
'@snowpack/plugin-typescript',
+ ['@snowpack/plugin-sass',
{ /*オプション設定*/ }
]
],
...
};
これで、src配下に.scss、.cssファイルがあるとビルド時に、snowpack.config.jsのmount.srcで定義した場所に出力されます！
publicディレクトリに、index.htmlがある場合は設定するのを忘れないでください。
1-4.[Option] トランスパイルやMinify、プリロードとかしたいんだけど...
Snowpackのプラグインの@snowpack/plugin-optimizeを使うとできます。
初めに、次のコマンドでインストールしてください。
$ yarn add -D @snowpack/plugin-optimize
次に、snowpack.config.jsのpluginsにパッケージ名を追記してください。
また、optimizeのプラグインにも、オプション設定ができるので必要に応じて追記してください。
module.exports = {
...
plugins: [
'@snowpack/plugin-svelte',
'@snowpack/plugin-dotenv',
'@snowpack/plugin-typescript',
+ ['@snowpack/plugin-optimize',
{ /* 設定 */ }
],
],
...
};
これで、ビルド時に設定したファイルが出力されます。
2.実際に使ってみる
次に、SnowpackのCLIを通して、開発モードやビルド、テストをやってみます。
2-1.開発モードを実行
下記のコマンドを実行すると、開発モードで実行されます。
$ yarn start
実行後は、デフォルトだとhttp://localhost:8080で確認できます。
また、src配下のファイルが更新されると自動更新されます。
もし、設定を変えたい場合は、このリンクを参考に、snowpack.config.jsのdevOptionsに追記してください。
2-1-1.[Option]エイリアスを設定したいんだけど...
snowpack.config.jsに、aliasがあるのでそこに定義してください。
TypeScriptを使っているので、tsconfig.jsonのcompilerOptions.pathsにも定義するのを忘れないでください。
2-2.ビルドする
下記のコマンドを実行すると、srcとpublicディレクトリを元にビルドし、snowpack.config.jsのbuildOptions.outに記載されたディレクトリに出力します。
$ yarn build
開発モードと同じく、設定を変えたい場合は、このリンクを参考に、snowpack.config.jsのbuildOptionsに追記してください。
2-3.テストもやってみる
下記のコマンドを実行するとsrcディレクトリ配下の*.test.jsファイルに対してテストができます。
$ yarn test
このテストでは、Web Test Runnerを使っています。
もちろん、.svelteファイルにもテストを行うことができます。
テンプレートの中に、App.svelteファイルのテストコードがあるので確認してみてください。
WTR runs the same Snowpack build pipeline that you’ve already configured for your project, so there’s no second build configuration needed to run your tests. This improves test confidence while removing 100s of extra build dependencies to your project.
Snowpackの公式のTestingに書かれていますが、Snowpackを通してWeb Test Runnerでテストを実行しています。
よくわかっていないのですが、テストコードを保存する時はテスト対象のコードファイルと同じディレクトリに置いてください。
ファイルを見つけられず？失敗します。
（詳しい方がいらっしゃいましたら教えてください）
3.Github Pagesで公開してみる
最後に、2までで作ったものをGitHub Pagesで公開してみます。
3-1.index.htmlのパスの修正
カスタムドメインを使用していない場合は、GitHub PagesのURLがhttps://{ユーザ名}.github.io/{リポジトリ名}となります。
つまり、ルートディレクトリを指していない訳です。しかし、public/index.htmlファイルでは、ファイル参照先が全てルート直下を指しているので、これを相対パスに変更する必要があります。
例）
- <script type="module" src="/dist/index.js"></script> + <script type="module" src="./dist/index.js"></script>
3-2.Github Actionsを書く
最後に、Defaultブランチ（mainブランチ）にpushしたら、ビルドしたGithub Pages用のコードをデプロイするgh-pagesブランチを作成するCIを作ります。
やることは単純です。.github/workflows配下に、下記のDeploy.ymlファイルを追加してください。
もし、snowpack.config.jsのbuildOptions.outを変更していて、ビルドディレクトリがbuildでない場合は、Deploy.ymlのpublish_dirを./buildから変更しておいてください。
name: Deploy GithubPage
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [14.x]
steps:
- uses: actions/checkout@v2
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v1
with:
node-version: ${{ matrix.node-version }}
- name: install
run: yarn install --frozen-lockfile
- name: build
run: yarn build
- name: deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./build
このファイルをデフォルトブランチのマージかプッシュしたらあと少しで終わりです。
3-3.GitHub Pagesの設定をする
最後に、GitHub Pagesの設定をします。
リポジトリのSettingsのOptionsを開いてください。
GitHub Pagesという見出しで、Sourceの項目があるので、そこで画像のようにブランチはgh-pages、ディレクトリは/(root)を指定してSaveボタンを押してください。
あとは、https://{ユーザ名}.github.io/{リポジトリ名}にアクセスして確認して表示されていることを確認してください。
これで完了です！お疲れ様でした！
参考文献
qiita.com - GitHub ActionsでGitHub Pagesにデプロイする時に参考にしました
最後に
手順はブログの記事にすごいしやすかった！Node.jsのアドベントカレンダーで書いた記事は、何を書いてもこの情報いるかな？と悩みながら書いたのでこっちはすごい楽でした。
私の話になってしまうんですが、実は私のサイトもSnowpack + Svelte + Typescript + GitHub Pagesを使って作っています。（もしこの記事の通りにやって上手にいかなければ参考にしてみてください。）
このサイトを作った最初期は、Parcelを使っていました。ですが、当時のParcelでは、Svelteに合わせたパッケージの自動インストールなどの挙動が上手くに動作してくれずあまり使い勝手が良くなかったので、Snowpackに載せ替えました。
今後を考えると良い選択だったかなと思っています。
SvelteKitの開発にSnowpackのチームが関わっていてSnowpackを使っているとのことなので、両者の今後に期待です。
