1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@n-kanchika

React（Vite）製サイトを Netlify で公開するまで｜サイト運営初心者が迷った4つのポイント

1
Last updated at Posted at 2026-10-28

はじめに

React + TypeScript + Vite で作ったポートフォリオサイトを、Netlify で公開しました。
私はサイトの開発経験はありますが、自身でサイト運営をするのは初めてです。
手順自体は数分で終わりましたが、設定画面の項目ひとつひとつで「これはどうすればいいのか」と手が止まりました。

この記事では、公開の手順に加えて、サイト運営初心者の自分が迷ったポイントと、そう判断した理由 をまとめます。

この記事でわかること

  • Netlify がどんなサービスか
  • AWS（S3 + CloudFront）と比べて、Netlify を選んだ理由
  • GitHub と連携して公開するまでの手順
  • 迷いやすい4つのポイント（GitHub の権限／Node のバージョン／リロード時の404／Base directory）

対象読者

  • React などで作ったサイトを、初めてインターネットに公開しようとしている人
  • Netlify と AWS のどちらを使うか迷っている人

環境（2026年10月時点）

項目 バージョン
Node.js 24
React 19
Vite 8
React Router 8

Netlify は管理画面のメニュー名や料金体系がよく変わります。この記事の内容は2026年10月時点のものです。最新の情報は公式ドキュメントを確認してください。

Netlify とは

Netlify は、Web サイトを公開（ホスティング）するためのサービスです。
特に、HTML・CSS・JavaScript だけで動くサイト（React や Vite でビルドしたサイトなど）の公開を得意としています。

主な特徴は次の3つです。

  1. GitHub と連携した自動デプロイ
    リポジトリを連携しておくと、main ブランチに push するたびに Netlify が自動でビルドし、サイトを更新してくれます。
  2. デプロイプレビュー
    Pull Request を作ると、その変更を反映したプレビュー用の URL が自動で発行されます。本番に反映する前に、実際の画面で確認できます。
  3. 無料プランがある
    個人のポートフォリオ程度なら、無料プランで運用できます。

無料プランの注意点

Netlify の無料プランは、使った分だけ「クレジット」を消費する仕組みです。

  • 毎月 300クレジット まで使える（毎月リセット）
  • 本番デプロイ1回につき 15クレジット を消費する（300クレジットすべてを使うと、月20回程度）
  • デプロイプレビューはクレジットを消費しない
  • 上限に達すると、次の請求サイクルまでサイトが一時停止 し、閲覧もできなくなる。無料プランでは、クレジットを追加購入することもできない

上限を超えると、同じチーム内の すべてのサイト が停止します。main に細かく何度もマージすると、その回数だけ本番デプロイが走るので注意が必要です。

私の場合、作業ブランチで確認してからまとめてマージするようにしています。

Netlify を選んだ理由

公開先の候補として、Netlify と AWS（S3 + CloudFront）を比較しました。

比較 Netlify AWS（S3 + CloudFront）
公開までの手間 GitHub と連携するだけ S3・CloudFront・証明書などを自分で組み合わせる
自動デプロイ 標準で用意されている GitHub Actions などを自分で用意する
リロード時の404対策 _redirects ファイル1行 CloudFront のエラーレスポンスを設定する
HTTPS 自動 証明書の設定が必要
料金 無料プランあり（クレジット制） CloudFront に無料の定額プランあり
自由度 Netlify が用意した範囲内 ほぼ何でもできる

料金はどちらも無料の範囲で始められるため、決め手にはなりませんでした。
違いが大きかったのは 公開までの手間 と 設定ミスのリスク です。

Git の main ブランチにマージするだけで更新できるのは、初めてサイト運営をする私にとって非常に魅力的でした。AWS でも自動デプロイは実現できますが、GitHub Actions や権限の設定を自分で組む必要があります。AWS はまだ使用経験がないため、確実に公開状態にしておける Netlify を使用することにしました。
とはいえ、AWS はいずれ学んでいきたいと思っているので、別サイト作成時にじっくり学ぶ予定です。

公開の手順

1. GitHub のリポジトリを連携する

Netlify にログインし、「Add new project」→「Import an existing project」→「GitHub」を選びます。

Netlifyの新規プロジェクト作成画面
※画像は2つ目のプロジェクトを作成するときの画面です。初回は表示される画面が異なる場合がありますが、「GitHub」を選ぶ点は同じです。

GitHub 側で、Netlify にリポジトリへのアクセスを許可する画面が表示されます（→ ポイント1）。

2. リポジトリを選ぶ

連携したリポジトリの一覧から、公開したいリポジトリを選びます。

連携するリポジトリの選択画面

3. ビルドの設定をする

Vite のプロジェクトであれば、ほとんどの項目が自動で入力されます。

項目 設定した値 説明
Project name nana-kanchika ○○.netlify.app の ○○ の部分になる
Branch to deploy main このブランチに push されたら本番に反映される
Base directory 空欄 → ポイント4
Build command npm run build ビルドするコマンド
Publish directory dist Vite がビルド結果を出力するフォルダ
Functions directory netlify/functions（初期値のまま） → ポイント4

Netlifyのビルド設定画面
※画像は記事用に再度操作して撮影したため、プロジェクト名が実際のものと異なります。

Project name は空欄にするとランダムな名前になります。ポートフォリオとして使う場合は、自分の名前などを入れておくと誰のサイトか一目でわかります。

4. デプロイする

「Deploy」を押すと、1〜2分でビルドが終わり、https://○○.netlify.app にサイトがデプロイされます。

ただし、2026年7月28日以降に作られたチームでは、新しいプロジェクトは最初 非公開（Private） になります。この時点ではまだ、Netlify にログインしている自分しか見られない状態です。

