LINEで現役エンジニアに直接質問してみよう!登録無料

Netlifyとは?サイトを公開&独自ドメインで運用する方法!気になる料金は?

この記事では、Webページを実際のドメインを使ってアップロード出来る、静的ホスティングサービス「Netlify」を紹介します。

Netlifyとは?

Netlifyとは、Webページを作成し、実際のドメインを使って世界に公開出来るWebサービスです。サーバーが不必要で、無料で簡単にWebサイトを立ち上げることが出来ます。

GitHubをつかっている使ってい人ならイメージ出来るかもしれませんが、「GitHub Pages」と似たようなサービスになります。

Netlifyの3つの特徴

Netlifyには様々な特徴がありますが、全部は紹介しきれないので、公式に発表している3つの特徴を紹介します。

  1. シンプルなWebサイト公開方法
  2. 無料で使える自動HTTPS通信
  3. ターミナルからすべて操作できる

シンプルなWebサイト公開方法

Webサイトの公開方法はとても簡単です。

この部分にWebサイトのフォルダをドラッグ&ドロップするだけです。

サーバーを用意したり、ドメインの設定をしたり、など面倒なことはすべてNetlifyが自動的に行ってくれます。

実際にWebサイトをドラッグ&ドロップして公開する手順も下記で紹介しています

無料で使える自動HTTPS通信

ここまででお気づきになった人もいるかと思いますが、自動的にHTTPSで配信しています。これは、Netlify側が自動的に設定してくれているので、こちらは何も設定する必要はありません。

これはとても便利ですね!

なお、独自ドメインを使った場合もNetlify側が「Let’s Encrypt」をつかって自動的に設定してくれます!

ターミナルからすべて操作できる

「ターミナル」と聞くと、黒い画面を想像し嫌になってしまう人もいるかも知れませんが、安心してください。

これは要するに、Netlifyへの操作をブラウザを使わずに自動的にプログラミングで操作出来ますよ!という事です。

サイトを複数立ち上げたり、ページのバージョンアップしたりといった操作も、プログラムに自動的にやってもらう事が可能なのです!

すごく便利ですね!

気になるNetlifyの利用料金は?

ここまで便利なら、料金が気になりますよね!

Webサイトを公開するだけなら、その利用料はすべて無料です!

Netlifyの初め方(導入手順)

Netlifyを初め方をステップごとに解説していきます。

Netlifyアカウントの作成

まずは、Netlifyのアカウントを作成します。右上の「Sing Up」をクリックします。

作成するアカウントは「GitHub / GitLab / Bitbucket / メールアドレス」の中から選択出来ます。

今回は「メールアドレス」を使ってアカウントを作成します。

入力欄に「メールアドレス」と「パスワード」を入力します。

仮登録が完了しました。

メールアドレスの確認メールから、URLをクリックすると本登録が完了します。

メールが来るので、「Verify email」をクリックしましょう

登録できたら、ログインします

Netlify一番簡単なWebサイト公開方法

Netlify一番簡単なWebサイト公開方法を紹介します。

実際にやってみましょう。

netlify-testというディレクトリを作成し、その中にindex.htmlを作成します。

index.htmlには下記のような内容を書き込みました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <h1>Sample Page</h1>
</body>
</html>

そして作成したnetlify-testをこの画像の部分にドラッグ&ドロップします。

すると、次のようなページになったはずです。

これで、先程のWebサイトが公開できました。
この場合はは自動的に「elated-mirzakhani-60275f.netlify.com」というURLが振られていますね。

実際、elated-mirzakhani-60275f.netlify.comにアクセスしてみると、このようにこのようにちゃんとアクセスできます。

MEMO

Webサイトのデータ容量が多い場合はzipで圧縮してアップロード出来る

画像や動画などで公開するWebサイトのデータ容量が大きくなってしまう場合があります。そんなときは、.zipに圧縮してアップロードしましょう。
自動的に解凍してWebサイトに反映してくれます。

独自ドメインの設定

Netlifyでは、立ち上げたサイトのドメインを独自ドメインに変更することが出来ます。

前提

前提として、独自ドメインを「お名前.com」などのドメイン管理会社からドメインを購入してください。

独自ドメインの前提知識

ここでは、独自ドメインを使うにあたっての前提知識を解説します。

「ネームサーバー」と「DNS」の違い

まず、独自ドメインを扱う際の前提知識として、「ネームサーバー」と「DNS」の違いを確認しましょう。

簡単に言うと、「ネームサーバーでDNSの設定を管理する。そしてDNSはドメイン名をIPアドレスに変換する設定」という関係です。

