Svelte入門：SvelteKitでの静的サイト生成 -Vol.3-

スポンサーリンク
Svelte入門：SvelteKitでの静的サイト生成 -Vol.3- 用語解説
Svelte入門：SvelteKitでの静的サイト生成 -Vol.3-
この記事は約10分で読めます。
よっしー
よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでの静的サイト生成について解説しています。

スポンサーリンク

背景

SvelteKitでの静的サイト生成 について調査する機会がありましたので、その時の内容を備忘として記事に残しました。

GitHub Pages

GitHub Pagesで構築する際、あなたのリポジトリ名が your-username.github.io と同じでない場合、config.kit.paths.base をあなたのリポジトリ名に合わせて更新することを確認してください。これは、サイトがルートではなく https://your-username.github.io/your-repo-name から提供されるためです。

また、GitHub Pagesによって表示されるデフォルトの404ページを置き換えるために、フォールバックの 404.html ページを生成することも望ましいでしょう。

GitHub Pages用の設定は以下のようになるかもしれません：

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			fallback: '404.html'
		}),
		paths: {
			base: process.argv.includes('dev') ? '' : process.env.BASE_PATH
		}
	}
};

export default config;

解説

上記のコードは SvelteKit プロジェクトの設定を定義しており、静的サイト生成とベースパスの設定に焦点を当てています。

このコードの主な要素と目的を解説します：

  1. import adapter from '@sveltejs/adapter-static';
  • 静的サイトジェネレーション用のアダプターをインポートしています。
  1. /** @type {import('@sveltejs/kit').Config} */
  • TypeScript の型注釈コメントです。config オブジェクトが SvelteKit の Config 型に準拠することを示しています。
  1. adapter: adapter({ fallback: '404.html' })
  • 静的サイトアダプターを設定しています。
  • fallback: '404.html' は、存在しないルートにアクセスした際に表示される 404 ページを指定しています。
  1. paths: { base: process.argv.includes('dev') ? '' : process.env.BASE_PATH }
  • アプリケーションのベースパスを設定しています。
  • 開発モード（dev）の場合はベースパスを空文字列に、それ以外の場合は環境変数 BASE_PATH の値を使用します。

この設定の意味と影響：

  1. 静的サイト生成：
  • @sveltejs/adapter-static を使用することで、アプリケーションは完全に静的なサイトとしてビルドされます。
  1. フォールバックページ：
  • fallback: '404.html' の設定により、存在しないルートへのアクセスは全て 404.html にリダイレクトされます。
  • これは特に SPA（シングルページアプリケーション）モードで重要です。
  1. 動的ベースパス：
  • 開発環境と本番環境で異なるベースパスを使用できるようになっています。
  • 開発時（npm run dev など）はベースパスが空になります。
  • 本番環境では BASE_PATH 環境変数の値がベースパスとして使用されます。

注意点と考慮事項：

  1. 環境変数：
  • BASE_PATH 環境変数が適切に設定されていることを確認する必要があります。
  • この設定は、アプリケーションがサブディレクトリにデプロイされる場合に特に有用です。
  1. 404 ページ：
  • 404.html ファイルを作成し、適切な内容を記述する必要があります。
  1. SPA モード：
  • この設定は、静的サイトをSPAとして機能させることができます。すべてのルートが 404.html にフォールバックするため、クライアントサイドのルーティングが可能になります。
  1. ビルドプロセス：
  • 本番ビルド時に BASE_PATH が正しく設定されていることを確認してください。
  1. 開発と本番の一貫性：
  • 開発環境と本番環境でベースパスが異なる場合、一部の機能（特に絶対パスを使用するもの）で問題が発生する可能性があります。十分なテストが必要です。
  1. 静的アセット：
  • ベースパスが変更される場合、静的アセット（画像、CSS、JavaScriptファイルなど）の参照パスにも注意が必要です。

この設定は、静的サイトとして配信される SvelteKit アプリケーションに適しており、特に異なる環境（開発/本番）や、サブディレクトリへのデプロイを考慮しているプロジェクトに有用です。ただし、アプリケーションの具体的な要件に応じて、これらの設定を適切に調整する必要があるかもしれません。

GitHub アクション

GitHub アクションを使用すると、変更を加えたときにサイトを GitHub Pages に自動的にデプロイできます。ワークフローの例を次に示します。

// .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: 'main'

jobs:
  build_site:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # 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@v3
      #   with:
      #     version: 8

      - name: Install Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          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@v3
        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@v4

解説

上記のコードは GitHub Actions のワークフロー設定で、SvelteKit アプリケーションを GitHub Pages にデプロイするための自動化プロセスを定義しています。

このワークフローの主な要素と目的を解説します：

  1. トリガー：
  • on: セクションで、main ブランチへのプッシュ時にワークフローが実行されるよう設定されています。
  1. ジョブ：
  • build_site: サイトのビルドを行います。
  • deploy: ビルドされたサイトをデプロイします。
  1. build_site ジョブの主なステップ：
  • リポジトリのチェックアウト
  • Node.js のセットアップ（バージョン 20）
  • 依存関係のインストール
  • アプリケーションのビルド
  • ビルド成果物のアップロード
  1. 環境変数：
  • BASE_PATH: '/${{ github.event.repository.name }}'
    • これにより、GitHub Pages のサブディレクトリにデプロイする際のベースパスが設定されます。
  1. deploy ジョブ：
  • build_site ジョブの完了を待ちます（needs: build_site）。
  • GitHub Pages へのデプロイ権限を設定します。
  • 環境を github-pages に設定し、デプロイ URL を出力します。
  • actions/deploy-pages@v4 アクションを使用してデプロイを実行します。

注意点と考慮事項：

  1. Node.js バージョン：
  • Node.js 20 を使用していますが、プロジェクトの要件に応じて調整が必要かもしれません。
  1. キャッシュ：
  • npm のキャッシュを使用して、ビルド時間を短縮しています。
  1. ベースパス：
  • BASE_PATH 環境変数を使用して、GitHub Pages のサブディレクトリデプロイに対応しています。
  1. ビルド成果物：
  • build/ ディレクトリの内容をアップロードしています。これは adapter-static の設定と一致している必要があります。
  1. 権限：
  • GitHub Pages へのデプロイに必要な最小限の権限を設定しています。
  1. 環境：
  • github-pages 環境を使用し、デプロイ URL を動的に取得しています。
  1. pnpm コメント：
  • pnpm を使用する場合のステップが
    コメントアウトされています。必要に応じて有効化できます。

このワークフローは、SvelteKit アプリケーションを GitHub Pages に自動的にデプロイするための効率的な設定です。main ブランチへの変更がプッシュされるたびに、アプリケーションが自動的にビルドされ、デプロイされます。ただし、プロジェクトの具体的な要件（例：テストの実行、環境変数の設定、カスタムドメインの使用など）に応じて、このワークフローをさらにカスタマイズする必要があるかもしれません。

GitHub アクションを使用してサイトをデプロイしていない場合 (たとえば、ビルドしたサイトを独自のリポジトリにプッシュしている場合)、静的ディレクトリに空の .nojekyll ファイルを追加して、Jekyll が干渉しないようにします。

おわりに

今日は、 SvelteKitでの静的サイト生成について解説しました。

よっしー
よっしー

何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。

それでは、また明日お会いしましょう(^^)

コメント

タイトルとURLをコピーしました