見出し画像
Photo by makari_5108010

【IT】Cloudflare Pages へのデプロイ手順（PWA + 手動 Service Worker 登録）

T A｜ITインフラ／写真と言葉／英語童話

皆さま
こんにちは

本日は、作成したWebアプリを
Cloudflare Pagesへデプロイします。

今回の環境は、
PC：MacBook Air（M1)
フレームワーク：SvelteKit V5

前回のアプリケーションのPWA化は、以下を参照ください。

・第１回目：事前準備編

・第２回目：SvelteKitの設定編

・第３回目：動作確認（ローカル、ディプロイ）編


以下の手順では、`vite-plugin-pwa` の自動挿入フックが SvelteKit 環境で動かないことを踏まえ、手動で `registerSW.js` を読み込む方式を採用します。

1. 前提条件

  • SvelteKit プロジェクトで `@sveltejs/adapter-static` を使用

  • PWA は `vite-plugin-pwa (generateSW)` で設定済み

  • GitHub リポジトリ用意済み

  • Cloudflare アカウント作成済み

2. GitHub リポジトリへの Push

GitHubのリポジトリへ対象のアプリをPushします。
※ 既に Push 済みならスキップください。

git init
git add .
git commit -m "Deploy to Cloudflare Pages"
git remote add origin https://github.com/<あなたのユーザー名>/<リポジトリ名>.git
git push -u origin main

3. SvelteKit & VitePWA 設定

以下の設定ファイルを編集して修正します。

3.1 `svelte.config.js`

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

export default {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter({ fallback: 'index.html' }),
    prerender: { entries: ['*'] }
  }
};

3.2 `vite.config.ts`

import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
    VitePWA({
      strategies: 'generateSW',
      registerType: 'prompt',       
      injectRegister: 'script',     
      devOptions: {
        enabled: true
      },
      includeAssets: [
        'icons/icon-192.png',
        'icons/icon-512.png',
        'screenshots/screen1.png',
        'screenshots/screen2.png'
      ],
      manifest: {
        name: 'アプリ 使用記録',
        short_name: 'Apri',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#0f766e',
        lang: 'ja',
        icons: [
          {
            src: '/icons/icon-192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: '/icons/icon-512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ],
        screenshots: [
          {
            src: '/screenshots/screen1.png',
            sizes: '540x720',
            type: 'image/png',
            form_factor: 'wide'
          },
          {
            src: '/screenshots/screen2.png',
            sizes: '1280x720',
            type: 'image/png',
            form_factor: 'narrow'
          }
        ]
      },
      workbox: {
        globPatterns: ['**/*.{js,css,ico,png,svg,json,webmanifest}'],
        navigateFallback: undefined,
        runtimeCaching: [
          {
            urlPattern: /^\/$/,
            handler: 'NetworkFirst'
          },
          {
            urlPattern: /\.(?:png|jpg|jpeg|svg|webp|gif|ico)$/,
            handler: 'CacheFirst'
          }
        ]
      }
    })
  ],
  build: {
    cssCodeSplit: true,
    rollupOptions: {
      output: {
        manualChunks(id) {
          // node_modules以下はまとめて 'vendor' chunk に
          if (id.includes('node_modules')) {
            return 'vendor';
          }
          // Tailwind や Chart.js のスタイルは 'libs' chunk に
          if (id.includes('tailwind') || id.includes('chart.js')) {
            return 'libs';
          }
          // その他はデフォルトの分割に任せる
        }
      }
    }
  },
  esbuild: {
    logOverride: { 'this-is-undefined-in-esm': 'silent' }
  }
});

3.3. 必要ファイルインストール

以下のファイルのインストールを行います。
※実施済みの場合はスキップください。
 (low severity vulnerabilitiesは、今回はリスク低として対応は見送ります）

$ npm install vite-plugin-pwa --save-dev

npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead

added 383 packages, and audited 461 packages in 9s

111 packages are looking for funding
  run `npm fund` for details

3 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
$ npm install -D @sveltejs/adapter-vercel

up to date, audited 518 packages in 1s

123 packages are looking for funding
  run `npm fund` for details

5 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

4. `registerSW.js` の役割

  • Service Worker本体（`sw.js`）を登録するブートストラップスクリプト

  • `skipWaiting()` / `clients.claim()` による 自動更新制御 を含む

  • オフライン対応や更新通知を簡単に扱える

5. 手動で `registerSW.js` を読み込む方法

自動挿入が効かない場合は、必ず下記のように `src/app.html` に 手動で `<script>` タグを追加します。
※今回h、自動挿入が出来ませんでしたので手動で追加してます。

<!doctype html>
<html lang="ja">
  <head>
    %sveltekit.head%
    <title>アプリ使用記録</title>
  </head>
  <body data-sveltekit-preload-data="hover">
    %sveltekit.body%

    <!-- ← ここを手動で追加 -->
    <script type="module" src="/registerSW.js" defer></script>
  </body>
</html>

  • これで必ず `registerSW.js` が読み込まれ、ブラウザ上で Service Worker の登録が走ります。

6. Cloudflare Pages プロジェクト作成

6.1.プロジェクト作成

Cloudflare ダッシュボード→「Workers & Pages」を選択し、「作成」をクリックします。

6.2. GitHub連携

Pagesを選択し、「既存の Git リポジトリをインポートする」の「始める」をクリックします。
※「Cloudflare Workers を使用することをお勧めします。」とありますが、
今回は、単純なページとなりなりますのでPagesを利用します。

6.3. 対象のレポジトリを選択

今回は、GitHubを使用しまうので選択し、対象のリポジトリを選択し、
「セットアップ開始」をクリックします。

6.4. ビルド & デプロイ設定

以下を設定し、「保存してデプロイする」をクリックします。

・フレームワーク プリセット：　SvelteKit
・ビルド コマンド：　npm ci && npm run build
・ビルド出力ディレクトリ：　build
注意: デフォルトの .svelte-kit/cloudflare ではなく build を指定

6.5. デプロイ確認

”成功しました”のメッセージを確認して「プロジェクトに進む」をクリックします。

6.6. ドメイン名の確認

自動デイプロイが有効であることドメイン名を確認します。

7. 初回デプロイ & 動作確認

7.1. アプケーションへのアクセス

`https://ドメイン名` にアクセスできるか確認します。
次に開発者ツールを開いて「アプリケーション」ー「Service workers」が表示されwているか確認します。
※ドメイン名は、6.6で確認したどメイン名です。

7.2. registerSW.jsの確認

DevTools → Network → `/registerSW.js` が 200 で取得されるか確認します。

7.3. オフラインモードでページ表示

「アプケーション」ー「Service workers」で「オフライン」を選択して
ページが表示されるか確認します。

8. （任意）カスタムドメイン設定

※ドメインを自身でお持ちの方のみ実施できます。

  1. Pages プロジェクト画面 → Custom domains

  2. ドメインを追加 → CNAME レコードを設定

  3. SSL 証明書は自動発行


では

いいなと思ったら応援しよう！