# Lizard で Vite を使った Vue をデプロイする Vite でビルドした Vue アプリを、Lizard 上の静的 Web サービスとしてデプロイします。ビルドでは `dist/` が生成され、nginx がポート `80` でファイルを配信します。Nuxt のサーバーレンダリングとサーバールートについては、[Nuxt ガイド](https://lizard.build/ja/docs/framework-guides/nuxt)を使用してください。 ## プロジェクトを準備する Vue アプリのディレクトリで、`package.json`、lockfile、Vite 設定ファイルを使って実行します。TypeScript コードをチェックする場合は `vue-tsc` を含めて、scaffold の build スクリプトはそのまま維持してください。ビルドは、`dist/` に Vite バンドルを生成して完了する必要があります。 | 設定 | 値 | |---|---| | ビルド | `npm run build` | | Output | `dist/` | | Start command | 静的検出パスでは不要 | | サービスポート | `80` | ドメインのルートでサイトを公開する場合は、`base: '/'` を維持してください。パスプレフィックスを使う場合は、Vite の base を router の base およびアプリが実際に動作する URL に合わせてください。出力ディレクトリをカスタマイズする場合は、そのディレクトリをコピーする Dockerfile が必要です。 ## ローカルでビルドを確認する ```bash npm ci npm run build npm run preview ``` ローカルのプレビュー URL を使って、データを取得するコンポーネントと、router 経由で到達するページを確認してください。このローカル確認では `vite preview` を使用します。本番ファイルは nginx が配信します。ビルド出力とプレビュー動作については、[Vite のデプロイガイド](https://vite.dev/guide/static-deploy.html)を参照してください。 ## デプロイ [CLI セットアップ](https://lizard.build/ja/docs/framework-guides#prepare-the-project)の後、現在のソースディレクトリをデプロイします。 ```bash lizard init --name vue-app lizard add --service web lizard up --service web --port 80 lizard logs --build --service web --json lizard ps --json ``` アップロード対象から、ローカル依存関係、`dist/`、`.env` ファイルを除外してください。既存のコマンド上書きがない場合、lizardpack は Vite を検出して静的イメージをビルドします。サービスの起動コマンドとして `npm run dev` を追加しないでください。 ## Vue Router history モード アプリで `createWebHistory` を使う場合、サーバーはクライアントルートへの直接リクエストを処理する必要があります。デフォルトの静的イメージはファイルを見つけられないときに `index.html` を配信するため、`/account` はハードリロード時でも Vue Router に到達できます。router base は Vite の base に合わせてください。たとえば `createWebHistory(import.meta.env.BASE_URL)` のように設定します。詳しくは [Vue Router の history モード](https://router.vuejs.org/guide/essentials/history-mode.html)を参照してください。 ホームページからのナビゲーションと、新しいタブで `/account` を開く操作の両方をテストしてください。存在しないクライアントルート向けに catch-all view を追加してください。サーバーのフォールバックは未知のパスでも HTTP 200 を返すため、検索向けの 404 レスポンスは提供しません。インデックスされるコンテンツサイトでこの構成を使う前に、[静的ルートと 404](https://lizard.build/ja/docs/framework-guides/static-routing)を読んでください。 ## 変数と API リクエスト Vite はビルド時に `VITE_*` の値をブラウザバンドルへ書き込みます。これらは、API の公開 HTTPS URL など、公開してよい値にのみ使用してください。[変数とシークレット](https://lizard.build/ja/docs/variables)で設定し、その後、再ビルドされたアプリの実際のネットワークリクエストを確認してください。ランタイムのみの再起動では、ビルド済み JavaScript 内の値は置き換えられません。 デプロイ後にのみリクエストが失敗する場合は、API 側の CORS を確認し、ブラウザが `localhost` やプライベートなバックエンドホスト名を呼び出していないことを確認してください。HTML は読み込まれるのにアセットが失敗する場合は、Vite の base とアセットパスを確認してください。JavaScript 実行前に HTML が必要なページでは、Nuxt レンダリングまたは明示的な prerendering ステップを選択してください。 September 9, 2026 のデプロイ確認とその制限については、[テスト済みバージョンとクラウド結果](https://lizard.build/ja/docs/framework-guides/validation)を参照してください。