Netlifyとは？Webサイトの公開手順を実践解説

「Netlify」は、HTMLやVue.js・Reactなどで作ったWebサイトを、サーバーを用意せずに公開できるプラットフォームです。
GitHubと連携すればコードをプッシュするだけで公開中のサイトが自動で更新され、フォルダをドラッグ＆ドロップするだけで公開することもできます。
ポートフォリオや学習用サイト、個人開発したWebアプリを手軽に公開したい場面に向いており、基本的な機能は無料プランで利用できます。
本記事では、実際の画面を見ながらNetlifyでWebサイトを公開するまでの手順を解説し、料金・無料枠や独自ドメインの設定方法もあわせて紹介します。

Netlifyとは

Webサイト・Webアプリを公開できるプラットフォーム

Netlify（読み方：ネットリファイ）は、WebサイトやWebアプリケーションの構築・公開・運用を支援するプラットフォームです。
特に、HTMLやCSS、JavaScriptなどを利用したフロントエンド開発との相性がよく、Vue.jsやReactなどのフレームワークで作成したプロジェクトを公開する際にも利用できます。

Netlifyでは、作成したファイルをアップロードしたり、GitHubなどのリポジトリと連携したりすることで、サーバーの準備や環境設定を自分で行わなくても、Webサイトを公開できます。
また、ビルド（ソースコードから公開用のファイルを生成する処理）やデプロイ（ファイルを公開環境に配置し、利用できる状態にすること）の自動化、サーバー側の処理の実行など、Web開発に役立つさまざまな機能を提供しています。

Netlifyでできること

Netlifyでは、主に次のような機能を利用できます。

• Webサイトの公開と自動デプロイ：リポジトリとの連携によるサイトの公開や、コード更新時の自動デプロイ
• プレビュー環境の作成：プルリクエストなどに応じて、プレビュー用のURLを発行
• サーバー側の処理の実行（Netlify Functions）：外部APIとの通信や、認証情報を利用する処理などに活用
• フォームの受付（Netlify Forms）：対応するHTMLフォームから送信されたデータを受付
• データの保存（Netlify Database、Netlify Blobsなど）：用途に応じたデータの保存・管理

これらの機能を組み合わせることで、シンプルなポートフォリオサイトから、フォームや外部サービスとの連携を備えたWebアプリケーションまで、さまざまな用途に対応できます。

Netlifyのメリット・デメリット

Netlifyを使うかどうか判断するために、主なメリットとデメリットを整理しておきましょう。

【メリット】

• サーバーの構築・管理が不要：画面の案内に従って設定するだけで、Webサイトを公開できる
• 更新の手間が少ない：GitHubにプッシュするだけで、自動的にデプロイされる
• Gitを使わずに公開することもできる：Netlify Dropなら、フォルダをドラッグ＆ドロップするだけで公開できる
• 無料で始められる：Freeプランでも、独自ドメインやHTTPS（SSL）を利用できる

【デメリット・注意点】

• 無料枠を使い切るとサイトが停止する：Freeプランでは、月間のクレジットを使い切ると、次の請求サイクルまですべてのサイトが表示されなくなる
• 本番環境へのデプロイでも無料枠を消費する：頻繁に本番環境を更新すると、アクセスが少なくてもクレジットが減っていく
• 新しく作成したサイトは非公開から始まる場合がある：初期状態では自分しか閲覧できないため、公開設定の変更が必要になる
• 管理画面や公式ドキュメントが英語：画面の表記は英語のため、慣れるまでは操作に戸惑うことがある

料金や無料枠の詳細は、実践手順の後の「Netlifyの料金・無料プランでできること」で詳しく解説します。

【実践】GitHub連携でVue.jsサイトを自動デプロイする

ここからは、Vue.jsで作成したサンプルプロジェクトを使用して、実際にWebサイトを公開するまでの手順を紹介します。
全体の流れは次のとおりです。

1. Vue.jsプロジェクトを作成し、GitHubにアップロードする
2. GitHubアカウントでNetlifyに登録する
3. リポジトリをインポートし、ビルド設定を確認する
4. デプロイを実行し、公開URLを確認する
5. コードを修正してプッシュし、自動デプロイを確認する

