node_modulesを含めずに公開用ZIPを作る方法

起きる症状

プロジェクトのルートフォルダをそのままZIPに圧縮するとnode_modulesが含まれ、数百MBから数GBになることがあります。多くのホスティングサービスにはアップロードサイズの上限があり、制限を超えるとアップロード自体が失敗します。エラーメッセージが「タイムアウト」として表示されることも多いため、サイズが原因と気づくのが遅れやすいです。

node_modulesを除外してアップロードしても、ZIP直下にindex.htmlではなくsrcやpublicフォルダがある状態ではページが表示されません。Reactプロジェクトなら npm run build を実行後のdistまたはbuildフォルダの中身だけをZIPにする必要があります。ビルドせずにソースコードのみを送るケースも多く、その場合はブラウザでJSを解釈できないため表示が崩れます。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

正しい構成

公開用ZIPを作る手順は「ビルド実行 → distフォルダの中身だけをZIPに圧縮」の2ステップです。ターミナルで「npm run build && cd dist && zip -r ../site.zip .」を実行すると、distフォルダの中身（index.htmlやassetsフォルダ）だけがZIP直下に格納されます。cdでdistに入ってから圧縮することで余分なフォルダが1段挟まらないようになります。

ZIPを作ったら「unzip -l site.zip | head -10」で内容を確認し、1行目がindex.htmlになっていることを確かめます。dist/index.htmlのようにdistフォルダが先頭に来ている場合は、distフォルダの中に入ってから圧縮する手順が抜けています。この状態ではアップロード後に404エラーになるため、作り直してください。

• ZIP直下または指定階層にindex.htmlがあるか確認する
• 相対パスの画像・CSS・JSが同梱されているか見る
• 不要な隠しファイルや作業ファイルを除く
• 圧縮前のフォルダ名に日本語や空白を入れすぎない

圧縮前チェック

ビルド後のdistフォルダに本番APIのエンドポイントや環境変数の値が埋め込まれていないかを確認します。ViteやCreate React Appはビルド時に環境変数を埋め込むため、.env.productionの内容がバンドルに含まれることがあります。distフォルダ内のJSファイルをテキストで検索し、機密情報が含まれていないかをチェックしてください。

distフォルダ内の画像やCSSのパスが相対パスになっていることを確認します。Viteのbaseオプションの設定が/以外になっている場合、パスが絶対URLになりホスティング先のドメインと合わないことがあります。ビルド設定でbaseを'./'（相対パス）に指定してからビルドし直してください。

1. HTML内の外部script・form action・iframeを確認する
2. APIキーやトークンらしき文字列がないか検索する
3. 画像・CSS・JSのパスが公開後も解決できるか見る
4. noindexと認証を混同せず、必要なら両方設定する

アップロード後確認

アップロード後にURLを開いてページが表示されたら、開発者ツールのConsoleタブでエラーが出ていないかを確認します。SPAの場合は初期ページは表示されてもルーティングが機能せずに直接URLへアクセスすると404になることがあります。静的ホスティングではサーバーサイドのルーティングが使えないため、HashRouterを使うかすべてのパスをindex.htmlへリダイレクトする設定が必要です。

スマホでもURLを開き、フォントやアイコンが正しく表示されるかを確認します。Web FontsやSVGアイコンがCDNから読み込まれている場合、CORS設定によって表示されないことがあります。開発者ツールのNetworkタブで失敗しているリクエストを確認し、CORSエラーであれば該当のフォントやアイコンをdistフォルダに含める対応を検討してください。

1. HTML内の外部script・form action・iframeを確認する
2. APIキーやトークンらしき文字列がないか検索する
3. 画像・CSS・JSのパスが公開後も解決できるか見る
4. noindexと認証を混同せず、必要なら両方設定する