Skip to main content

ビルドとデプロイ

Static site generation

Edit this page on GitHub

SvelteKit を static site generator (SSG) として使用するには、adapter-static を使用します。

この adapter はサイト全体を静的なファイルのコレクションとしてプリレンダリングします。もし、一部のページのみをプリレンダリングして他のページは動的にサーバーでレンダリングしたい場合、別の adapter と prerender オプション を組み合わせて使用する必要があります。

使い方

npm i -D @sveltejs/adapter-static を実行してインストールし、svelte.config.js にこの adapter を追加します:

svelte.config.js
ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
export default {
kit: {
adapter: adapter({
// default options are shown. On some platforms
// these options are set automatically — see below
pages: 'build',
assets: 'build',
fallback: undefined,
precompress: false,
strict: true
})
}
};

…そして prerender オプションを最上位のレイアウト(root layout)に追加します:

src/routes/+layout.js
ts
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;
src/routes/+layout.ts
ts
// This can be false if you're using a fallback (i.e. SPA mode)
export const prerender = true;

SvelteKit の trailingSlash オプションを、あなたの環境に対して適切に設定しなければなりません。もしあなたのホスト環境が、/a へのリクエストを受け取ったときに /a.html をレンダリングしない場合、/a/index.html を作成するために最上位のレイアウト(root layout)で trailingSlash: 'always' を設定する必要があります。

ゼロコンフィグサポート

ゼロコンフィグサポートがあるプラットフォームもあります (将来増える予定):

これらのプラットフォームでは、adapter のオプションを省略することで、adapter-static が最適な設定を提供できるようになります:

svelte.config.js
export default {
	kit: {
		adapter: adapter({...})
		adapter: adapter()
	}
};

Options

pages

プリレンダリングされたページを書き込むディレクトリです。デフォルトは build です。

assets

静的なアセット (static のコンテンツと、SvelteKit が生成するクライアントサイドの JS と CSS) を書き込むディレクトリです。通常は pages と同じにするべきで、デフォルトでは、それがどんな値だったとしても、pages の値になります。しかし、まれな状況では、出力されるページとアセットを別々の場所にする必要があるかもしれません。

fallback

SPA モード向けにフォールバックページ(fallback page)を指定します。例えば、index.html200.html404.html などです。

precompress

true の場合、brotli や gzip でファイルを事前圧縮(precompress)します。これによって .br ファイルや .gz ファイルが生成されます。

strict

デフォルトでは adapter-static は、アプリの全てのページとエンドポイント (もしあれば) がプリレンダリングされているか、もしくは fallback オプションが設定されているかをチェックします。このチェックは、アプリの一部が最終的な出力に含まれずアクセスできない状態なのに誤って公開されてしまうのを防ぐために存在します。もし、それでも良いことがわかっている場合 (例えばあるページが条件付きでしか存在しない場合)、strictfalse に設定してこのチェックをオフにすることができます。

GitHub Pages

GitHub Pages 向けにビルドするとき、あなたのリポジトリの名前が your-username.github.io と異なる場合は、config.kit.paths.base をあなたのリポジトリの名前に更新してください。サイトが root からではなく https://your-username.github.io/your-repo-name から提供されるためです。

GitHub Pages が提供するデフォルトの 404 ページを置き換えるためにフォールバック用の 404.html ページを生成することもあるでしょう。

GitHub Pages 向けの設定は以下のようになるでしょう:

svelte.config.js
ts
import adapter from '@sveltejs/adapter-static';
Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-static' or its corresponding type declarations.
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter({
fallback: '404.html'
}),
paths: {
base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'. Type 'string' is not assignable to type '"" | `/${string}` | undefined'.2322Type 'string | undefined' is not assignable to type '"" | `/${string}` | undefined'. Type 'string' is not assignable to type '"" | `/${string}` | undefined'.
}
}
};
export default config;

GitHub actions を使用して、サイトが変更されたときに自動で GitHub Pages にデプロイすることができます。サンプルの workflow はこちらです:

.github/workflows/deploy.yml
yaml
name: Deploy to GitHub Pages
on:
push:
branches: 'main'
jobs:
build_site:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
# If you're using pnpm, add this step then change the commands and cache key below to use `pnpm`
# - name: Install pnpm
# uses: pnpm/action-setup@v2
# with:
# version: 8
- name: Install Node.js
uses: actions/setup-node@v3
with:
node-version: 18
cache: npm
- name: Install dependencies
run: npm install
- name: build
env:
BASE_PATH: '/${{ github.event.repository.name }}'
run: |
npm run build
- name: Upload Artifacts
uses: actions/upload-pages-artifact@v2
with:
# this should match the `pages` option in your adapter-static options
path: 'build/'
deploy:
needs: build_site
runs-on: ubuntu-latest
permissions:
pages: write
id-token: write
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy
id: deployment
uses: actions/deploy-pages@v2