GitやNode.jsを使わずに、手元のHTMLファイルをすぐに公開したい場合は、次の章の「【実践】Netlify Dropでファイルをすぐ公開する」から読み進めてください。

事前準備：Vue.jsプロジェクトを用意する

まずは、公開するVue.jsプロジェクトを用意します。
（すでにプロジェクトがある場合は、そのプロジェクトを利用しても問題ありません）

新しく作成する場合は、Node.jsとnpmがインストールされた環境で、ターミナルから次のコマンドを実行します。
2026年10月時点のプロジェクト作成ツール（create-vue）では、Node.js 22.18以上（または24.12以上）が必要です。

npm create vue@latest

npm create vue@latest

コマンドを実行すると、プロジェクト名や追加する機能などについての質問が表示されます。
本記事では、プロジェクト名（Project name）を「netlify-vue-sample」とし、それ以外は作成したいプロジェクトに合わせて選択します（特に必要がなければ、追加機能は選択しなくても構いません）。
プロジェクトの作成が完了したら、ディレクトリへ移動して依存パッケージをインストールします。

cd netlify-vue-sample
npm install

cd netlify-vue-sample
npm install

次に、公開用のファイルを生成できることを確認します。

npm run build

npm run build

正常に処理が完了すると、次のようにdistディレクトリに公開用のファイルが生成されます（ファイル名の英数字やサイズは環境によって異なります）。

vite v8.3.4 building client environment for production...
transforming...
✓ 27 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                  0.42 kB │ gzip:  0.28 kB
dist/assets/index-CyVfN59t.css   3.56 kB │ gzip:  1.16 kB
dist/assets/index-BjrqleB5.js   73.19 kB │ gzip: 28.33 kB

✓ built in 432ms

vite v8.3.4 building client environment for production...
transforming...
✓ 27 modules transformed.
rendering chunks...
computing gzip size...
dist/index.html                  0.42 kB │ gzip:  0.28 kB
dist/assets/index-CyVfN59t.css   3.56 kB │ gzip:  1.16 kB
dist/assets/index-BjrqleB5.js   73.19 kB │ gzip: 28.33 kB

✓ built in 432ms

Netlifyでは、このビルド処理をNetlify上で実行し、生成されたファイルを公開する仕組みを利用します。

作成したプロジェクトが無事にビルドできることを確認したら、GitHubにアップロードしておきましょう。
GitHub上で「netlify-vue-sample」という名前の空のリポジトリを作成した後、プロジェクトのディレクトリで次のコマンドを実行します。

git init
git add -A
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/<GitHubのユーザー名>/netlify-vue-sample.git
git push -u origin main

git init
git add -A
git commit -m "initial commit"
git branch -M main
git remote add origin https://github.com/<GitHubのユーザー名>/netlify-vue-sample.git
git push -u origin main

「<GitHubのユーザー名>」の部分は、ご自身のGitHubのユーザー名に置き換えてください。
なお、distディレクトリやnode_modulesディレクトリは、プロジェクト作成時に用意される.gitignoreによってアップロードの対象外になっています。

▼こちらもチェック▼

【画像付き】GitHubの使い方｜設定・基本操作 ▶

GitHubアカウントでNetlifyに登録する

プロジェクトの準備が完了したら、続いてNetlifyのアカウントを作成しましょう。

Netlifyの公式サイトにアクセスし、「Sign up」を押してアカウントの作成ページに移動します。
作成方法はさまざまですが、今回はGitHubと連携して使うため、GitHubアカウントを利用して作成します。

「Sign up with GitHub」を押すとGitHubへのログイン画面が表示されるので、使用したいアカウントでログインして連携しましょう。

初回ログイン時は、チーム名などの初期設定を求められる場合があります。
画面の案内に従って進めてください。

リポジトリをインポートする

作成したアカウントでログインした後、プロジェクトの新規作成画面を開きます。
「Import a Git repository」の中から、リポジトリを管理しているサービス（今回は「GitHub」）を選択します。

