blink-deploy について
blink-deploy は、外部でビルドしたフロントエンドを Blink のホスティングへデプロイするためのスキルです。CLI によるデプロイ、プレビューと本番の URL の違い、サンドボックスの有効化との混同を避ける方法を説明します。
主な機能
- 01blink deploy によるビルド成果物の公開
- 02プレビューと本番のデプロイ先の区別
- 03サンドボックス有効化による上書きの回避
- 04一般的なビルド出力先の確認
- 05空または古いデプロイの調査
活用シーン
- 01ビルド済みフロントエンドの Blink への公開
- 02プレビューと本番の更新先の選択
- 03サイト未反映や古い内容の診断
MCP 対応
blink_versions_restore やホスティング状態・有効化の MCP ツールについて説明します。フロントエンドのデプロイには MCP ツールではなく blink CLI を使います。
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ blink-new/ blink-plugin --skill blink-deployインストール後、Claude Code で/blink-deployを入力して読み込まれたか確認します。
詳細
MCP ツール
blink_versions_restore — 保存済みの以前のバージョンスナップショットにプロジェクトを復元します(バージョン ID を見つけるには blink_versions_list を使用してください)。
フロントエンドのデプロイは CLI で行います — blink deploy ./dist --prod。ビルド後、エージェントは CLI を使用してデプロイするため、MCP にデプロイ用ツールはありません。
はじめに
# Build your app
npm run build
# Deploy to production — always pass project ID explicitly to avoid "No project context" errors
blink deploy <project_id> ./dist --prod
# OR: link the project first, then deploy without ID
blink link <project_id>
blink deploy ./dist --prod
# That's it — no activation step. Do NOT run `blink hosting activate` or call the
# blink_hosting_activate MCP tool after this (see "Two hosting systems" below) — both
# spellings hit the same endpoint, which rebuilds from the Blink sandbox and overwrites
# what you just deployed.
# Preview deploy — publishes to the project's own blinkusercontent.com URL (no activation
# needed, but this IS the project's default live site, not a throwaway — see below)
blink deploy <project_id> ./dist
# List saved version snapshots
blink versions list
# Restore a version snapshot (version rollback)
blink versions restore <version_id>
2 つのホスティングシステム — 混同しないでください
Blink には、別々のホスティング方法が 2 つあります。blink deploy の実行後に blink hosting activate を実行したり、blink_hosting_activate MCP ツールを呼び出したりしないでください — どちらの表記も同じエンドポイントにアクセスします。
方法 A — CLI デプロイ(外部でビルドしたアプリ向け)
blink deploy <project_id> ./dist --prod
# → live immediately at https://{project_slug}.blinkpowered.com
# → NO further steps needed. Do NOT run `blink hosting activate` or call blink_hosting_activate.
デプロイ後、URL は CLI に表示されます。CLI でデプロイしたプロジェクトでは、blink_hosting_status は inactive を永久に表示し続けます。デプロイルートはこのフィールドを書き込まないため、一時的な遅延ではありません。実際の原因はデプロイ状態ではなく、プロジェクトの課金ライフサイクルです。サイトはそのまま公開されています。ホスティングの有効化を実行して inactive 状態を「修正」しないでください — 上記を参照してください。
方法 B — Blink サンドボックスの有効化(Blink AI エディターで構築したプロジェクト向け)
blink_hosting_activate # only for sandbox-based projects
# → triggers a fresh build from the Blink sandbox and deploys
混同してはいけない理由:
blink_hosting_activate は Blink サンドボックスから再ビルドし、blink deploy がアップロードした S3 ファイルを上書きします。CLI デプロイ後に有効化を呼び出すと、アプリが Blink AI テンプレートに置き換わります。
まとめ
| シナリオ | コマンド | URL |
|---|---|---|
| 外部で構築したアプリ(Vite/Next/React) | blink deploy <id> ./dist --prod | {slug}.blinkpowered.com |
| Blink AI エディターで構築したアプリ | blink_hosting_activate | {slug}.blinkpowered.com |
| プレビュー/デフォルト URL | blink deploy <id> ./dist(--prod なし) | {projectId}.blinkusercontent.com |
デプロイパイプライン
1. npm run build → generates ./dist (or .next, out/, build/)
2. blink deploy ./dist → uploads to Blink hosting
3. URL printed → {projectId}.blinkusercontent.com (preview), or {slug}.blinkpowered.com with --prod (or custom domain)
プレビューと本番環境
どちらのフラグも、安全で隔離されたサンドボックスではありません — どちらも実際に公開中の URL を上書きします。 プレビューデプロイは、Blink AI エディター独自の公開経路が書き込み先として使用するのと同じ blinkusercontent.com URL(UI ではプロジェクトのデフォルトドメインとして表示されます)に公開されます。--prod を付けずに blink deploy ./dist を実行すると、現在そこに公開されている内容が置き換わります。
| フラグ | 動作 | URL |
|---|---|---|
| (なし) | プロジェクトのデフォルト URL に公開します — 有効化は不要ですが、使い捨てではありません | {projectId}.blinkusercontent.com |
--prod | 本番/カスタムドメイン URL にのみ公開します — 上記のデフォルト URL は更新されず、最後にデプロイされた内容のままです | {slug}.blinkpowered.com + カスタムドメイン |
# Publishes to the project's blinkusercontent.com URL — this replaces what's live there now
blink deploy ./dist
# → https://{projectId}.blinkusercontent.com
# Production — replaces live site
blink deploy ./dist --prod
# → https://{slug}.blinkpowered.com
フレームワークのビルド出力
| フレームワーク | ビルドコマンド | 出力ディレクトリ |
|---|---|---|
| React(Vite) | vite build | ./dist |
Next.js(output: 'export') | next build | ./out |
| Vue | vite build | ./dist |
| Svelte | vite build | ./build |
| Astro | astro build | ./dist |
| プレーンな HTML/CSS/JS | — | ./ |
Next.js の静的エクスポートでは、next.config.ts に output: 'export' が設定されていることを確認してください。
バックエンドのデプロイ
バックエンド(CF Workers 上の Hono)には独自のデプロイコマンドがあります — blink-backend スキルを参照してください。
blink backend deploy
本番環境への完全なチェックリスト
# 1. Ensure env vars are set
# 2. Build
npm run build
# 3. Deploy frontend
blink deploy ./dist --prod
# 4. Deploy backend (if applicable)
blink backend deploy
# 5. Set up custom domain (optional)
blink domains add myapp.com
よくある問題
| 問題 | 解決方法 |
|---|---|
| 空のデプロイ | ビルド出力ディレクトリが存在し、ファイルが含まれていることを確認してください |
| デプロイ後に 404 が発生する | 正しい出力ディレクトリ(dist/、out/、build/)を確認してください |
| 環境変数が見つからない | ビルド前にプロジェクト設定でシークレットを設定してください |
| 古い内容がデプロイされている | 本番環境の更新には --prod フラグを指定してください。--prod デプロイ後にデフォルトの blinkusercontent.com URL だけが古い場合、それは想定どおりです — --prod ではその URL は更新されません(「プレビューと本番環境」を参照してください)。そちらも更新するには、フラグなしで blink deploy を実行してください |