Lizard で Vite を使った Vue をデプロイする
Vite でビルドした Vue アプリを、Lizard 上の静的 Web サービスとしてデプロイします。ビルドでは dist/ が生成され、nginx がポート 80 でファイルを配信します。Nuxt のサーバーレンダリングとサーバールートについては、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 が必要です。
ローカルでビルドを確認する
npm ci
npm run build
npm run previewローカルのプレビュー URL を使って、データを取得するコンポーネントと、router 経由で到達するページを確認してください。このローカル確認では vite preview を使用します。本番ファイルは nginx が配信します。ビルド出力とプレビュー動作については、Vite のデプロイガイドを参照してください。
デプロイ
CLI セットアップの後、現在のソースディレクトリをデプロイします。
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 モードを参照してください。
ホームページからのナビゲーションと、新しいタブで /account を開く操作の両方をテストしてください。存在しないクライアントルート向けに catch-all view を追加してください。サーバーのフォールバックは未知のパスでも HTTP 200 を返すため、検索向けの 404 レスポンスは提供しません。インデックスされるコンテンツサイトでこの構成を使う前に、静的ルートと 404を読んでください。
変数と API リクエスト
Vite はビルド時に VITE_* の値をブラウザバンドルへ書き込みます。これらは、API の公開 HTTPS URL など、公開してよい値にのみ使用してください。変数とシークレットで設定し、その後、再ビルドされたアプリの実際のネットワークリクエストを確認してください。ランタイムのみの再起動では、ビルド済み JavaScript 内の値は置き換えられません。
デプロイ後にのみリクエストが失敗する場合は、API 側の CORS を確認し、ブラウザが localhost やプライベートなバックエンドホスト名を呼び出していないことを確認してください。HTML は読み込まれるのにアセットが失敗する場合は、Vite の base とアセットパスを確認してください。JavaScript 実行前に HTML が必要なページでは、Nuxt レンダリングまたは明示的な prerendering ステップを選択してください。
September 9, 2026 のデプロイ確認とその制限については、テスト済みバージョンとクラウド結果を参照してください。