GitHubを選択すると、NetlifyのアプリをGitHubアカウントにインストールする画面が表示されます。
「Only select repositories」を選んで公開したいリポジトリ（今回はnetlify-vue-sample）を指定し、「Install」を押しましょう。
「All repositories」を選ぶと、アカウント内のすべてのリポジトリへのアクセスを許可することになるため、必要なリポジトリだけを選択するのがおすすめです。

ビルド設定を確認する

インストールが完了すると、以下のようにリポジトリの一覧が表示されます。

ここからリポジトリを選択すると、ビルド設定の画面に進みます。

今回のサンプルのようなプロジェクト構成の場合、一般的に次の設定を使用します。

Netlifyがフレームワークを検出すると、設定値が自動的に入力される場合がありますが、デプロイ前に必ず正しい内容が入力されているかを確認するようにしましょう。
ビルド設定を含め、必要な項目の入力が完了したら、ページ下部の「Deploy」ボタンを押してデプロイを開始します。

デプロイを実行し公開URLを確認する

デプロイを開始すると、Netlifyがリポジトリからソースコードを取得し、設定したビルドコマンドを実行します。
ビルドが成功すると、生成されたファイルが公開環境へ配置され、「プロジェクト名.netlify.app」のような公開用のURLが発行されます。

処理が完了したら、表示された公開URLをクリックして、Webサイトが正しく表示されることを確認してください。

ただし、上の画面のようにプロジェクト名の横に「Private」と表示されている場合、サイトは非公開の状態です。
2026年7月28日以降に作成されたチームでは、新しいプロジェクトが非公開の状態で作成されるため、Freeプランではチームのオーナー（自分）しか閲覧できず、他の人がURLを開くと「アクセス権がない」旨のページが表示されます。

誰でも閲覧できるようにするには、本番環境へのデプロイが1回以上成功した後に「Make public」を押して、サイトを公開します。
公開範囲は、プロジェクトの「Project configuration」→「General」→「Visitor access」からも変更できます。
詳しくは、プロジェクトの公開範囲（Netlify公式ドキュメント）を参照してください。

コードを修正・pushし、自動で再デプロイされることを確認する

最後に、コードを修正して、自動デプロイを確認してみましょう。
ここでは、トップページに表示される見出しを変更します。
src/App.vueを開き、HelloWorldコンポーネントのmsgの値を「You did it!」から「Hello Netlify!」に書き換えて保存します。

<HelloWorld msg="Hello Netlify!" />

<HelloWorld msg="Hello Netlify!" />

変更内容をコミットして、GitHubへプッシュします。

git add src/App.vue
git commit -m "Update page text"
git push origin main

git add src/App.vue
git commit -m "Update page text"
git push origin main

GitHubのリポジトリへ変更が反映されると、Netlifyが更新を検知し、自動でデプロイを開始します。
プロジェクトのサイドメニューにある「Deploys」を開くと、プッシュしたコミット（ここでは「Update page text」）のデプロイが一覧に追加されていることを確認できます。

デプロイが「Published」になったら、公開URLを再読み込みしてください。
変更した内容が正常に反映されていれば、自動デプロイの確認は完了です。

なお、mainブランチ以外のブランチからプルリクエストを作成した場合は、本番環境ではなく、プレビュー用のデプロイ（Deploy Preview）が作成されます。
詳しくは、後述する「Deploy Previews（プレビュー環境）」で紹介します。

デプロイできないときの確認ポイント

デプロイが失敗した場合は、まず「Deploys」から失敗したデプロイを開き、デプロイログに表示されたエラーメッセージを確認しましょう。
初心者がつまずきやすい原因と確認ポイントは次のとおりです。

Vue RouterやReact Routerを使ったSPA（シングルページアプリケーション）では、トップページ以外のURLを直接開いたり再読み込みしたりすると、該当するファイルが存在しないため「Page not found」になることがあります。
この場合は、Vue.jsのプロジェクトであればpublicディレクトリに「_redirects」という名前のファイルを作成し、次の1行を記述します（publicディレクトリのファイルは、ビルド時にdistディレクトリへコピーされます）。