今回は、「お名前.com」のネームサーバーとDNS設定を例にしてみます。
「お名前.com」では、このどちらの設定もおなうことができますが、それは「お名前.com」のネームサーバーが

  • dns1.onamae.com
  • dns2.onamae.com

にデフォルトで設定されているからです。

これらのサーバーで管理されている情報を「お名前.com」の管理画面から操作することが可能になります。

「お名前.com」のDNS設定画面はとにかく扱いにくい!

「お名前.com」のDNS設定画面はとにかく扱いにくくて有名です。

他のIPアドレスは4つの数字に分けて入力しなくてはいけませんし、設定できる項目数は少なく、反映も遅い。更に、初心者にはとてもわかりにくいのです。

そのため、「お名前.com」のネームサーバーでは無く、Netlifyのネームサーバーを今回使うように設定します。

Netlifyに独自ドメインを追加・登録する方法

まずは、NetlifyでDNSの設定が行えるように、使うネームサーバーを変更しなくてはいけません。

Netlifyにドメインを登録するに必要なのはたった4つのステップです。

  1. ドメイン登録ページに移動する
  2. 使うドメインを入力する
  3. 依存のDNS設定を入力する(今回は無し)
  4. ネームサーバーのドメイン名を発行してもらう

ドメイン登録ページに移動する

左上の「Domains」のタブをクリック後「Add or register domains」をクリックします。

使うドメインを入力する

使うドメインを入力しましょう。このとき、「お名前.com」などで取得したドメインを入力します。

その後、「Verify (確認)」をクリックします。

ここで、「あなたがドメインを所有していますか?」と聞かれるので、「Yes, add domain」を選びましょう。

依存のDNS設定を入力する(今回は無し)

他のネームサーバーを使っていて、DNSの設定情報があるなら、ここで情報を入力します(後で入力もできます)。

今回は、現時点では入力する情報は無いので、スキップします。「Continue」をクリックしましょう。

ネームサーバーのアドレスが発行される

ネームサーバーのアドレスが発行されます。「お名前.com」に設定する時に使うので、これらをメモしておいてください。

今回の場合は、下記の4アドレスになります。

  • dns1.p02.nsone.net
  • dns2.p02.nsone.net
  • dns3.p02.nsone.net
  • dns4.p02.nsone.net

これで、独自ドメインをNetlifyに登録する作業は終了です。

「お名前.com」でネームサーバーを変更しよう

先程発行されたネームサーバーアドレスを「お名前.com」のネームサーバーに設定します。

お名前.comのネームサーバー設定で、このように先程発行されたドメインを入力します。その後「確認画面へ進む」ボタンをクリックします。

正しく入力されていることを確認し、「設定する」をクリックします。

暫く待つと、このようにネームサーバー設定完了画面になります。

これで、ネームサーバーの変更は完了です。

Netlifyのサイトに独自ドメインを割り当てする方法

次に、Netlifyで立ち上げたサイトに独自ドメインを割り当てる方法を解説します

割当方法の手順を下記の様な流れで解説します。

  1. Webサイトの詳細ページを開く
  2. 「Domain setttings」をクリックし、ドメイン設定ページを開く
  3. Domainsの一覧から「Add custom domain」をクリックする
  4. 割り当てるドメイン名を入力する
  5. 「Verify」->「Yes, add domain」をクリックする
  6. 入力したドメインが追加される

手順1: Webサイトの詳細ページを開く

Webサイト一覧の内、ドメインを割り当てたいサイトをクリックして詳細画面を開きます。

手順2: 「Domain setttings」をクリックし、ドメイン設定ページを開く

「Domain setttings」をクリックします。

手順3: Domainsの一覧から「Add custom domain」をクリックする

詳細設定画面の中に「Domain settings」というボタンがあるので、それをクリックします。

手順4: 割り当てるドメイン名を入力する

「Domains」という設定項目から「Add custom domain」のボタンをクリックします。

手順5: 「Verify」->「Yes, add domain」をクリックする

ここに割り当てたいドメイン名を入力します。先程、Netlifyで登録したドメインと同じのを入力しましょう。

手順6: 入力したドメインが追加される

正しく設定されると、下記のように「Domains」の覧に入力したドメインが追加されます。

この記事を書いた人

自身がプログラミングを独学で勉強し始めて躓いた経験を元に、これから勉強をする人に向けに「イラスト多めでわかりやすい記事」にこだわって情報を発信しています。

現在はフルスタックエンジニアとしてサービス開発などのお仕事をしています。