---
title: "node_modulesを含めずに公開用ZIPを作る方法"
description: "node_modulesを含まずに公開用ZIPを作る方法に困っているフロントエンド開発者向けに、ビルド後のdist以下をZIPにする手順・構成確認・よくある落とし穴を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/zip-node-modules-howto"
markdown: "https://giga-site.com/articles/zip-node-modules-howto/index.md"
category: "ZIP公開"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# node_modulesを含めずに公開用ZIPを作る方法

ReactやVue.jsで作ったプロジェクトをそのままZIPに固めると、node_modulesフォルダが含まれて数百MBのZIPになってしまいます。ギガサイト便へアップロードするには静的ビルド後のdistフォルダだけをZIPにする必要があります。この記事でその手順を整理します。

> Source HTML: https://giga-site.com/articles/zip-node-modules-howto
> Article index: https://giga-site.com/articles/index.md

## 起きる症状

プロジェクトのルートフォルダをそのまま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と認証を混同せず、必要なら両方設定する

## よくある質問

### .gitignoreにnode_modulesを書いてもZIP圧縮時に除外されますか？

.gitignoreはGitの管理対象外を指定するファイルであり、ZIPの圧縮には影響しません。ZIPを作るときは明示的にnode_modulesを除外するか、distフォルダのみをZIPにする手順を取ってください。

### ビルドを実行せずにHTML・CSS・JSを手書きしたプロジェクトはどうすればよいですか？

ビルドが不要なプロジェクトはプロジェクトフォルダの中身（index.html, style.css, script.jsなど）をZIPに圧縮するだけです。node_modulesは存在しないためサイズの問題は起きません。

### Reactで作ったSPAをZIPで共有するとき、ルーティングはどう対処すればよいですか？

静的ホスティングではサーバーサイドのURL処理ができないため、react-router-domのHashRouterを使ってURLにハッシュを含める形式（/#/about）に変更することを推奨します。

## 関連記事

- [クライアントレビュー前にZIPを点検するチェックリスト](https://giga-site.com/articles/zip-before-client-review-howto/index.md)
- [AI生成HTMLの出力フォルダを公開用ZIPに整える方法](https://giga-site.com/articles/zip-ai-output-cleanup-howto/index.md)
- [ZIPの最上位フォルダが原因でindex.htmlが見つからないときの直し方](https://giga-site.com/articles/zip-top-folder-howto/index.md)
- [Macで作ったZIPに隠しファイルが混ざるときの確認方法](https://giga-site.com/articles/zip-macos-hidden-files-howto/index.md)
- [Windowsで作ったZIPの文字コードトラブルを避ける方法](https://giga-site.com/articles/zip-windows-encoding-howto/index.md)
- [distフォルダだけをZIPにしてHTMLを共有する方法](https://giga-site.com/articles/zip-dist-folder-howto/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "node_modulesを含めずに公開用ZIPを作る方法",
  "description": "node_modulesを含まずに公開用ZIPを作る方法に困っているフロントエンド開発者向けに、ビルド後のdist以下をZIPにする手順・構成確認・よくある落とし穴を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/zip-node-modules-howto",
  "url": "https://giga-site.com/articles/zip-node-modules-howto",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "ZIP公開",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": ".gitignoreにnode_modulesを書いてもZIP圧縮時に除外されますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": ".gitignoreはGitの管理対象外を指定するファイルであり、ZIPの圧縮には影響しません。ZIPを作るときは明示的にnode_modulesを除外するか、distフォルダのみをZIPにする手順を取ってください。"
      }
    },
    {
      "@type": "Question",
      "name": "ビルドを実行せずにHTML・CSS・JSを手書きしたプロジェクトはどうすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "ビルドが不要なプロジェクトはプロジェクトフォルダの中身（index.html, style.css, script.jsなど）をZIPに圧縮するだけです。node_modulesは存在しないためサイズの問題は起きません。"
      }
    },
    {
      "@type": "Question",
      "name": "Reactで作ったSPAをZIPで共有するとき、ルーティングはどう対処すればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "静的ホスティングではサーバーサイドのURL処理ができないため、react-router-domのHashRouterを使ってURLにハッシュを含める形式（/#/about）に変更することを推奨します。"
      }
    }
  ]
}
```