/*    /index.html   200

/*    /index.html   200

この設定により、すべてのURLへのアクセスに対してindex.htmlが返されるようになり、画面の切り替えはVue Routerなどが処理できるようになります。
エラーの調べ方はビルドのトラブルシューティング（Netlify公式ドキュメント）、Node.jsのバージョン指定は依存関係の管理（Netlify公式ドキュメント）、_redirectsの書き方はリライトとプロキシ（Netlify公式ドキュメント）を参考にしてください。

【実践】Netlify Dropでファイルをすぐ公開する

Netlifyでは、GitHubなどのリポジトリと連携せずに、ローカルに保存したファイルをアップロードしてWebサイトを公開することもできます。
この機能を「Netlify Drop」と呼びます。
簡単なHTMLページの公開や、作成したWebサイトの動作確認など、手軽に公開環境を用意したい場合に便利な機能です。

公開用ファイルを用意する

まずは、公開するためのファイルを用意しましょう。
今回は、HTMLファイルだけで構成されたシンプルなWebサイトを例にします。

任意の場所に「netlify-drop-sample」というフォルダを作成し、その中に次の内容でindex.htmlファイルを保存します。
index.htmlは、Webサイトにアクセスした際に最初に表示されるページとして一般的に利用されるファイル名です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netlify Drop サンプル</title>
</head>
<body>
  <h1>Hello Netlify Drop!</h1>
  <p>Netlify Dropで公開したページです。</p>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netlify Drop サンプル</title>
</head>
<body>
  <h1>Hello Netlify Drop!</h1>
  <p>Netlify Dropで公開したページです。</p>
</body>
</html>

Netlify Dropへドラッグ＆ドロップする

公開用のファイルを用意したら、Netlifyの「Projects」ページを開き、下部にある「Drag and drop your folder here」と書かれた枠内に、netlify-drop-sampleフォルダをドラッグ＆ドロップしてアップロードします。
（枠内の「browse files to upload」や「choose a folder」をクリックして、フォルダを選択することもできます）

アップロードが完了すると、Netlifyがファイルを公開し、WebサイトへアクセスするためのURLが表示されます。
プロジェクト名とURLは自動で決められますが、「Domain」欄の「Edit」から変更することもできます。

公開されたサイトを確認する

アップロードが完了したら、表示されたURLをクリックして、Webサイトが正しく表示されることを確認しましょう。
作成したHTMLファイルの内容（「Hello Netlify Drop!」の見出し）が正常に表示されていれば、アップロードは完了です。

なお、上の画面に「It’s deployed and currently visible only to your team.」とあるとおり、この時点ではサイトは自分（チームのメンバー）しか閲覧できない非公開の状態です。
他の人にも見せたい場合は、GitHub連携の場合と同様に、公開範囲を「公開（Public）」に変更しましょう。

また、Netlify Dropの場合、ファイルの変更を反映するには、修正後のフォルダを再度アップロードする必要があります。
更新する際は、対象プロジェクトの「Deploys」ページ下部にあるドロップ領域に、修正後のフォルダをドラッグ＆ドロップします。
そのため、単純なHTMLページの共有や一時的な公開にはNetlify Drop、継続的にコードを更新するプロジェクトにはGit連携による自動デプロイを利用するなど、用途に応じて使い分けるとよいでしょう。

Netlifyの料金・無料プランでできること

Netlifyの料金プラン

Netlifyには、無料で利用できるプランと、より多くの利用枠や機能を利用できる有料プランがあります。
2026年10月時点のNetlifyの料金ページでは、クレジット制の料金体系として、Free、Personal、Pro、Enterpriseの4つのプランが案内されています。

料金ページと料金プランの公式ドキュメントで確認できた、各プランの主な違いは次のとおりです。

料金はすべて米ドル表記です。
クレジットは、本番環境へのデプロイやコンピューティング（サーバー側の処理の実行）、データ転送、Webリクエストなど、対象となる利用量に応じて消費されます。
そのため、料金プランを比較する際は、月額料金だけでなく、公開するサイトの規模やアクセス数、デプロイの頻度、利用する追加機能なども考慮することが重要です。

無料プランでできること

サイトの公開や自動デプロイ、プレビュー環境の作成など、Netlifyの基本的な機能はFreeプランでも利用可能です。
独自ドメインの設定やHTTPS（SSL）、Netlify Functions、Netlify Formsなども、クレジットの範囲内で利用できます。
そのため、学習用サイトやポートフォリオ、個人で作成した小規模なWebアプリなどを公開したい場合に活用できます。

ただし、すべての機能を無制限に使えるわけではなく、利用量や機能ごとに制限が設定されています。
たとえばFreeプランでは、GitHubの組織（Organization）が所有する非公開リポジトリとは連携できず、チームを管理できるオーナーも1人のみです。
プロジェクトの要件によっては、有料プランの導入を検討する必要があります。

無料プランを利用する際の注意点

Freeプランを利用する際に注意したいのが、月間クレジット数と利用制限です。
Freeプランでは、月300クレジットが上限として設定されています。
クレジットの仕組み（Netlify公式ドキュメント）で確認できた、主なクレジットの消費量は次のとおりです（2026年10月時点）。

たとえば、本番環境へのデプロイだけで計算すると、300クレジットは月20回分に相当します。
実際には、デプロイやデータ転送量などの消費が同じ300クレジットから差し引かれるため、コードを頻繁に更新する場合やアクセス数が多い場合は、想定より早く利用枠を消費する可能性があります。

Freeプランでクレジットを使い切ると、次の請求サイクルまで、すべてのサイトが停止し、訪問者には「Site not available」というページが表示されます。
Freeプランではクレジットを追加購入できないため、公開したサイトを継続的に運用する場合は、管理画面の「Usage & billing」から利用状況を定期的に確認しておくと安心です。
動作確認のための更新は、本番環境ではなく、クレジットを消費しないDeploy Previewsを活用するのもよいでしょう。

独自ドメインを設定する方法

ドメイン設定画面から独自ドメインを追加する

Netlifyでは、デプロイ後に自動で割り当てられる「netlify.app」のURLに加えて、独自ドメインを設定することができます。
独自ドメインはFreeプランでも利用可能です（ドメイン自体の取得・更新費用は別途かかります）。

独自ドメインを追加する場合は、まず「Projects」からドメインを追加したいプロジェクトを選択し、サイドメニューの中から「Domain management」を選択して管理画面を開きます。
画面が表示されたら、「Production domains」内にある「Add a domain」を押して、追加方法を選択します。

「Buy a new domain」を選ぶとドメインを新たに購入でき、「Add a domain you already own」を選んで購入済みのドメインを入力すると、そのドメインを追加できます。

DNSレコードを設定する

ドメインを追加すると、DNS設定に関する案内が表示されます。
DNSとは、ドメイン名とサーバーの住所（IPアドレスなど）を結び付ける仕組みのことです。
他のサービスで取得したドメインからNetlifyのWebサイトへアクセスできるようにするには、ドメイン管理サービス側のDNS設定画面で、Netlifyに向けたレコードを登録する必要があります。

外部DNSの設定方法（Netlify公式ドキュメント）で案内されている、標準的な設定は次のとおりです。

ただし、具体的な設定値はドメインの種類や構成によって異なる場合があるため、必ずNetlifyの画面に表示された案内に従って設定してください。
また、ドメイン管理サービスのネームサーバーをNetlify DNSに変更して、DNSの管理をNetlifyに任せる方法もあります。

なお、設定した内容は反映されるまでに数時間～1日ほどかかる場合があります。
設定が反映されると、独自ドメインでWebサイトにアクセスできるようになります。
HTTPS化に必要なSSL証明書は、Let’s Encryptを利用してNetlifyが自動で発行してくれます。

▼こちらもチェック▼

DNSとは？基礎知識や仕組み、設定方法を解説 ▶

環境変数を設定する方法

環境変数を登録する

環境変数とは、APIキーやデータベースの接続情報など、ソースコードとは別に管理する設定値のことです。
Netlifyで環境変数を設定する場合は、対象プロジェクトのサイドメニューから「Environment variables」を選択します。
変数の追加方法は、「Add a variable」から、管理画面で直接入力して追加する方法（Add a single variable）と、.envファイルをインポートする方法（Import from a .env file）の2通りがあります。

直接入力で追加する場合は、次の項目を設定し、「Create variable」を押します。

• Key：変数名（英数字とアンダースコアのみ）
• Secret：APIキーなどの機密情報の場合は「Contains secret values」にチェックを入れる（Netlify上で動くコードからのみ読み取れるようになる）
• Scopes：変数を利用する範囲（ビルドやFunctionsなどに限定する「Specific scopes」はProプラン以上）
• Values：変数の値（すべての環境で同じ値を使うか、環境ごとに異なる値を使うかを選択）

なお、Vue.js（Vite）のプロジェクトでブラウザ側のコードから環境変数を参照する場合、変数名の先頭に「VITE_」を付ける必要があります。
ただし、「VITE_」から始まる変数の値は公開用のファイルに埋め込まれ、誰でも見られる状態になるため、APIキーなどの機密情報は設定しないでください。
機密情報を扱う処理は、後述するNetlify Functionsなどのサーバー側で実行しましょう。

デプロイ環境ごとに使い分ける

値の設定時に「Different value for each deploy context」を選択すると、環境（デプロイコンテキスト）ごとに異なる値を入力することができます。

主な環境の違いは次のとおりです。

たとえば、本番環境では本番用のAPIキーを、プレビュー環境ではテスト用のAPIキーを使うといった使い分けができます。
これにより、開発中の変更が本番データに影響するリスクなどを抑えながら、公開前の動作確認を行えます。
なお、ビルド時に使う環境変数を変更した場合は、再デプロイを行うと新しい値が反映されます。
詳しくは、環境変数の公式ドキュメントを参照してください。

Netlifyの主要機能

Netlifyには、Webサイトを公開するための基本的なデプロイ機能だけでなく、Webサイトの開発・運用に役立つ機能も用意されています。
ここでは、代表的な機能を紹介します。

Deploy Previews（プレビュー環境）

Deploy Previewsは、本番環境へ変更を反映する前に、更新内容を確認するためのプレビュー環境を作成する機能です。

GitHubなどと連携している場合、プルリクエストを作成すると、変更内容を反映したプレビュー用のデプロイが自動的に作成されます。
プレビュー用のURLは「deploy-preview-プルリクエストの番号–プロジェクト名.netlify.app」の形式で発行され、アクセスすることで公開前のWebサイトをブラウザ上で確認できます。
Deploy Previewsはクレジットを消費しないため、Freeプランでも気軽に利用できます。

Netlify Functions（サーバーレス関数）

Netlify Functionsは、サーバー側で実行する処理を実装できるサーバーレス機能です。
サーバーレスとは、サーバーの構築や管理を自分で行わずに、プログラムを実行できる仕組みのことです。
Netlifyのプロジェクトにサーバー側の処理を組み込み、サイトとまとめてビルド・デプロイできるため、別途バックエンド環境を用意する必要がなくなります。

具体的には、次のような用途に活用できます。

• 外部APIからのデータ取得
• フォームの入力内容の処理
• APIキーなどを利用した外部サービスとの通信
• データベースへの問い合わせ

Functionsの実行時間などは、コンピューティングとしてクレジットを消費する点に注意しましょう。

Netlify Forms（フォームの受付）

Netlify Formsは、Webサイトに設置したHTMLフォームから送信されたデータを受け付ける機能です。

一般的な問い合わせフォームを作成する場合、送信されたデータを受け取るためのバックエンドや、データを管理する仕組みを用意する必要があります。
一方、Netlify Formsを利用すると、formタグに「data-netlify=”true”」を追加してNetlifyにフォームを認識させるだけで、送信データの受付や確認を行えます。

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>お名前：<input type="text" name="name"></label>
  </p>
  <p>
    <label>メッセージ：<textarea name="message"></textarea></label>
  </p>
  <button type="submit">送信</button>
</form>

<form name="contact" method="POST" data-netlify="true">
  <p>
    <label>お名前：<input type="text" name="name"></label>
  </p>
  <p>
    <label>メッセージ：<textarea name="message"></textarea></label>
  </p>
  <button type="submit">送信</button>
</form>

利用する際は、事前にプロジェクトの「Forms」から「Enable form detection」を選択してフォームの検出を有効にし、再デプロイします。
送信されたデータは、管理画面の「Forms」から確認できます。
なお、Vue.jsなどJavaScriptで描画するフォームの場合は、Netlifyがフォームを検出できるようにするための追加の対応が必要です。詳しくは公式ドキュメントを確認してください。

Netlify Database（データベース）

Netlify Databaseは、Netlifyのプロジェクトから利用できるPostgreSQLベースのデータベース機能です。
Webアプリケーションで扱うユーザー情報や投稿データなど、構造化されたデータを保存する用途に利用できます。

ORM（データベースをプログラムから扱いやすくするライブラリ）はプロジェクトに合わせて選択でき、データベースの作成や接続を開発ワークフローに組み込みやすいように設計されています。
また、Deploy Previewsでは本番用データベースと異なるデータベースブランチを利用する仕組みがあり、プレビュー環境での変更が本番データへ直接影響しないようになっています。
Freeプランでは、3つまでデータベースを作成できます。

Netlifyに関するよくある質問

Q. GitHubを使わずにWebサイトを公開できますか？

A. Netlify Dropを利用すれば可能です。
ただし、ファイルを変更するたびに手動でアップロードする必要があります。
また、Git連携はGitHubのほか、GitLabやBitbucketなどにも対応しています。

Q. Vue.jsやReactなどのフレームワークにも対応していますか？

A. Vue.jsやReactをはじめとする、さまざまなフレームワークに対応しています。
フレームワークを利用していない、HTML・CSS・JavaScriptだけで作成したWebサイトも公開できます。

▼こちらもチェック▼

Vue.js3とは？特徴・環境構築のやり方を解説 ▶

Q. バックエンドも構築できますか？

A. Netlify FunctionsやNetlify Databaseなどを組み合わせることで、構築可能です。

Q. 無料プランでも独自ドメインは使えますか？

A. 使えます。
Freeプランでも、独自ドメインの設定やHTTPS（SSL）を利用できます。
ただし、ドメイン自体の取得・更新費用は別途必要です。

Q. NetlifyとVercelの違いは何ですか？

A. 両者の大きな違いは、得意とする開発環境や、提供する機能・開発体験にあります。
Vercelは、Next.jsの開発元が提供しているため、Next.jsとの親和性が高く、フロントエンドとサーバー側の処理を組み合わせたフルスタックアプリケーションの開発に適しています。
一方、Netlifyは、Webサイトのデプロイに加えて、フォーム処理やサーバーレス関数など、Webサイトの運用に必要な機能をまとめて利用できる点が特徴です。
Git連携による自動デプロイやプレビュー環境など、共通する機能も多いため、使用するフレームワークや料金体系を比較して選ぶとよいでしょう。

▼こちらもチェック▼

Vercelとは？Webサイトをデプロイする方法を初心者向けに実践解説 ▶

まとめ

Netlifyは、Webサイトの公開に加えて、フォームやサーバーレス関数、データベースなど、Web開発に必要な機能をまとめて利用できるプラットフォームです。
GitHubと連携すれば、コードをプッシュするだけで自動的にWebサイトが更新され、Netlify Dropを使えばフォルダをドラッグ＆ドロップするだけでWebサイトを公開できます。

まずはFreeプランで、本記事の手順どおりに基本的なデプロイの流れを確認してみましょう。
その後、必要な機能や利用量に応じて設定を追加していくと、効率的な開発・公開環境を整えやすくなるでしょう。