5. 「Make public」を押して一般公開する

プロジェクトの画面で「Make public」を押すと、ログインしていない人もサイトを見られるようになります。

Make Publicボタン

押した後は、ログインしていないブラウザ（シークレットウィンドウなど）で https://○○.netlify.app を開き、サイトが表示されるかを確認します。

Netlify にログインしたままだと、「Make public」を押さなくても公開されているように見えます（私はてっきり公開されていると思っていました）。
しかし実際にはログインしていないユーザーからは見えていないので、必ず「Make public」を押しましょう。

なお独自ドメイン（有料）を取得して設定することもできます。

迷ったポイント

ポイント1：GitHub の権限は「Only select repositories」にする

GitHub と連携するとき、Netlify にアクセスを許可するリポジトリを選ぶ画面が表示されます。

  • All repositories：自分のすべてのリポジトリ（今後作るものも含む）
  • Only select repositories：選んだリポジトリだけ

GitHubでNetlifyに許可するリポジトリを選ぶ画面

自分は Only select repositories を選び、公開するリポジトリだけを許可しました。
Netlify が必要とするのは公開するサイトのリポジトリだけなので、それ以外のリポジトリへのアクセスを許可する理由がないからです。後から別のリポジトリを追加したくなっても、GitHub の設定画面から追加できます。

GitHub の公式ドキュメントでも、GitHub App をインストールする前に、提供元が信頼できるかと、要求されている権限を確認するよう案内されています。

画面に「Read and write access to checks, commit statuses, issues, and pull requests」と書かれていて驚きましたが、これはコードを書き換える権限ではありません。Pull Request の画面にビルドの成否やデプロイプレビューの URL を表示するために使われます。

ポイント2：Node のバージョンは .nvmrc で明示する

リポジトリの直下に .nvmrc というファイルを置き、Node のバージョンを書いておくと、Netlify はそのバージョンでビルドします。

.nvmrc
24

Netlify には Node のバージョンを指定する方法がいくつかありますが、.nvmrc が最も優先されます。

Vite は動かすのに必要な Node のバージョンが決まっています（Vite 公式では20.19以上、または22.12以上）。2026年10月時点では Netlify の既定のバージョンは Node 24 なので、指定しなくてもビルドは通ります。それでも .nvmrc を置いたのは、次の2つの理由からです。

  • ローカル（Docker）と本番でバージョンを揃えるため
    手元の開発環境は Docker の Node 24で動かしています。バージョンをファイルに書いておけば、「手元では動くのに本番では動かない」状態を防げます。
  • どのバージョンで動かしているかを、リポジトリを見ればわかるようにするため
    Netlify はサイトを作った時点の既定のバージョンでサイトを固定します。管理画面を見ないとバージョンがわからない状態は避けたいと考えました。

ポイント3：リロードすると404になる問題は _redirects で解決する

React Router などを使ったサイト（SPA）では、ページの切り替えをブラウザ側の JavaScript で行っています。
そのため、サーバー上に実在するファイルは index.html だけです。

トップページからリンクで /works/xxx に移動するときは問題ありません。しかし、/works/xxx を直接開いたり、そのページでリロードしたりすると、サーバーは /works/xxx というファイルを探しにいき、見つからないので 404エラー を返してしまいます。

Netlify では、public フォルダに _redirects というファイルを置くことで解決できます。

public/_redirects
/*  /index.html  200

これは「どの URL にアクセスされても index.html を返す」という設定です。index.html が読み込まれたあとは、React Router が URL を見て正しいページを表示してくれます。

  • 最後の 200 は、URL はそのままで中身だけ index.html を返す（リライト）という意味です
  • Vite では public フォルダのファイルはビルド時に dist にそのままコピーされるので、dist/_redirects として Netlify に届きます
  • 画像や CSS など、実在するファイルへのアクセスはこのルールより優先されるので、正しく表示されます

この _redirects は Netlify 専用の仕組みです。AWS など別のサービスで公開する場合は、そのサービスに合った方法で同じ設定をする必要があります（CloudFront なら、403・404のエラー時に /index.html を返す設定をします）。

ポイント4：Base directory と Functions directory は空欄・初期値のままでよい

設定画面に見慣れない項目が並んでいて、入力が必要なのか迷いました。

Base directory は、Netlify が package.json を探してビルドを実行するフォルダです。空欄の場合はリポジトリの一番上の階層になります。

# Base directory が不要な構成（今回）
portfolio/
├── package.json   ← 一番上にある
├── src/
└── public/

# Base directory の指定が必要な構成の例
my-repo/
├── frontend/
│   ├── package.json   ← サブフォルダにある → Base directory に「frontend」と書く
│   └── src/
└── backend/

今回は package.json がリポジトリの一番上にあるので、空欄のままにしました。

Functions directory は、Netlify Functions（サーバー側で処理を動かす機能）のファイルを置くフォルダです。初期値は netlify/functions です。
今回のサイトはサーバー側の処理を使わないので、初期値のままにしました。フォルダが存在しなくても問題なくデプロイできます。

まとめ

  • Netlify は、GitHub と連携するだけで React（Vite）製のサイトを公開できる
  • 無料プランは月300クレジットの上限付き。本番デプロイの回数に注意する
  • GitHub の権限は、必要なリポジトリだけに絞る
  • Node のバージョンは .nvmrc に書いて、ローカルと本番で揃える
  • SPA のリロード時の404は public/_redirects で解決できる
  • 新しいチームではデプロイ後も非公開のまま。「Make public」を押し、ログインしていないブラウザで表示を確認する

次は AWS を使用してサイト公開をしてみたいです。自身でサイト運営をするのは初めてなので、これから更新していくのが楽しみです。

参考

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?