静的サイトのデプロイ

以下のガイドは、いくつかの共通の前提に基づいています:

デフォルトのビルド出力場所（dist）を使用します。この場所は build.outDir で変更することができますので、その場合はこれらのガイドを読み替えてください。
npm を使用します。Yarn や他のパッケージマネージャーを使用している場合は、同等のコマンドを使用してスクリプトを実行できます。
Vite はプロジェクト内のローカルな dev dependency としてインストールされており、以下の npm スクリプトを設定しています。

package.json

json

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

vite preview は、ローカルでビルドをプレビューするためのもので、本番用のサーバーとしては使えないことに注意してください。

注意

このガイドは、Vite で静的サイトをデプロイするための手順を提供します。Vite は、サーバーサイドレンダリング（SSR）もサポートしています。SSR とは、Node.js で同じアプリケーションを実行し、それを HTML にプリレンダリングし、最終的にクライアント上でハイドレートすることをサポートするフロントエンドフレームワークを指します。この機能については、SSR ガイドをご覧ください。一方、従来のサーバーサイドフレームワークとの統合を探している場合は、代わりにバックエンドとの統合ガイドをチェックしてください。

アプリのビルド

アプリをビルドするために、npm run build コマンドを実行します。

bash

$ npm run build

デフォルトでは、ビルド結果は dist に置かれます。この dist フォルダーを、お好みのプラットフォームにデプロイします。

アプリをローカルでテストする

アプリをビルドしたら、npm run preview コマンドを実行し、ローカルでテストします。

bash

$ npm run preview

vite preview コマンドは、ローカルで静的なウェブサーバーを起動し、dist のファイルを http://localhost:4173 で配信します。これは、プロダクションビルドが問題ないかどうかを自分のローカル環境で確認する簡単な方法です。

サーバーのポートを設定するには、引数に --port フラグを指定します。

package.json

json

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

これで、preview コマンドは http://localhost:8080 でサーバーを起動します。

GitHub Pages

Vite の設定を更新
vite.config.js で base を正しく設定してください。
https://<USERNAME>.github.io/ や、GitHub Pages 経由のカスタムドメイン（例 www.example.com）にデプロイする場合、base を '/' に設定します。デフォルトは '/' なので、設定から base を削除することもできます。
https://<USERNAME>.github.io/<REPO>/ にデプロイする場合（例: リポジトリーは https://github.com/<USERNAME>/<REPO>）、base を '/<REPO>/' と設定してください。
GitHub Pages を有効化
リポジトリーで Settings → Pages に移動します。Build and deployment の下にある Source ドロップダウンを開き、GitHub Actions を選択します。
Vite はデプロイにビルドステップが必要なため、GitHub は GitHub Actions のワークフローを使用してサイトをデプロイするようになります。

ワークフローを作成

リポジトリーの .github/workflows/deploy.yml に新しいファイルを作成します。前のステップから "create your own" をクリックすることもでき、その場合はスターターワークフローファイルが生成されます。

以下は、npm で依存関係をインストールし、サイトをビルドして、main ブランチに変更をプッシュするたびにデプロイするサンプルワークフローです:

.github/workflows/deploy.yml

yaml

# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ['main']

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow one concurrent deployment
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      - name: Set up Node
        uses: actions/setup-node@v6
        with:
          node-version: lts/*
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v4
        with:
          # Upload dist folder
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

GitLab Pages と GitLab CI

vite.config.js で base を正しく設定してください。
https://<USERNAME or GROUP>.gitlab.io/ にデプロイする場合、base はデフォルトで '/' となるのでこれを省略できます。
https://<USERNAME or GROUP>.gitlab.io/<REPO>/ にデプロイする場合、例えばリポジトリーが https://gitlab.com/<USERNAME>/<REPO> にあるなら、base を '/<REPO>/' と設定してください。

プロジェクトルートに、.gitlab-ci.yml という名前でファイルを作成し、以下のように記述してください。これで、コンテンツを変更するたびにサイトのビルドとデプロイが行われます:

.gitlab-ci.yml

yaml

image: node:lts
pages:
  stage: deploy
  cache:
    key:
      files:
        - package-lock.json
      prefix: npm
    paths:
      - node_modules/
  script:
    - npm install
    - npm run build
    - cp -a dist/. public/
  artifacts:
    paths:
      - public
  rules:
    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH

Netlify

Netlify CLI

npm install -g netlify-cli で Netlify CLI をインストールします。
netlify init で新しいサイトを作成します。
netlify deploy でデプロイします。

Netlify CLI は検査のためにプレビュー URL を共有します。本番環境への準備ができたら prod フラグを使用してください: netlify deploy --prod

Netlify with Git

コードを Git リポジトリー（GitHub, GitLab, Bitbucket, Azure DevOps）にプッシュします。
Netlify にプロジェクトをインポートします。
ブランチ、出力ディレクトリーを選び、必要に応じて環境変数を設定します。
Deploy をクリックします。
アプリケーションがデプロイされます！

プロジェクトがインポートされてデプロイされた後は、プルリクエストを伴ったプロダクションブランチ以外のブランチへのプッシュはすべてプレビューデプロイメントを生成し、プロダクションブランチ（一般には main）に加えられたすべての変更はプロダクションデプロイメントを生成することになります。

Vercel

Vercel CLI

npm i -g vercel で Vercel CLI をインストールし、vercel を実行してデプロイします。
Vercel はあなたが Vite を使用していることを検出し、あなたのデプロイメントのための正しい設定を有効にします。
アプリケーションがデプロイされます！（例: vite-vue-template.vercel.app）

Vercel with Git

コードを Git リポジトリー（GitHub, GitLab, Bitbucket）にプッシュします。
Vercel に Vite プロジェクトをインポートします。
Vercel はあなたが Vite を使用していることを検出し、あなたのデプロイメントのための正しい設定を有効にします。
アプリケーションがデプロイされます！（例: vite-vue-template.vercel.app）

プロジェクトがインポートされてデプロイされた後は、ブランチへのプッシュはすべてプレビューデプロイメントを生成し、プロダクションブランチ（一般には main）に加えられたすべての変更はプロダクションデプロイメントを生成することになります。

詳細は Vercel の Git 統合をご覧ください。

Cloudflare

Cloudflare Workers

Cloudflare Vite プラグインは Cloudflare Workers との統合を提供し、Vite の Environment API を使用して開発中に Cloudflare Workers ランタイムでサーバーサイドコードを実行します。

既存の Vite プロジェクトに Cloudflare Workers を追加するには、プラグインをインストールして設定に追加します:

bash

$ npm install --save-dev @cloudflare/vite-plugin

vite.config.js

import { defineConfig } from 'vite'
import { cloudflare } from '@cloudflare/vite-plugin'

export default defineConfig({
  plugins: [cloudflare()],
})

wrangler.jsonc

jsonc

{
  "name": "my-vite-app",
}

npm run build を実行した後、npx wrangler deploy でアプリケーションをデプロイできます。

また、Vite アプリケーションにバックエンド API を簡単に追加して、Cloudflare リソースと安全に通信することもできます。これは開発中に Workers ランタイムで実行され、フロントエンドと一緒にデプロイされます。完全なウォークスルーについては、Cloudflare Vite プラグインのチュートリアルを参照してください。

Cloudflare Pages

Cloudflare Pages with Git

Cloudflare Pages を使用すると、Wrangler ファイルを管理することなく、Cloudflare に直接デプロイできます。

git リポジトリー（GitHub、GitLab）にコードをプッシュします。
Cloudflare ダッシュボードにログインし、Account Home → Workers & Pages でアカウントを選択します。
Create a new Project と Pages オプションを選択し、Git を選択します。
デプロイしたい git プロジェクトを選択し、Begin setup をクリックします。
選択した Vite のフレームワークに基づいて、ビルド設定の対応するフレームワークプリセットを選択します。それ以外の場合は、プロジェクトのビルドコマンドと期待される出力ディレクトリーを入力します。
セーブしてデプロイします！
アプリケーションがデプロイされます！（例: https://<PROJECTNAME>.pages.dev/）

プロジェクトのインポートとデプロイ後、以降のブランチへのプッシュは branch build controls で停止しない限りプレビューデプロイを生成します。本番ブランチ（一般的には「main」）への全ての変更は本番へデプロイされます。

Pages ではカスタムドメインの追加やカスタムビルドの設定が行えます。詳しくは Cloudflare Pages Git Integration をご覧ください。

Google Firebase

npm i -g firebase-tools で firebase-tools をインストールします。

プロジェクトのルートに以下のファイルを作成します:

firebase.json.firebaserc

json

{
  "hosting": {
    "public": "dist",
    "ignore": [],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

npm run build を実行した後、firebase deploy コマンドでデプロイしてください。

Surge

npm i -g surge で surge をインストールします。
npm run build を実行します。
surge dist とタイプし、surge にデプロイします。

surge dist yourdomain.com とすることで、カスタムドメインにデプロイすることもできます。

Azure Static Web Apps

Microsoft Azure Static Web Apps サービスを使って、Vite アプリを素早くデプロイできます。必要なもの:

Azure アカウントとサブスクリプションキー。無料で Azure アカウントを作成できます。
GitHub にプッシュされたアプリのコード。
Visual Studio Code の SWA 拡張機能。

VS Code に拡張機能をインストールし、アプリのルートに移動してください。Static Web Apps 拡張機能を開き、Azure にサインインし、'+' マークをクリックして新しい Static Web App を作成してください。使用するサブスクリプションキーを指定するプロンプトが表示されます。

拡張機能が起動するウィザードに従って、アプリの名前を決め、フレームワークのプリセットを選択し、アプリのルート（通常は /）とビルドファイルの場所 /dist を指定します。ウィザードが実行されると、リポジトリーの .github フォルダーに GitHub アクションが作成されます。

このアクションが実行されると、アプリがデプロイされます（進行状況はリポジトリーの Actions タブで確認できます）。正常に完了すると、GitHub アクション実行時に表示される 'Browse Website' ボタンをクリックすることで、拡張機能の進行状況ウィンドウで指定されたアドレスでアプリを見ることができます。

Render

Renderに静的サイトとして Vite アプリをデプロイできます。

Render アカウントを作成できます。
ダッシュボートで、New ボタンをクリックし Static Site を選択します。
GitHub/GitLab アカウントを連携するかパブリックリポジトリーを利用します。
プロジェクト名とブランチを指定します。
- Build Command: npm install && npm run build
- Publish Directory: dist
Create Static Site をクリックします。アプリは https://<PROJECTNAME>.onrender.com/ にデプロイされるはずです。

デフォルトでは、指定したブランチへコミットがプッシュされると自動的に新しいデプロイを開始します。Auto-Deploy はプロジェクト設定で変更できます。

プロジェクトに custom domain も追加できます。

Flightcontrol

Flightcontrol を使用して静的サイトをデプロイする場合はこの案内に従ってください。

Kinsta 静的サイトホスティング

Kinsta を使用して静的サイトをデプロイする場合はこの案内に従ってください。

xmit 静的サイトホスティング

xmit を使用して静的サイトをデプロイする場合はこのガイドに従ってください。

Zephyr Cloud

Zephyr Cloud は、ビルドプロセスに直接統合され、モジュールフェデレーションおよびその他の種類のアプリケーションにグローバルエッジ配信を提供するデプロイメントプラットフォームです。

Zephyr は他のクラウドプロバイダーとは異なるアプローチを取っています。Vite のビルドプロセスに直接統合されるため、アプリケーションをビルドまたは開発サーバーを実行するたびに、Zephyr Cloud で自動的にデプロイされます。

開始するには、Vite デプロイガイドの手順に従ってください。

EdgeOne Pages

EdgeOne Pages を使用して静的サイトをデプロイする場合はこの手順に従ってください。

静的サイトのデプロイ ​

アプリのビルド ​

アプリをローカルでテストする ​

GitHub Pages ​

GitLab Pages と GitLab CI ​

Netlify ​

Netlify CLI ​

Netlify with Git ​

Vercel ​

Vercel CLI ​

Vercel with Git ​

Cloudflare ​

Cloudflare Workers ​

Cloudflare Pages ​

Cloudflare Pages with Git ​

Google Firebase ​

Surge ​

Azure Static Web Apps ​

Render ​

Flightcontrol ​

Kinsta 静的サイトホスティング ​

xmit 静的サイトホスティング ​

Zephyr Cloud ​

EdgeOne Pages ​

静的サイトのデプロイ

アプリのビルド

アプリをローカルでテストする

GitHub Pages

GitLab Pages と GitLab CI

Netlify

Netlify CLI

Netlify with Git

Vercel

Vercel CLI

Vercel with Git

Cloudflare

Cloudflare Workers

Cloudflare Pages

Cloudflare Pages with Git

Google Firebase

Surge

Azure Static Web Apps

Render

Flightcontrol

Kinsta 静的サイトホスティング

xmit 静的サイトホスティング

Zephyr Cloud

EdgeOne Pages