静的サイトの展開

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

デフォルトのビルド出力場所（ dist ）を使用しています。この場所はbuild.outDirを使用して変更できます。その場合、これらのガイドから指示を外挿できます。
NPMを使用しています。糸または他のパッケージマネージャーを使用している場合、同等のコマンドを使用してスクリプトを実行できます。
Viteはプロジェクトのローカル開発依存関係としてインストールされており、次のNPMスクリプトをセットアップしています。

package.json

json

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

vite preview 、ビルドをローカルでプレビューすることを目的としていることに注意することが重要です。

NOTE

これらのガイドは、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のファイルを提供するローカルStatic Webサーバーを起動します。これは、お近くの環境で生産ビルドが問題ないかどうかを確認する簡単な方法です。

引数として--portフラグを渡すことにより、サーバーのポートを構成できます。

package.json

json

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

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

githubページ

正しいbase vite.config.jsに設定します。
https://<USERNAME>.github.io/に展開する場合、またはGitHubページを介してカスタムドメインに展開する場合（例: www.example.com ）、 base '/'設定します。または、デフォルトで'/'になるため、構成からbase削除できます。
https://<USERNAME>.github.io/<REPO>/に展開する場合（例えば、リポジトリがhttps://github.com/<USERNAME>/<REPO>である）、 base '/<REPO>/'設定します。

リポジトリ設定ページのgithubページの構成に移動し、展開のソースを「githubアクション」として選択すると、プロジェクトを構築および展開するワークフローを作成します。

yml

# GitHubページに静的コンテンツを展開するための簡単なワークフロー
name: Deploy static content to Pages

on:
  # デフォルトのブランチをターゲットにするプッシュで実行されます
  push:
    branches: ['main']

  # [アクション]タブからこのワークフローを手動で実行できます
  workflow_dispatch:

# github_tokenアクセス許可を設定して、githubページへの展開を許可します
permissions:
  contents: read
  pages: write
  id-token: write

# 1つの同時展開を許可します
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # 単一の展開ジョブは展開しているだけなので
  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:
          # DISTフォルダーをアップロードします
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

gitlabページとgitlab ci

正しいbase vite.config.jsに設定します。
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

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

# Netlifyで新しいサイトを作成します
$ ntl init

# 一意のプレビューURLに展開します
$ ntl deploy

Netlify CLIは、検査するプレビューURLを共有します。生産に入る準備ができたら、 prodフラグを使用してください。

bash

# サイトを生産に展開します
$ ntl deploy --prod

gitでネットライフします

コードをgitリポジトリ（github、gitlab、bitbucket、azure devops）にプッシュします。
プロジェクトをインポートしてnetlifyにインポートします。
該当する場合は、ブランチ、出力ディレクトリ、および環境変数のセットアップを選択します。
**[展開]**をクリックします。
Viteアプリが展開されています！

プロジェクトがインポートおよび展開された後、プルリクエストとともにプロダクションブランチ以外の支店へのその後のすべてのプッシュはプレビュー展開を生成し、生産ブランチ（一般に「メイン」）に行われたすべての変更により、生産展開が行われます。

ヴェルセル

VercelCli

VercelCLIをインストールし、 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 ）

プロジェクトがインポートおよび展開された後、ブランチへのその後のすべてのプッシュはプレビュー展開を生成し、生産ブランチ（一般的に「メイン」）に行われたすべての変更により、生産展開が行われます。

VercelのGit Integrationの詳細をご覧ください。

CloudFlareページ

Wrangler経由のCloudFlareページ

ラングラーCLIをインストールします。
wrangler login使用して、クラウドフレーアカウントでラングラーを認証します。
ビルドコマンドを実行します。
npx wrangler pages deploy distを使用して展開します。

bash

# ラングラーCLIをインストールします
$ npm install -g wrangler

# CLIからCloudFlareアカウントにログインします
$ wrangler login

# ビルドコマンドを実行します
$ npm run build

# 新しい展開を作成します
$ npx wrangler pages deploy dist

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

gitを使用したCloudflareページ

コードをgitリポジトリ（github、gitlab）にプッシュします。
CloudFlareダッシュボードにログインし、アカウントホーム>ページでアカウントを選択します。
[新しいプロジェクトとConnect Gitオプションの作成]を選択します。
展開するgitプロジェクトを選択し、 [セットアップの開始]をクリックします
選択したViteフレームワークに応じて、ビルド設定で対応するフレームワークプリセットを選択します。
その後、保存して展開します！
アプリケーションが展開されています！（例https://<PROJECTNAME>.pages.dev/ ）

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

また、カスタムドメインを追加して、ページのカスタムビルド設定を処理することもできます。 CloudFlareページGit Integrationの詳細をご覧ください。

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を使用して展開します。

うねり

まだ不明であれば、最初にサージをインストールしてください。
npm run build実行します。
surge distを入力してサージに展開します。

surge dist yourdomain.comを追加して、カスタムドメインに展開することもできます。

Azure Static Webアプリ

Microsoft Azure Static Web Appsサービスを使用して、Viteアプリをすばやく展開できます。あなたが必要です:

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

VSコードに拡張機能をインストールし、アプリルートに移動します。 Static Webアプリの拡張機能を開き、Azureにサインインし、「+」サインをクリックして新しいStatic Webアプリを作成します。使用するサブスクリプションキーを指定するように求められます。

拡張機能から開始されたウィザードをフォローして、アプリに名前を付け、フレームワークプリセットを選択し、アプリルート（通常/ ）を指定し、ファイルの場所/dist作成します。ウィザードは実行され、 .githubフォルダーのリポジトリにGitHubアクションが作成されます。

アクションは、アプリを展開するために機能し（リポジトリのアクションタブでその進行状況をご覧ください）、正常に完了すると、githubアクションが実行されたときに表示される[Webサイトを参照]ボタンをクリックして、拡張機能の進行状況ウィンドウで提供されるアドレスでアプリを表示できます。

与える

レンダリング上の静的サイトとしてViteアプリを展開できます。

レンダリングアカウントを作成します。
ダッシュボードで、[新しい]ボタンをクリックして、静的サイトを選択します。
github/gitlabアカウントを接続するか、パブリックリポジトリを使用します。
プロジェクト名とブランチを指定します。
- ビルドコマンド: npm install && npm run build
- ディレクトリの公開: dist
[静的サイトの作成]をクリックします。
アプリはhttps://<PROJECTNAME>.onrender.com/に展開する必要があります。

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

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

FlightControl

これらの指示に従って、 FlightControlを使用して静的サイトを展開します。

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

これらの指示に従って、 Kinstaを使用して静的サイトを展開します。

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

このガイドに従ってXmitを使用して静的サイトを展開します。

静的サイトの展開 ​

アプリの構築 ​

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

githubページ ​

gitlabページとgitlab ci ​

netlify ​

netlify cli ​

gitでネットライフします ​

ヴェルセル ​

VercelCli ​

gitのvercel ​

CloudFlareページ ​

Wrangler経由のCloudFlareページ ​

gitを使用したCloudflareページ ​

Google Firebase ​

うねり ​

Azure Static Webアプリ ​

与える ​

FlightControl ​

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

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

静的サイトの展開

アプリの構築

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

githubページ

gitlabページとgitlab ci

netlify

netlify cli

gitでネットライフします

ヴェルセル

VercelCli

gitのvercel

CloudFlareページ

Wrangler経由のCloudFlareページ

gitを使用したCloudflareページ

Google Firebase

うねり

Azure Static Webアプリ

与える

FlightControl

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

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