静的サイトのデプロイ

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

デフォルトのビルド出力場所（dist）を使用していること。この場所はbuild.outDirを使用して変更できます。その場合は、これらのガイドの手順を外挿できます。
npmを使用していること。Yarnや他のパッケージマネージャーを使用している場合は、同等のコマンドを使用してスクリプトを実行できます。
Viteがプロジェクトのローカル開発依存関係としてインストールされ、以下のnpmスクリプトを設定していること。

package.json

json

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

vite preview は、ローカルでビルドをプレビューするためのものであり、本番サーバーとして使用することを意図していないことに注意することが重要です。

注意

これらのガイドでは、Viteサイトの静的デプロイを実行するための手順について説明します。Viteはサーバーサイドレンダリングもサポートしています。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で提供するローカルの静的Webサーバーを起動します。本番ビルドがローカル環境で正しく表示されるかどうかを確認する簡単な方法です。

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

package.json

json

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

これで、previewコマンドはサーバーをhttp://localhost: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を使用してビルドするサンプルワークフローが提供されています。

yml

# 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: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - 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:16.5.0
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にします.
ブランチ、出力ディレクトリを選択し、該当する場合は環境変数を設定します。
**デプロイ**をクリックします。
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）にプッシュします。
Viteプロジェクトをインポート Vercelにインポートします。
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ダッシュボードにログインし、**アカウントホーム**> **ページ**でアカウントを選択します。
**新しいプロジェクトを作成**と**Gitに接続**オプションを選択します。
デプロイするgitプロジェクトを選択し、**セットアップを開始**をクリックします。
選択した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アクションが作成されます。

アクションはアプリのデプロイを実行し（リポジトリのアクションタブで進行状況を確認できます）、正常に完了すると、拡張機能の進行状況ウィンドウに表示されるアドレスで、GitHubアクションの実行後に表示される「Webサイトの参照」ボタンをクリックすることで、アプリを表示できます。

Render

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

Renderアカウントを作成します。
ダッシュボードで、**新規**ボタンをクリックし、**静的サイト**を選択します。
GitHub/GitLabアカウントを接続するか、パブリックリポジトリを使用します。
プロジェクト名とブランチを指定します。
- **ビルドコマンド**: npm install && npm run build
- **公開ディレクトリ**: dist
**静的サイトの作成**をクリックします。
アプリはhttps://<PROJECTNAME>.onrender.com/にデプロイされます。

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

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

Flightcontrol

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

Kinsta Static Site Hosting

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

xmit Static Site Hosting

このガイドに従って、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 Static Site Hosting ​

xmit Static Site Hosting ​

静的サイトのデプロイ

アプリのビルド

アプリのローカルテスト

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 Static Site Hosting

xmit Static Site Hosting