Netlifyとは｜使い方・料金・デプロイ方法とエラー対処を実例で

Git に push すると、Netlify がビルドコマンドを実行し、できたフォルダ（公開ディレクトリ）を CDN に置いて配信します。

flowchart TD
    A[Git に push<br>またはフォルダをドロップ] --> B[Netlify がビルド<br>npm run build など]
    B --> C[公開ディレクトリ<br>dist など]
    C --> D[世界中の CDN]
    D --> E[閲覧者]
    B --> F[Functions<br>サーバー側の処理]

急いでいる人向けに、目的ごとの操作を先にまとめます。

やりたいこと	方法	詳しい節
とにかく1枚公開したい	app.netlify.com/drop にフォルダをドロップ	デプロイ方法
push のたびに自動で公開	Git リポジトリを連携する	デプロイ方法
設定をファイルで管理	ルートに netlify.toml を置く	netlify.toml
SPA の再読み込みで 404	/* /index.html 200 を足す	リダイレクト
APIキーを隠して使う	環境変数＋Functions	環境変数・Functions
独自ドメインで公開	Domain management で追加し DNS を設定	独自ドメイン
前の版に戻したい	過去のデプロイで Publish deploy	ロールバック
無料でどこまで使える？	月300クレジット（デプロイ1回15など）	料金

確認環境：Ubuntu 24.04・Node.js 22.22.2・netlify-cli 27.14.1（npm の netlify-cli。中の @netlify/build は 37.5.1）。小さなサイトを作って netlify build --offline を実行し、ビルドのログ・できたファイル・設定ミスのときのエラー原文を記録しました。リダイレクト・ヘッダー・Functions の応答は、netlify-cli に同梱されている Netlify の手元用エミュレーター @netlify/dev 5.1.10 と、Netlify のリダイレクト照合エンジン @netlify/redirect-matcher 0.4.2 で確かめました。料金・画面の操作・制限の値は docs.netlify.com と netlify.com/pricing、Vercel・Cloudflare・GitHub の公式ドキュメントで確認しました（確認日 2026年10月22日）。

Netlifyとは：できることと仕組み

この節では、Netlify が何をしてくれるサービスかと、会社の基本情報が分かります。

Netlify（ネットリファイ）は、HTML・CSS・JavaScript でできたサイトや、React・Vue・Astro・Next.js などで作ったアプリを、ビルドから配信まで任せられるサービスです。公式ドキュメントは自らを、世界規模の CDN（コンテンツを利用者の近くから配る仕組み）の上で、インフラを管理せずに Web を作れるようにするもの、と説明しています。

サーバーを借りて nginx を入れる、といった作業はありません。利用者が用意するのは「ビルドのしかた」と「公開するフォルダ」の2つです。

会社と歴史

項目	内容
会社	Netlify, Inc.（本社：米国サンフランシスコ）
創業	2014年。2015年4月に公開
創業者・CEO	Mathias Biilmann（共同創業者 Christian Bach）
知られていること	「Jamstack」という作り方を広めた。2023年に Gatsby を買収
旧 Netlify CMS	Decap CMS に名前が変わり、パートナー企業 PM が開発を続けている

（Wikipedia 英語版と Netlify ブログによる。）

よくある誤解

Netlifyの料金：無料プランとクレジットの考え方

この節では、2026年10月22日時点のプランと、何にどれだけクレジットを使うかが分かります。

Netlify の料金は「毎月もらえるクレジットを、デプロイ・転送量・計算時間・リクエスト数で消費する」形です。料金ページとドキュメント「How credits work」で確かめた値です。

プラン	月額	毎月のクレジット	主な違い
Free	$0	300（上限で停止）	同時ビルド1、メンバー1人
Personal	$9	1,000	優先メールサポート、追加購入できる
Pro	$20〜	3,000〜20,000	メンバー無制限、パスワード保護、同時ビルド3
Enterprise	個別見積もり	個別	SLA 99.99%、SSO・SCIM

Pro はクレジット量で月額が変わります（3,000＝$20、5,000＝$33、10,000＝$63、15,000＝$95、20,000＝$126）。5,000 以上の段は、使わなかった分を1か月だけ繰り越せます。

何にクレジットを使うか

フォームの送信は「Free and unlimited」（無料・無制限）、AI モデルの利用は使った金額 1ドルあたり 180 クレジットです。

月300クレジットでどこまで使えるか（計算例）

単価をそのまま掛け算した Python の計算です。

# Netlify のクレジット消費の目安（料金表の単価：2026年10月22日時点）
RATE = {"deploy": 15, "gb": 20, "gb_hour": 10, "req_10k": 2}

def credits(deploys, gb, gb_hours, requests):
    return (deploys * RATE["deploy"] + gb * RATE["gb"]
            + gb_hours * RATE["gb_hour"] + requests / 10_000 * RATE["req_10k"])

cases = [
    ("個人ブログ（月4回更新）", 4, 2, 0, 50_000),
    ("ポートフォリオ（月10回更新）", 10, 5, 0, 100_000),
    ("小さなサービス（Functions あり）", 20, 8, 3, 300_000),
]
for name, d, gb, h, r in cases:
    c = credits(d, gb, h, r)
    print(f"{name}: デプロイ{d}回 + {gb}GB + {h}GB時間 + {r:,}リクエスト = {c:g} クレジット"
          f" → {'Free(300)に収まる' if c <= 300 else 'Free を超える'}")

個人ブログ（月4回更新）: デプロイ4回 + 2GB + 0GB時間 + 50,000リクエスト = 110 クレジット → Free(300)に収まる
ポートフォリオ（月10回更新）: デプロイ10回 + 5GB + 0GB時間 + 100,000リクエスト = 270 クレジット → Free(300)に収まる
小さなサービス（Functions あり）: デプロイ20回 + 8GB + 3GB時間 + 300,000リクエスト = 550 クレジット → Free を超える

本番デプロイは1回15クレジットなので、Free だけで月20回デプロイすると、それだけで300に届きます。 細かい修正は Deploy Preview（0クレジット）で確かめ、まとめて本番に出すと節約になります。

クレジットを使い切ったとき

• Free：その請求期間の残りは、チームのすべてのサイトが一時停止し、URL を開くと Site not available のページになります。請求は発生しません。使用量が50%・75%・100%に達するとメールと画面で通知されます。
• Personal・Pro：クレジットの追加購入（Personal は500で$5、Pro は1,500で$10）か、自動チャージで止めずに使えます。自動チャージは既定でオフです。
• 有料プランに上げると、止まったサイトは再開します。

Netlifyの始め方：アカウント作成からサイト名の変更まで

この節では、登録してから自分の URL で公開するまでの流れが分かります。

Netlify の画面では、以前「Site（サイト）」と呼んでいたものが「Project（プロジェクト）」という呼び名に変わっています。以前の解説の「Site settings」は、今の画面では「Project configuration」に当たります。

Netlifyのデプロイ方法3つ（ドラッグ＆ドロップ・Git連携・CLI）

この節では、3つのデプロイ方法の違いと、どれを選ぶかが分かります。

方法	自動で公開	向いている場面
ドラッグ＆ドロップ	されない（毎回手で落とす）	試しに公開、ビルド済みの資料を見せる
Git 連携	push ごとに自動	継続して育てるサイト・チーム開発
CLI	手動（CI から呼ぶこともできる）	GitHub Actions など自前の CI から出す
API	手動	自前のツールから ZIP やファイル一覧で送る

ほかに、AI エージェント（Agent Runners）で作って公開する方法、README に置く「Deploy to Netlify」ボタン、外部から叩く Build hooks もあります。

ドラッグ＆ドロップで公開する

1. ビルド済みのフォルダ（dist・build・public など）を用意します。ZIP なら先に展開します。
2. app.netlify.com/drop の Deploy zone にフォルダを落とします。
3. 発行された URL で公開されます。

更新するときは、プロジェクトの「Deploys」ページの下にあるドロップ欄に、新しいフォルダを落とします。 Drop の画面にもう一度落とすと、別のサイトが増えます。ドキュメントは、ドロップのデプロイは 50MB 未満に抑え、10MB を超えるファイルは止まりやすいと書いています。大きいサイトは CLI か Git を使います。

Git 連携で自動デプロイする

app.netlify.com/start から Git のサービスを選び、リポジトリとブランチ（多くは main）を選びます。ビルドコマンドと公開ディレクトリは、フレームワークから自動で入ります。

フレームワーク	ビルドコマンドの例	公開ディレクトリの例
Vite（React・Vue）	npm run build	dist
Astro	npm run build	dist
Hugo	hugo	public
素の HTML	（なし）	HTML のあるフォルダ

上の値は各フレームワークの既定の出力先です。違う場所に出す設定にしている場合は、その場所を公開ディレクトリにします。

関連記事「CI/CDとは｜GitHub Actionsで最初のパイプラインを作るまで」で扱っています。

Netlify CLI でデプロイする

ドキュメントの要件は Node.js 18.14.0 以降です。

npm install -g netlify-cli
netlify --version

netlify-cli/27.14.1 linux-x64 node-v22.22.2

npm で入れると 944 個のパッケージが入りました。主なコマンドは次のとおりです。

コマンド	すること
netlify login	ブラウザーでログインし、トークンを保存する
netlify init	Git リポジトリと Netlify をつなぎ、自動デプロイを設定する
netlify link	手元のフォルダを既存のプロジェクトに結びつける
netlify build	Netlify と同じ手順で手元でビルドする
netlify dev	リダイレクト・Functions 込みで手元で動かす（既定 8888 番）
netlify deploy	下書きとしてデプロイし、確認用 URL を出す
netlify deploy --prod	本番に出す
netlify env:set 名前 値	環境変数を設定する

ログインしていない状態で netlify deploy を実行すると、次のように止まります。

 ›   Error: Authentication required. NETLIFY_AUTH_TOKEN is not set and `netlify login --request <message>` can be used to authenticate.
Alternatively, use --allow-anonymous to deploy without an account.

CI から使うときは、画面の「Applications > Personal access tokens」で作ったトークンを NETLIFY_AUTH_TOKEN に入れます。--allow-anonymous はアカウントなしで一時的なプロジェクトを作る指定で、ドキュメントでは1時間以内に自分のアカウントへ「claim（引き取り）」する必要があります。

netlify.tomlの書き方（netlify buildで確かめる）

この節では、netlify.toml の主な設定と、手元のビルドで設定が効く様子が分かります。

netlify.toml は、リポジトリのルート（ベースディレクトリ）に置く設定ファイルです。画面の設定と食い違うと、netlify.toml の値が勝ちます。 設定をコードと一緒に管理できるので、チームでの事故が減ります。

確かめたプロジェクト

netlify-demo/
├── netlify.toml
├── package.json          … "build": "node build.mjs"
├── build.mjs             … src/ を dist/ にコピーし、SITE_LABEL を埋め込む
├── src/
│   ├── index.html        … お問い合わせフォームつき
│   ├── about.html
│   └── 404.html
└── netlify/
    └── functions/
        └── hello.mjs     … /api/hello で JSON を返す

[build]
  command   = "npm run build"
  publish   = "dist"

[build.environment]
  NODE_VERSION = "22"
  SITE_LABEL   = "production"

[context.deploy-preview.environment]
  SITE_LABEL = "preview"

# 旧URLから新URLへ（301）
[[redirects]]
  from   = "/old-about"
  to     = "/about"
  status = 301

# 書き換え（200）：URLは変えずに別の中身を返す
[[redirects]]
  from   = "/docs/*"
  to     = "/about"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options        = "DENY"
    X-Content-Type-Options = "nosniff"

netlify build の出力

--offline を付けると、ログインやネットワークなしでビルドの手順だけを手元で実行できます。

$ netlify build --offline
Netlify Build
────────────────────────────────────────────────────────────────
> Version
  @netlify/build 37.5.1
> Flags
  dry: false
  offline: true
> Current directory
  ~/netlify-demo
> Config file
  ~/netlify-demo/netlify.toml
> Context
  production
build.command from netlify.toml
────────────────────────────────────────────────────────────────
$ npm run build

> build
> node build.mjs

built 3 files (SITE_LABEL=production)
(build.command completed in 174ms)
Functions bundling
────────────────────────────────────────────────────────────────
Packaging Functions from netlify/functions directory:
 - hello.mjs
(Functions bundling completed in 122ms)
Netlify Build Complete
────────────────────────────────────────────────────────────────
(Netlify Build completed in 340ms)

ビルドの後には、公開用の dist/ と、Netlify 用の作業フォルダ .netlify/ ができました。

.netlify/functions/hello.zip         337,833 バイト（Function を1つにまとめたもの）
.netlify/functions/manifest.json         473 バイト
.netlify/netlify.toml                    961 バイト（解決済みの設定）
dist/404.html  dist/about.html  dist/index.html

.gitignore には .netlify の行が自動で足されていました。manifest.json には、Function の実行環境が nodejs22.x、経路が /api/hello と記録されています。

デプロイの種類ごとに値を変える（context）

--context deploy-preview を付けると、プレビュー用の値でビルドされます。

$ netlify build --offline --context deploy-preview
> Context
  deploy-preview
built 3 files (SITE_LABEL=preview)

書く場所	効くデプロイ
[build]	すべて（下の指定が無いとき）
[context.production]	本番ブランチのデプロイ
[context.deploy-preview]	プルリクエストの Deploy Preview
[context.branch-deploy]	本番以外のブランチのデプロイ
[context.dev]	手元の netlify dev
[context."feat/x"]	指定したブランチだけ

より細かい指定が勝ちます（ブランチ名の指定 → 各 context → [build] の順）。リダイレクトとヘッダーは context で分けられず、すべてのデプロイに共通です。

netlify build --dry を使うと、実行せずに手順だけを表で見られます。

  ┌──────────────────┐
  │ 1. onBuild     ↓ │ build.command from netlify.toml
  └──────────────────┘
  ┌──────────────────┐
  │ 2. onBuild     ↓ │ Functions bundling
  └──────────────────┘
  ┌──────────────────┐
  │ 3. onEnd       ↓ │ Save updated config
  └──────────────────┘

netlify.toml の主な項目

表（セクション）	主なキー	役割
[build]	base・command・publish・ignore	ビルドの場所・コマンド・公開フォルダ
[build.environment]	任意の名前	ビルド中の環境変数
[context.*]	[build] と同じ	デプロイの種類ごとの上書き
[[redirects]]	from・to・status・force	リダイレクト・書き換え・代理
[[headers]]	for・[headers.values]	レスポンスヘッダー
[functions]	directory・node_bundler	Functions のフォルダとまとめ方
[[plugins]]	package	ビルドプラグイン
[dev]	command・port・targetPort	netlify dev の設定

ドキュメントは、APIキーなどの秘密の値を netlify.toml に書かないよう勧めています。リポジトリに残るからです。

Netlifyのリダイレクト設定（_redirects とSPAの404）

この節では、リダイレクトの書き方と、SPA の再読み込みで 404 になる問題の直し方が分かります。

リダイレクトは、公開ディレクトリに置く拡張子なしの _redirects ファイルか、netlify.toml の [[redirects]] に書きます。両方あるときは _redirects が先に読まれ、上から順に最初に一致したルールだけが使われます。

# 旧URL → 新URL（恒久的な移動）
/blog/:year/:slug   /posts/:slug        301
/old-about          /about              301
# APIへの代理（プロキシ）
/api/*              https://api.example.com/:splat   200
# 国で振り分け
/                   /ja/                302   Country=jp
# SPA：どのURLでも index.html を返す（最後に書く）
/*                  /index.html         200

このファイルを、Netlify が使っている照合エンジン（@netlify/redirect-matcher）に読ませ、URL ごとにどのルールが当たるかを出しました。

/blog/2026/hello       -> 301 /posts/hello
/old-about             -> 301 /about
/api/users?id=7        -> 200 https://api.example.com/users
/                      -> 200 /index.html
/dashboard             -> 200 /index.html
/users/42              -> 200 /index.html
--- 日本から（国を jp にした場合）
/                      -> 302 /ja/

:year・:slug は1区切り分、* は残り全部に当たり、:splat で後ろに渡せます。/api/users?id=7 のクエリ文字列は、200・301・302 のルールでは自動で転送先に引き継がれます。

ステータスと記号の早見表

書き方	意味
301（省略時もこれ）	恒久的な移動。検索エンジンにも新URLを伝える
302	一時的な移動
200	書き換え。URLはそのままで別の中身を返す
404	指定したページを 404 として返す
200!（toml は force = true）	同じ場所にファイルがあっても必ず適用する
Country=jp・Language=ja	国・言語で分ける

307 は使えず、一時的な移動は 302 を使うとドキュメントにあります。代理（外部URLへの 200）は 26 秒で打ち切られます。

ファイルがあるときはルールが使われない（シャドーイング）

同じパスに実在のファイルがあると、! を付けない限りルールよりファイルが優先されます。 Netlify はこれを shadowing と呼びます。手元のエミュレーターで、about.html があるサイトに次の2通りを試しました。

# _redirects に「/about  /index.html  200」と書いたとき
GET /about -> 200
   body: <!doctype html><title>About</title>about.html

# _redirects に「/about  /index.html  200!」と書いたとき
GET /about -> 200
   body: <!doctype html><title>SPA</title><main id="app">SPA index</main>

この動きのおかげで、/* /index.html 200 を書いても、実在する CSS や画像はそのまま返ります。

React・Vue などの SPA で再読み込みすると 404 になる

SPA は index.html が1つしかなく、/dashboard のような URL は JavaScript が作っています。トップから画面内のリンクで移動すると表示されますが、その URL で再読み込みすると、Netlify は dashboard というファイルを探して見つからず、404 を返します。

直し方は、公開ディレクトリに次の1行を入れた _redirects を置くことです。Vite なら public/_redirects に置くと、ビルドで dist/ にコピーされます。

/*    /index.html   200

ほかのルールがあるときは、この行を最後に書きます。netlify.toml に書く場合は次の形です。

[[redirects]]
  from   = "/*"
  to     = "/index.html"
  status = 200

関連記事「React環境構築をViteで行う手順｜create viteの使い方」で扱っています。

書き間違えるとルールが無視される

netlify.toml の to を too と打ち間違えたところ、ビルドは止まらず、警告だけが出ました。

Warning: some redirects have syntax errors:
Could not parse redirect number 3:
  {"from":"/a","too":"/b"}
Missing "to" field

ドキュメントにも「処理できないリダイレクトやヘッダーのルールはビルドを失敗させず、ログの終わりと Deploy Summary に出る」とあります。リダイレクトが効かないときは、ビルドログの Warning を探します。

Netlifyのヘッダー設定（_headers）

この節では、セキュリティやキャッシュのヘッダーの付け方と、付かない場所が分かります。

ヘッダーは、公開ディレクトリの _headers ファイルか netlify.toml の [[headers]] に書きます。

/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff

/assets/*
  Cache-Control: public, max-age=31536000, immutable

先ほどの netlify.toml（/* に2つのヘッダー）のサイトを、Netlify の手元用エミュレーター（後の「よくあるエラー」の節のスクリプト）で呼び出した結果です。

GET /about -> 200
   headers: X-Frame-Options: DENY / X-Content-Type-Options: nosniff
   body: <!doctype html><html lang="ja"><meta charset="utf-8"><title>About</title><h1>About</h1></h
GET /docs/guide -> 200
   headers: X-Frame-Options: DENY / X-Content-Type-Options: nosniff
   body: <!doctype html><html lang="ja"><meta charset="utf-8"><title>About</title><h1>About</h1></h
GET /api/hello?name=RJC -> 200
   body: {"message":"hello, RJC","greeting":"こんにちは"}

/docs/guide は「/docs/* → /about（200）」の書き換えで、URL は変えずに about.html の中身が返っています。

静的ファイルには付きましたが、Function（/api/hello）の応答には付いていません。 ドキュメントにも、ヘッダーのルールは Netlify が保存しているファイルにだけ効き、代理先・Functions・Edge Functions（SSR のページを含む）の応答には効かないとあります。その場合は Function 自身がヘッダーを返します。

Netlifyの環境変数とデプロイコンテキスト

この節では、環境変数を置く場所と、Netlify が自動で入れる変数が分かります。

環境変数は、画面（Project configuration の Environment variables）・CLI（netlify env:set）・API・netlify.toml のどれでも設定できます。秘密の値は画面か CLI で設定し、netlify.toml には書かないのがドキュメントの勧めです。

netlify env:set API_KEY xxxxx --context production --secret
netlify env:set API_BASE https://staging.example.com --context deploy-preview

設定のしかた	Functions から読める	秘密の値にできる
画面・CLI・API	読める（スコープに Functions を含むとき）	できる
netlify.toml の environment	読めない（ビルド中だけ）	できない

netlify.toml に書いた変数は、ビルド中には使えますが、Functions の実行中には読めません。 API キーを Functions で使うなら、画面か CLI で設定します。値はデプロイのときに固定されるので、変えたら再デプロイが必要です。

Netlify が自動で入れる変数（読み取り専用）

変数	中身の例
NETLIFY	常に true。Netlify 上のビルドか見分ける
CONTEXT	production・deploy-preview・branch-deploy・dev
URL	サイトの正式な URL（独自ドメインがあればそれ）
DEPLOY_PRIME_URL	ブランチやプレビューの URL
DEPLOY_URL	デプロイ1回ごとの固有の URL
BRANCH・COMMIT_REF	ビルドしたブランチとコミット
CI	既定で true（よくあるエラーの節で使う）

Node.js の版は NODE_VERSION、npm の追加オプションは NPM_FLAGS で指定できます。Vite のアプリでブラウザー側に渡す変数は VITE_ で始める必要があります。関連記事「Reactの環境変数.envの使い方｜VITE_がundefinedの原因」で扱っています。

Netlify Functionsの使い方

この節では、サーバーレス関数を1つ作って呼び出すまでと、制限の値が分かります。

Functions は、netlify/functions/ に置いた JavaScript・TypeScript のファイルが、そのまま API になる仕組みです。Web 標準の Request を受け取り、Response を返します。

// netlify/functions/hello.mjs
export default async (req, context) => {
  const name = new URL(req.url).searchParams.get("name") ?? "world";
  return Response.json({
    message: `hello, ${name}`,
    greeting: process.env.GREETING ?? "(未設定)",
  });
};

export const config = { path: "/api/hello" };

エミュレーターで、環境変数 GREETING ありとなしで呼び出しました。

GET /api/hello?name=RJC -> 200
   body: {"message":"hello, RJC","greeting":"こんにちは"}
GET /.netlify/functions/hello -> (no response)

GET /api/hello -> 200
   body: {"message":"hello, world","greeting":"(未設定)"}

config の path を書かないと、Function は /.netlify/functions/hello で呼べます。path を書くと、その URL だけになり、/.netlify/functions/〜 では呼べなくなります。 上の2行目は、それを確かめた結果です。

項目	値（ドキュメント）
1回の実行時間の上限	60秒（変更不可）
バックグラウンド関数	15分
定期実行（Scheduled）	30秒
メモリ	既定 1024MB（Pro 以上で 4096MB まで）
受け渡しの大きさ	6MB（ストリーミングの応答は 20MB）
実行される地域	既定は米国オハイオ（cmh）。設定で変更できる

Edge Functions は、Functions とは別に、利用者に近い CDN の拠点で Deno をもとにした実行環境で動く仕組みです。リダイレクトより前に処理されます。

Netlify Formsでお問い合わせフォームを作る

この節では、サーバーを書かずにフォームの送信を受け取る方法が分かります。

<form> に name と data-netlify="true" を付けると、Netlify がデプロイのときにフォームを見つけ、送信を受け取って画面に保存します。

<form name="contact" method="POST" data-netlify="true" netlify-honeypot="bot-field">
  <p hidden><input name="bot-field"></p>
  <input name="email" type="email" required>
  <textarea name="message"></textarea>
  <button type="submit">送信</button>
</form>

• 1画面の Forms で「Enable form detection」を押した押した後の次のデプロイから、フォームを探すようになる
• 2フォームごとに違う name を付けたname が画面での一覧の名前になる
• 3React などで描画するフォームは、同じ項目の隠しフォームを HTML に置いたビルド時の HTML しか読まないため。送信側には hidden の form-name を入れる
• 4迷惑送信の対策を入れたnetlify-honeypot の隠し欄、または data-netlify-recaptcha="true"
• 5通知先を設定したForms → Submission notifications でメールや Webhook に送れる

すべての送信は Akismet で迷惑判定され、通ったものだけが「Verified submissions」に入ります。クレジット制のプランでは、フォームの送信は無料・無制限です。

Netlifyで独自ドメインとHTTPSを設定する

この節では、自分のドメインをつなぐ2つの方法と、DNS に書く値が分かります。

まず、プロジェクトの Domain management で「Add a domain」から独自ドメインを追加します。そのあと DNS をどちらで管理するかを決めます。

今の DNS に足すときの記録です（site-name はプロジェクト名）。

記録の種類	名前	値
ALIAS（ANAME・CNAME flattening）	example.com（apex）	apex-loadbalancer.netlify.com
A（ALIAS が無い DNS）	example.com（apex）	75.2.60.5
CNAME	www	site-name.netlify.app

値に https:// は付けません。反映には最大48時間ほどかかることがあり、dig www.example.com で確かめられます。独自ドメインの証明書は Let's Encrypt で自動発行・自動更新され、費用はかかりません。

関連記事「DNSレコードの種類一覧｜digの実出力で役割と設定ミスを確認」で扱っています。

デプロイプレビューとロールバック

この節では、公開前の確認と、公開後に前の版へ戻す方法が分かります。

機能	どうなるか	URL の形
Deploy Preview	プルリクエストごとに確認用のサイトができる	deploy-preview-12--名前.netlify.app
Branch deploy	本番以外のブランチも公開できる	ブランチ名--名前.netlify.app
デプロイの固定URL	1回ごとのデプロイに固有の URL	デプロイID--名前.netlify.app

戻したいときは、Deploys の一覧から戻したい版を開き、「Publish deploy」を押します。 新しくビルドはせず、残っている版に切り替えるだけなので、すぐに戻ります。ロールバックはクレジットを使いません。

ただし、Git 連携で自動公開がオンのままだと、次の push で上書きされます。原因を直すまで、Deploys の一覧で「Lock to stop auto publishing」を選んで自動公開を止めておきます。デプロイは既定で30日（有料プランは90日）後に消えますが、公開中の版と最新の成功した版は残ります。

プルリクエストのタイトルに [skip ci] か [skip netlify] を入れると、Deploy Preview を作りません。ビルドとリリースの違いやロールバックの考え方は、関連記事「デプロイとは｜ビルド・リリースとの違いとロールバックを実例で解説」で扱っています。

よくあるエラーと直し方（Page not found・ビルド失敗）

この節では、Netlify で出やすいエラーの原文と、原因・直し方が分かります。

Page not found（404）

公開した URL で、次の文の書かれた Netlify の 404 ページが出ることがあります。

Page not found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.

原因の見分け方を、上から順に確かめます。

flowchart TD
    A[Page not found] --> B{トップも 404}
    B -->|はい| C[公開フォルダと<br>index.html]
    B -->|いいえ| D{SPA で再読み込み}
    D -->|はい| E[SPA 用の<br>書き換えを足す]
    D -->|いいえ| F[ファイル名の<br>大文字小文字]

原因	確かめ方	直し方
公開ディレクトリが違う	Build settings の Publish directory を見る	dist など実際の出力先にする
index.html がルートに無い	Deploy の「Deploy file browser」で中身を見る	フォルダごとドロップしていないか確かめる
SPA の再読み込み	トップからは開ける	/* /index.html 200 を足す
大文字小文字の違い	Windows・Mac では動く	git mv でファイル名を直してコミット
代理先が 404	代理先の URL を直接開く	代理先の URL を直す

公開ディレクトリに 404.html を置くと、見つからない URL ではリダイレクトの設定なしでそのページが返ります（この記事のプロジェクトの src/404.html）。Netlify の既定の 404 ページの代わりに、サイトのデザインで案内できます。

Netlify のファイルは大文字と小文字を区別します。 Windows や Mac では Logo.png と logo.png が同じ扱いなので、手元では気づけません。名前を変えるだけのコミットでは Git に伝わらないことがあるため、git mv を使います。

ビルドが失敗する

Netlify のビルドログの最後には、次の行が出ます（ドキュメントの原文。「Bulid」の綴りも原文のまま）。

Bulid failed due to a user error: Build script returned non-zero exit code: 2
Failing build: Failed to build site

この行は結果で、原因はその上にあります。 手元で npm run buld と打ち間違えた設定にして netlify build --offline を実行すると、次のようになりました（netlify build の終了コードは 2）。

$ npm run buld
npm error Missing script: "buld"
npm error
npm error Did you mean this?
npm error   npm run build # run the "build" package script
（中略）
"build.command" failed
────────────────────────────────────────────────────────────────
  Error message
  Command failed with exit code 1: npm run buld
  Error location
  In build.command from netlify.toml:
  npm run buld

Error location に、どの設定のどのコマンドが失敗したかが出ます。netlify.toml の書き方を間違えたときは、ビルドの前に止まり、行と位置が示されました。

 ›   Error: When resolving config file ~/netlify-demo/netlify.toml:
Could not parse configuration file
Invalid TOML document: control characters are not allowed in strings

2:    command   = "npm run build"
3:    publish   = "dist
                       ^

エラー早見表

エラー（原文）	原因	直し方
Build script returned non-zero exit code: 2	ビルドコマンドが失敗した	ログを上にたどり、最初のエラーを直す
Missing script: "buld"	package.json に無いスクリプト名	ビルドコマンドの綴りを直す
Invalid TOML document	netlify.toml の書き方の誤り	示された行の引用符・括弧を直す
Missing "to" field	リダイレクトのキーの誤り（警告のみ）	to などのキー名を直す
gulp: command not found	依存が入っていない	package.json をベースディレクトリに置く
手元では通るのに警告で失敗	CI=true で警告がエラー扱い	ビルドコマンドを CI='' npm run build にする
Could not resolve dependency	npm の peer 依存の衝突	NPM_FLAGS に --legacy-peer-deps
Site not available	クレジットを使い切った	翌期間を待つか、プランを上げる
Authentication required.	CLI でログインしていない	netlify login か NETLIFY_AUTH_TOKEN

CI=false ではなく CI=''（空）にするのは、多くのライブラリが空でない文字列を「真」と見なすためだとドキュメントにあります。キャッシュが原因に見えるときは、Deploys の「Retry without cache」でキャッシュなしのビルドをやり直します。

netlify dev が「fetch failed」で止まる

netlify dev や netlify serve は、Edge Functions を手元で動かすための Deno を dl.deno.land から取得します。社内プロキシなどでそこへ出られないと、最初のリクエストで次のように止まりました。

 ›   Error: Netlify CLI has terminated unexpectedly.
Error: fetch failed
    at prepareServer (file:///…/netlify-cli/dist/lib/edge-functions/proxy.js:160:16)

dl.deno.land への接続を許可してもらうのが確実です。Edge Functions を使わずにリダイレクトや Functions の動きだけを見たいときは、Vite を使うプロジェクトなら @netlify/vite-plugin、それ以外は netlify-cli に同梱の @netlify/dev（Netlify が出している手元用のエミュレーター）を Edge Functions なしで使う方法があります。この記事のエミュレーターの出力は、次のスクリプトで取りました。

// emu.mjs：node emu.mjs <プロジェクトのフォルダ> <パス>...
import { NetlifyDev } from "@netlify/dev";

const dev = new NetlifyDev({
  projectRoot: process.argv[2],
  edgeFunctions: { enabled: false },
  blobs: { enabled: false },
  aiGateway: { enabled: false },
  geolocation: { enabled: false },
  images: { enabled: false },
});
await dev.start();
for (const path of process.argv.slice(3)) {
  const headers = [];
  const res = await dev.handle(
    new Request("http://localhost:29800" + path, { redirect: "manual" }),
    { headersCollector: (k, v) => headers.push(`${k}: ${v}`) },
  );
  if (!res) { console.log(`GET ${path} -> (no response)`); continue; }
  console.log(`GET ${path} -> ${res.status}`, res.headers.get("location") ?? "");
  if (headers.length) console.log("   headers: " + headers.join(" / "));
  console.log("   body: " + (await res.text()).slice(0, 90));
}
await dev.stop();

$ node emu.mjs . /old-about /.netlify/functions/hello
GET /old-about -> 301 http://localhost:29800/about
   body: 
GET /.netlify/functions/hello -> (no response)

301 の後ろは Location ヘッダーの値で、/about へ移動するよう返しています。

なお @netlify/dev は、フレームワークの開発サーバーと一緒に使う前提のため、/* /index.html 200 だけは読み飛ばします。SPA のルールは、前の節のように照合エンジンで確かめました。

Vercel・Cloudflare Pages・GitHub Pagesとの違い

この節では、よく比べられる3つのサービスとの事実の違いと、選び方が分かります。

各社の公式ページの記載です（2026年10月22日時点）。

項目	Netlify	Vercel	Cloudflare Pages	GitHub Pages
無料の枠	月300クレジット	Hobby（転送 月100GB など）	静的ファイルへのリクエストは無料・無制限	転送 月100GB（目安）
有料の始まり	$9／月（Personal）	$20／月（Pro）	Workers の有料プラン	単体の有料プランは無い
無料での商用利用	認められている（Netlify ブログ）	Hobby は個人・非商用	制限ページに記載なし	オンラインビジネス・EC には使わない
サーバー側の処理	Functions・Edge Functions	Functions（最長300秒）	Pages Functions（Workers と共通で1日10万回）	なし（静的のみ）
無料のビルドの上限	クレジットで管理	1日100デプロイ	月500ビルド	1時間10ビルド（目安）
フォーム受信	あり（Netlify Forms）	なし	なし	なし

Cloudflare は、新しいプロジェクトは Pages ではなく Workers で始めるよう案内しています。GitHub Pages は公開サイトが 1GB まで、1アカウント1つのユーザーサイトという制限もあります。Google の Firebase Hosting も同じ用途で使われます。

迷ったときの判断表

状況	選ぶもの	理由
フォームつきの小さな会社・お店のサイト	Netlify	無料で商用利用でき、フォームが標準で付く
Next.js の機能をそのまま使いたい	Vercel	Next.js の開発元のサービス
アクセスが多い静的サイトを安く配りたい	Cloudflare Pages	静的ファイルのリクエストが無料・無制限
ライブラリのドキュメント・個人の技術メモ	GitHub Pages	リポジトリの設定だけで公開できる
PHP・WordPress を動かしたい	レンタルサーバーなど	4つともサーバーで PHP を動かさない

どのサービスでも、ビルドコマンドと公開ディレクトリの考え方は同じです。サービスごとの設定の違いは、関連記事「Nuxtのデプロイ方法｜Node・Docker・Vercel等をpreset別に実測」で扱っています。

よくある質問

Q. Netlifyとは何ですか？ A. Web サイトやアプリのビルドから、CDN での配信・HTTPS・プレビュー・フォーム受信・サーバーレス関数までをまとめて受け持つサービスです。冒頭の図の流れで動きます。

Q. Netlifyは無料で使えますか？いつまで無料ですか？ A. Free プランは期限なしの $0 で、毎月300クレジットまで使えます。クレジットカードの登録は要りません。上限で止まるため、知らないうちに請求されることはありません。

Q. 無料プランで商用利用できますか？ A. Netlify ブログ「Introducing Netlify Free plan」に、無料プランで商用のプロジェクトも使えると書かれています。Vercel の Hobby プランは個人・非商用向けなので、ここが違います。

Q. 2025年より前に作ったアカウントの料金はどうなりますか？ A. 2025年9月4日より前に作ったアカウントは、以前のプランをそのまま続けられます。チームのオーナーは「Usage & billing」からクレジット制へ移れます。

Q. Netlify の読み方は？ A. 「ネットリファイ」と読みます。

Q. Vercel と Netlify はどちらを選べばいいですか？ A. Next.js を中心に使うなら Vercel、フォームや無料での商用利用を重視するなら Netlify が選ばれやすいです。前の節の判断表で、状況ごとに比べています。

Q. PHP や WordPress は動きますか？ A. サーバーで PHP を動かす仕組みはありません。PHP_VERSION はビルドのときに使う PHP の版の指定です。WordPress を静的な HTML に書き出して置く使い方はできます。

Q. デプロイは成功したのに Page not found になります。 A. 多くは公開ディレクトリの指定違いか、SPA のリダイレクトの書き忘れです。「よくあるエラーと直し方」の図の順に確かめます。

Q. 独自ドメインは無料で使えますか？ A. 独自ドメインをつなぐことと HTTPS の証明書は Free プランでも使えます。ドメインそのものの取得費用は、取得したサービスに払います。

Q. Netlify のサーバーは日本にありますか？ A. 静的ファイルは世界中の CDN から配信されます。Functions は既定で米国オハイオで動き、設定で地域を変えられます。

Q. Netlify CMS とは何ですか？ A. Netlify が作ったオープンソースの CMS で、今は Decap CMS という名前になり、パートナー企業の PM が開発を続けています。

まとめ

• Netlify は、ビルド・CDN 配信・HTTPS・プレビュー・Functions・フォームをまとめて受け持つホスティングサービス。用意するのはビルドコマンドと公開ディレクトリの2つ。
• 料金は2026年10月22日時点でクレジット制。Free は月300で、本番デプロイ1回15、転送 1GB 20。上限で止まり、請求は発生しない。
• デプロイはドロップ・Git 連携・CLI の3つ。継続して育てるサイトは Git 連携、CI からは netlify deploy --prod。
• netlify.toml の値は画面の設定より優先される。netlify build --offline で、ログインなしにビルドの手順を手元で確かめられた。
• SPA の再読み込みの 404 は /* /index.html 200。実在のファイルはルールより優先され、書き間違えたルールは警告だけで無視される。
• ヘッダーは Functions の応答には付かない。netlify.toml の環境変数は Functions から読めない。

参考・出典

確認日はいずれも 2026年10月22日です。

• Netlify「Pricing」：https://www.netlify.com/pricing/
• Netlify Docs「Credit-based pricing plans」：https://docs.netlify.com/manage/accounts-and-billing/billing/billing-for-credit-based-plans/credit-based-pricing-plans/
• Netlify Docs「How credits work」：https://docs.netlify.com/manage/accounts-and-billing/billing/billing-for-credit-based-plans/how-credits-work/
• Netlify Docs「What is Netlify」：https://docs.netlify.com/start/what-is-netlify/
• Netlify Docs「Ways to create deploys」：https://docs.netlify.com/deploy/create-deploys/
• Netlify Docs「Manage deploys」：https://docs.netlify.com/deploy/manage-deploys/manage-deploys-overview/
• Netlify Docs「File-based configuration」：https://docs.netlify.com/build/configure-builds/file-based-configuration/
• Netlify Docs「Redirects and rewrites」：https://docs.netlify.com/manage/routing/redirects/overview/
• Netlify Docs「Redirect options」：https://docs.netlify.com/manage/routing/redirects/redirect-options/
• Netlify Docs「Rewrites and proxies」：https://docs.netlify.com/manage/routing/redirects/rewrites-proxies/
• Netlify Docs「Custom headers」：https://docs.netlify.com/manage/routing/headers/
• Netlify Docs「Environment variables overview」：https://docs.netlify.com/build/environment-variables/overview/
• Netlify Docs「Build environment variables」：https://docs.netlify.com/build/configure-builds/environment-variables/
• Netlify Docs「Functions: Get started」：https://docs.netlify.com/build/functions/get-started/
• Netlify Docs「Functions: Configuration」：https://docs.netlify.com/build/functions/configuration/
• Netlify Docs「Functions: Environment variables」：https://docs.netlify.com/build/functions/environment-variables/
• Netlify Docs「Forms setup」：https://docs.netlify.com/manage/forms/setup/
• Netlify Docs「Spam filters」：https://docs.netlify.com/manage/forms/spam-filters/
• Netlify Docs「Get started with domains」：https://docs.netlify.com/manage/domains/get-started-with-domains/
• Netlify Docs「HTTPS (SSL)」：https://docs.netlify.com/manage/domains/secure-domains-with-https/https-ssl/
• Netlify Docs「Customize project name and cover image」：https://docs.netlify.com/manage/projects/customize-project-name-and-cover-image/
• Netlify Docs「Build troubleshooting tips」：https://docs.netlify.com/build/configure-builds/troubleshooting-tips/
• Netlify Docs「Error reference」：https://docs.netlify.com/resources/troubleshooting/error-reference/
• Netlify Docs「Get started with Netlify CLI」：https://docs.netlify.com/api-and-cli-guides/cli-guides/get-started-with-cli/
• Netlify Docs「Local development with Netlify CLI」：https://docs.netlify.com/api-and-cli-guides/cli-guides/local-development/
• Netlify Support Forums「I've deployed my site but I still see "Page not found"」：https://answers.netlify.com/t/support-guide-i-ve-deployed-my-site-but-i-still-see-page-not-found/125
• Netlify Blog「Introducing Netlify Free plan」：https://www.netlify.com/blog/introducing-netlify-free-plan/
• Netlify Blog「Netlify CMS to become Decap CMS」：https://www.netlify.com/blog/netlify-cms-to-become-decap-cms/
• Wikipedia「Netlify」：https://en.wikipedia.org/wiki/Netlify
• Vercel「Pricing」：https://vercel.com/pricing
• Vercel Docs「Limits」：https://vercel.com/docs/limits
• Cloudflare Docs「Pages」：https://developers.cloudflare.com/pages/
• Cloudflare Docs「Pages limits」：https://developers.cloudflare.com/pages/platform/limits/
• Cloudflare Docs「Pages Functions pricing」：https://developers.cloudflare.com/pages/functions/pricing/
• GitHub Docs「GitHub Pages limits」：https://docs.github.com/en/pages/getting-started-with-github-pages/github-pages-limits
• npm「netlify-cli」：https://www.npmjs.com/package/netlify-cli

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。