静的サイトのデプロイ

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

デフォルトのビルド出力場所（dist）を使用している。この場所はbuild.outDir を使用して変更できます。その場合でも、これらのガイドから手順を読み取ることができます。
npm を使用している。Yarn やその他のパッケージマネージャーを使用している場合は、同等のコマンドでスクリプトを実行できます。
Vite がプロジェクトのローカル開発依存関係としてインストールされており、以下の 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 からのファイルを https://:4173 で提供するローカルの静的ウェブサーバーを起動します。これは、本番ビルドがローカル環境で問題ないかを確認する簡単な方法です。

--port フラグを引数として渡すことで、サーバーのポートを設定できます。

package.json

json

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

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

GitHub Pages

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 設定に移動し、デプロイ元として「GitHub Actions」を選択します。これにより、プロジェクトをビルドしてデプロイするワークフローを作成するよう促されます。npm を使用して依存関係をインストールしてビルドするサンプルワークフローが提供されています。

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@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        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@v3
        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

Netlify CLI をインストールします。
ntl init を使用して新しいサイトを作成します。
ntl deploy を使用してデプロイします。

bash

# Install the Netlify CLI
$ npm install -g netlify-cli

# Create a new site in Netlify
$ ntl init

# Deploy to a unique preview URL
$ ntl deploy

Netlify CLI はプレビュー URL を共有し、確認できます。本番環境に移行する準備ができたら、prod フラグを使用します。

bash

# Deploy the site into production
$ ntl deploy --prod

Git を使用した Netlify

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

プロジェクトがインポートされデプロイされた後、本番ブランチ以外のブランチへのその後のプッシュおよびプルリクエストは、プレビューデプロイを生成し、本番ブランチ（一般的に「main」）へのすべての変更は、本番デプロイをもたらします。

Vercel

Vercel CLI

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

bash

$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

Git 用 Vercel

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

プロジェクトがインポートされデプロイされた後、ブランチへのその後のプッシュはすべてプレビューデプロイを生成し、本番ブランチ (一般的に「main」) へのすべての変更は本番デプロイとなります。

Vercel のGit 統合の詳細については、こちらをご覧ください。

Cloudflare Pages

Wrangler 経由の Cloudflare Pages

Wrangler CLI をインストールします。
wrangler login を使用して Wrangler を Cloudflare アカウントで認証します。
ビルドコマンドを実行します。
npx wrangler pages deploy dist を使用してデプロイします。

bash

# Install Wrangler CLI
$ npm install -g wrangler

# Login to Cloudflare account from CLI
$ wrangler login

# Run your build command
$ npm run build

# Create new deployment
$ npx wrangler pages deploy dist

アセットのアップロード後、Wrangler はサイトを検査するためのプレビュー URL を提供します。Cloudflare Pages ダッシュボードにログインすると、新しいプロジェクトが表示されます。

Git を使用した Cloudflare Pages

コードを Git リポジトリ (GitHub、GitLab) にプッシュします。
Cloudflare ダッシュボードにログインし、Account Home > Pages でアカウントを選択します。
Create a new Project を選択し、Connect Git オプションを選択します。
デプロイしたい Git プロジェクトを選択し、Begin setup をクリックします。
ビルド設定で、選択した Vite フレームワークに応じて対応するフレームワークプリセットを選択します。
次に保存してデプロイします！
アプリケーションがデプロイされました！（例：https://<PROJECTNAME>.pages.dev/）

プロジェクトがインポートおよびデプロイされた後、ブランチへのその後のプッシュはすべてプレビューデプロイを生成します（ブランチビルドコントロールで指定されていない限り）。本番ブランチ（一般的に「main」）へのすべての変更は本番デプロイとなります。

カスタムドメインを追加したり、Pages でカスタムビルド設定を処理したりすることもできます。Cloudflare Pages Git 統合の詳細については、こちらをご覧ください。

Google Firebase

firebase-tools がインストールされていることを確認します。

プロジェクトのルートに firebase.json と .firebaserc を以下の内容で作成します。

firebase.json

json

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

.firebaserc

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

npm run build を実行した後、firebase deploy コマンドを使用してデプロイします。

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/ にデプロイされるはずです。

デフォルトでは、指定されたブランチにプッシュされた新しいコミットは自動的に新しいデプロイをトリガーします。自動デプロイはプロジェクト設定で設定できます。

プロジェクトにカスタムドメインを追加することもできます。

Flightcontrol

これらの手順に従って、Flightcontrol を使用して静的サイトをデプロイします。

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

これらの手順に従って、Kinsta を使用して静的サイトをデプロイします。

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

このガイドに従って、xmit を使用して静的サイトをデプロイします。

静的サイトのデプロイ ​

アプリケーションのビルド ​

アプリケーションをローカルでテストする ​

GitHub Pages ​

GitLab Pages および GitLab CI ​

Netlify ​

Netlify CLI ​

Git を使用した Netlify ​

Vercel ​

Vercel CLI ​

Git 用 Vercel ​

Cloudflare Pages ​

Wrangler 経由の Cloudflare Pages ​

Git を使用した Cloudflare Pages ​

Google Firebase ​

Surge ​

Azure Static Web Apps ​

Render ​

Flightcontrol ​

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

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

静的サイトのデプロイ

アプリケーションのビルド

アプリケーションをローカルでテストする

GitHub Pages

GitLab Pages および GitLab CI

Netlify

Netlify CLI

Git を使用した Netlify

Vercel

Vercel CLI

Git 用 Vercel

Cloudflare Pages

Wrangler 経由の Cloudflare Pages

Git を使用した Cloudflare Pages

Google Firebase

Surge

Azure Static Web Apps

Render

Flightcontrol

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

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