🔰はじめての方へ

Vercelで別プロジェクトを上書きしかけた話 ―― 原因は複製した.vercelだった

AI
記事内に広告が含まれています。
スポンサーリンク

はじめに

個人開発でつくった静的サイト（HTML1枚のツール）に、ファビコンとOGP画像を追加してVercelにデプロイしました。

ところが「画像が表示されない！」「別のアプリを上書きしちゃったかも！？」と、かなり肝を冷やす出来事があったので、原因と解決方法を自分用のメモとして残しておきます。

同じミスをする人の助けになればいいなと思います！

やろうとしていたこと

Vercelで配信している静的サイト（index.html 1枚だけの構成）に、次の画像を追加したかっただけでした。

  • ファビコン（favicon.ico / favicon.svg / icon.png）
  • Apple用アイコン（apple-touch-icon.png）
  • SNSシェア用のOGP画像（ogp.png）

<head> にタグを書いて、画像を index.html と同じフォルダに置いて、いざデプロイ。

npx vercel --prod

Vercelの使い方については別の記事でも紹介しています。👇

作ったHTMLをスマホで使いたい人へ。Vercelで無料公開する手順をまとめました
作ったHTMLファイルをスマホで使いたくて、Vercelで公開してみました。Vercelとは何かという説明から、フォルダの作り方、ターミナルでのコマンド、URLが発行されるまでの流れを実際の画面の順番どおりにまとめています。
mapletc.net
2026.07.23

起きたトラブル

デプロイは成功したはずなのに、本番URLを見ると――

  • ファビコンもOGPも反映されていない（古いまま）
  • 画像のURLを直接開くと、ぜんぶ 404

さらに調べていくと、

まったく別のプロジェクト（Xのテンプレートを保存してある大事なアプリ）の本番が、今回の内容で上書きされている

ことが判明。

「消えちゃったの…！？」と本気で焦りました。

原因：デプロイ先が別プロジェクトにすり替わっていた

犯人は、フォルダの中に隠れていた .vercel フォルダでした。

このプロジェクトはテンプレートを複製して作ったもので、そのときに複製元のVercelリンク情報（.vercel/project.json）まで一緒についてきていたのです。

中身を見るとこうなっていました。

cat .vercel/project.json
# → {"projectId":"...","projectName":"sample-x-template"}

つまり、自分では「make(プロジェクト名)を更新している」つもりでも、npx vercel --prod の実際の公開先は、複製元の sample-x-template というまったく別のプロジェクトになっていた、というわけです。

だから本命のサイトは古いまま・画像も404だったし、無関係なアプリの本番が書き換わってしまった。

まず落ち着く：Vercelのデプロイは消えない

ここが一番大事な安心ポイントでした。

Vercelのデプロイは1回ごとに「変更不可のスナップショット」として全部保存され続けます。

上書きで前のデータが削除されることはありません。

起きていたのは「本番URLが指す先が新しいデプロイに切り替わった」だけ。

過去のデプロイは履歴にそのまま残っているので、元に戻せます。

元に戻す手順（Instant Rollback）

  1. Vercelダッシュボードで対象プロジェクトを開く
  2. 「Deployments」タブを開く
  3. 上書き前の（正しい）デプロイを日時で探す
  4. 「…」メニュー →「Instant Rollback」（または Promote to Production）

これで本番は一瞬で元通りになりました。ほっとした…。

根本解決：正しいプロジェクトに繋ぎ直す

間違ったリンク情報を消して、正しいプロジェクトにリンクし直します。

① 間違ったリンク情報を削除（.vercelはリンク情報だけなので消してOK）

rm -rf .vercel

リンク先を「別のプロジェクトに変えたい」ときは、先に古いリンク情報を消してまっさらにしてから vercel link するのが確実。

② 正しいプロジェクトに繋ぎ直す（対話でアカウントとプロジェクトを選ぶ）

npx vercel link

npx vercel link の後に質問されます。

  • Set up "~/make"? → Y
  • スコープ（チーム/個人アカウント）→ あなたのアカウントを選択
  • Link to existing project? → Y
  • What's the name of your existing project? → make と入力

が成功すると、こんな表示になります。

✓ Linked  user-xxxx-projects/make

③ 本番デプロイ

npx vercel --prod

④ 本番URLで画像がちゃんと上がったか確認。

curl -s -o /dev/null -w "%{http_code}\n" サイトURL/favicon.svg
# → 200 が返ればOK

無事、ファビコンもOGPも正しく反映されました。

デプロイの手順

ここでまとめておきます。

STEP 0：まずリンク先を確認（毎回・最重要）

cat .vercel/project.json
  • 出てきた projectName が make → OK。STEP 1へ。
  • 違う名前が出た→ 先に直す ↓
    rm -rf .vercel npx vercel link # 対話で プロジェクト名 を選ぶ
    直ったら STEP 1 へ（このあとは②と同じ）。

STEP 1：プレビューで確認

npx vercel            # プレビュー用URLが出る → ブラウザで開いて見た目チェック

STEP 2：本番デプロイ

npx vercel --prod

STEP 3：本番URLで最終確認

curl -s -o /dev/null -w "%{http_code}\n" https://make.vercel.app/確認するファイル
# → 200 が返ればOK

今後のためのチェックリスト

同じ事故を繰り返さないために、デプロイ前にこれだけは確認するようにします。

  1. デプロイ先を必ず確認する（一番大事）
    　cat .vercel/project.json
    　projectName が意図したものか見る
  2. いきなり本番に上げない。まずプレビュー。
    　npx vercel
    　プレビューURLで確認
    　npx vercel --prod
    　問題なければ本番へ
    　プレビューは本番URLに影響しないので、万一リンク先を間違えても本番を壊しません。
  3. 本番URLで実物を確認する（HTMLの中身・画像が200かをチェック）
  4. テンプレを複製して新規プロジェクトを作ったときは、複製元の .vercel が紛れ込んでいないか確認する。あれば rm -rf .vercel → npx vercel link で繋ぎ直す。

おまけ：画像とタグのメモ

  • ファビコン・OGP画像は、index.html と同じフォルダ直下に置けばOK（npx vercel --prod がフォルダごとアップロードしてくれる）。専用の置き場所は不要。
  • OGPの og:image と og:url は、本番ドメインと一致した絶対URL（https://…）で書く。相対パスやドメイン違いだと、SNSでシェアしたときに画像が出ません。
  • OGP画像の推奨サイズは 1200×630（約1.91:1）。

まとめ

今回の学びは、「デプロイは、どこに公開されるかを毎回確認する」。

この一言に尽きます。テンプレ複製から作ったプロジェクトは特に、リンク先がすり替わっていることがあるので要注意。そして、もし事故ってもVercelなら過去のデプロイからロールバックできる――と知っているだけで、心の余裕がぜんぜん違いました。