静的サイトのデプロイ

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

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

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

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

注意

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

アプリのビルド

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

$ npm run build

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

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

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

$ npm run build
$ npm run preview

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

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

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

これで、preview メソッドは http://localhost:8080 でサーバを起動します。

GitHub Pages

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

プロジェクト内で以下の内容の deploy.sh を作成し（ハイライトされた行はコメントアウトされています）、これを実行してデプロイしてください:

#!/usr/bin/env sh

# エラー時は停止
set -e

# ビルド
npm run build

# ビルド出力ディレクトリに移動
cd dist

# カスタムドメインにデプロイする場合
# echo 'www.example.com' > CNAME

git init
git checkout -b main
git add -A
git commit -m 'deploy'

# https://<USERNAME>.github.io にデプロイする場合
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main

# https://<USERNAME>.github.io/<REPO> にデプロイする場合
# git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages

cd -

TIP

また、CI の設定で上記のスクリプトを実行することで、プッシュごとの自動デプロイを有効にすることができます。

GitHub Pages と Travis CI

vite.config.js で base を正しく設定してください。
https://<USERNAME or GROUP>.github.io/ にデプロイする場合、base はデフォルトで '/' となるのでこれを省略できます。
https://<USERNAME or GROUP>.github.io/<REPO>/ にデプロイする場合、例えばリポジトリが https://github.com/<USERNAME>/<REPO> にあるなら、base を '/<REPO>/' と設定してください。
プロジェクトルートに .travis.yml という名前でファイルを作成してください。
ローカルで npm install を実行し、生成されたロックファイル（package-lock.json）をコミットしてください。

GitHub Pages のデプロイプロバイダテンプレートを使用し、Travis CI マニュアルに従ってください。

language: node_js
node_js:
  - lts/*
install:
  - npm ci
script:
  - npm run build
deploy:
  provider: pages
  skip_cleanup: true
  local_dir: dist
  # GitHub で生成されるトークンで、Travis があなたのリポジトリにコードをプッシュすることを許可します。
  # リポジトリの Travis 設定ページで、セキュア変数として設定します。
  github_token: $GITHUB_TOKEN
  keep_history: true
  on:
    branch: main

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 という名前でファイルを作成し、以下のように記述してください。これで、コンテンツを変更するたびにサイトのビルドとデプロイが行われます:

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 をインストールします。
ntl init で新しいサイトを作成します。
ntl deploy でデプロイします。

# Netlify CLI をインストール
$ npm install -g netlify-cli

# Netlify に新しいサイトを作成
$ ntl init

# ユニークなプレビュー URL にデプロイ
$ ntl deploy

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

# サイトを本番環境へデプロイ
$ ntl deploy --prod

Google Firebase

firebase-tools をインストールしていることを確認してください。

プロジェクトルートに firebase.json と .firebaserc を作成し、以下のように記述してください:

firebase.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 とすることで、カスタムドメインにデプロイすることもできます。

Heroku

Heroku CLI をインストールしてください。
サインアップして Heroku アカウントを作成してください。
heroku login を実行し、Heroku の認証情報を入力してください:
```
$ heroku login
```
プロジェクトルートに static.json という名前でファイルを作成し、以下のように記述してください:
static.json:
```
{
  "root": "./dist"
}
```
これはあなたのサイトの設定です。詳しくは heroku-buildpack-static をご覧ください。

Heroku の Git リモートを設定してください:

# バージョン更新
$ git init
$ git add .
$ git commit -m "My site ready for deployment."

# 名前を指定して新しいアプリを作成
$ heroku apps:create example

# 静的サイト用に buildpack を設定
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git

サイトをデプロイしてください:

# サイトを公開
$ git push heroku main

# ブラウザを開いて Heroku CI ダッシュボードを見る
$ heroku open

Vercel

Vercel CLI

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

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

Vercel for Git

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

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

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

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' ボタンをクリックすることで、拡張機能の進行状況ウィンドウで指定されたアドレスでアプリを見ることができます。

本番環境用のビルド

環境変数とモード

静的サイトのデプロイ #

アプリのビルド #

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

GitHub Pages #

GitHub Pages と Travis CI #

GitLab Pages と GitLab CI #

Netlify #

Google Firebase #

Surge #

Heroku #

Vercel #

Vercel CLI #

Vercel for Git #

Azure Static Web Apps #