SvelteKitプロジェクトのデプロイ方法: VercelとNetlifyの5ステップガイド

SvelteKit プロジェクト デプロイ 方法を効率的に実施する5つのステップ

SvelteKitプロジェクトのデプロイは、開発者にとって重要な工程ですが、適切な準備と手法を用いることで時間短縮やミス防止が可能です。本記事では、VercelとNetlifyの最新連携方法を中心に、カスタムドメイン設定やCI/CD自動化といった実践的な手順を解説します。読者の中には「どのプラットフォームを選ぶべきか迷っている」という声も多いですが、記事の最後で簡潔な選択肢提示も行います。

SvelteKitプロジェクト構築時の準備チェックリスト

SvelteKitプロジェクトをスムーズにデプロイするためには、構築段階での準備が不可欠です。以下に、開発環境から導入までの必須項目を整理しました。

このセクションでは、プロジェクトの健全性を確保するために押さえるべき3つのポイントを解説します。

1. プロジェクト構造とルーティング設定の確認
2. src/ディレクトリ配下の+layout.svelteやページファイルが正しく配置されているかチェック

3. ルーティングに関するroutes.jsや+page.jsの定義を検証

4. 適切なアダプターの導入

5. Vercel向けに@sveltejs/adapter-vercel、Netlify向けに@sveltejs/adapter-netlifyをインストール

6. npm install @sveltejs/adapter-<プラットフォーム>コマンドで導入

7. 環境設定ファイルの整備

8. .envファイルで秘密鍵やAPIトークンを管理
9. svelte.config.jsにkit.adapterを指定（例：adapter: require('@sveltejs/adapter-vercel')()）

ポイント：アダプターの導入タイミングは、プロジェクト初期段階に設定することを推奨します。

Vercelでのデプロイ手順（GitHub連携編）

VercelはSvelteKitプロジェクトとの連携が非常に滑らかで、Gitリポジトリと同期させることで自動ビルドが可能です。

このセクションでは、GitHubリポジトリからVercelへの連携を3ステップで解説します。

1. GitHubリポジトリの作成
2. GitHubにSvelteKitプロジェクトをプッシュ

3. リポジトリ名やブランチ設定（例：main）を明確化

4. Vercelアカウントとの連携

5. Vercel公式サイトで「New Project」を選択

6. GitHubリポジトリからプロジェクトを選択し、自動ビルドの有無を指定

7. デプロイ設定ファイルの追加

8. プロジェクトルートにvercel.jsonを作成（例：
   json
{
"build": {
"command": "npm run build",
"outputDirectory": ".svelte-kit"
}
}

9. build.outputDirectoryをSvelteKitのデフォルト出力先に設定

注意点：.envファイルはVercel上では自動読み込みされないため、vercel.jsonで環境変数を指定する必要があります。

Netlifyとの統合方法と環境変数管理

NetlifyもSvelteKitプロジェクトとの連携に最適なプラットフォームですが、独自の設定手順があります。特に環境変数の扱いは注意が必要です。

このセクションでは、Netlify CLIでの初期設定とCI/CD自動化を具体的に解説します。

1. Netlify CLIによるプロジェクト登録
2. 全局インストール：npm install netlify-cli -g
3. プロジェクトディレクトリでnetlify init実行

4. サービスアカウントの作成とリポジトリ連携

5. ビルド設定ファイルの作成（netlify.toml）
   toml
[build]
publish = ".svelte-kit"
command = "npm run build"

[[redirects]]
from = "/*"
to = "/index.html"
status = 200


1. 環境変数の管理
2. Netlifyダッシュボードで「Settings > Build & deploy > Environment variables」から設定
3. セキュアな変数はNETLIFY_ENV_VARS_SECURE=trueを指定

比較表：Vercel vs Netlifyのデプロイ特徴

CI/CDパイプラインの自動化設定

継続的インテグレーション（CI）とデプロイを連携させることで、手動作業を大幅に削減できます。GitHub Actionsはその代表的なツールです。

このセクションでは、VercelとNetlifyそれぞれ向けのワークフロー例を解説します。

1. Vercelへのデプロイワークフロー
   yaml
name: Deploy to Vercel
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm install
- run: npm run build
- name: Deploy to Vercel
uses: vercel-actions/deploy@v1.0.2
with:
token: ${{ secrets.VERCEL_TOKEN }}

2. Netlifyへのデプロイワークフロー
   yaml
name: Deploy to Netlify
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm install
- run: npm run build
- name: Deploy to Netlify
uses: netlify/actions/deploy@1.0.2
with:
auth_token: ${{ secrets.NETLIFY_AUTH_TOKEN }}

重要なポイント：ワークフローでnpm run devなど本番ビルド以外のコマンドを実行しないように注意してください。

SSL証明書申請とカスタムドメイン設定

SSL証明書は現在では必須ですが、無料ツール（例: Let's Encrypt）を使うことでコストを抑えることができます。

このセクションでは、Certbotによる自動取得手順とドメイン設定の手順を解説します。

1. Certbotのインストール
2. Ubuntuの場合：sudo apt install certbot

3. macOS（Homebrew）：brew install certbot

4. 証明書の申請と自動再発行
   bash
sudo certbot certonly --standalone -d example.com
# 自動更新設定 (cronなどに追加)
sudo crontab -e
0 3 * * * /usr/bin/certbot renew --quiet

5. Webサーバーへの導入

6. Nginxの場合：
   nginx
   server {
   listen 443 ssl;
   server_name example.com;
   ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

   1 2 3

   ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

   }


注意事項：カスタムドメインのDNS設定（Aレコードなど）は、ドメインプロバイダーの管理画面で確実に設定してください。

プロジェクトデプロイ方法選定ガイド

本記事で解説したVercelとNetlifyはそれぞれ強みを持っていますが、選択する際には以下を考慮してください：

このセクションでは、プロジェクトの目的・規模に応じた導入判断基準を整理します。

• Vercelが適しているケース
• GitHub連携やCI/CD自動化が優先

• カスタムドメイン設定が簡単な場合

• Netlifyが適しているケース

• フロントエンドプロジェクトと密接に関係するツールキットが必要な場合
• 開発環境でのセキュアな変数管理が求められる場合

比較表：デプロイプラットフォーム選定基準