netlifyを使って思ったことを書く

技術ネタ
この記事は約5分で読めます。

こんばんわ、hisayukiです。

最近netlifyを使う機会が増えたので、改めてまとめておこうと思います。

スポンサーリンク

netlifyとは?

Scale & Ship Faster with a Composable Web Architecture | Netlify
Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!

”ほぼ”無料で使えるWebServerです

必要なものはGithubアカウントのみ❗
(もちろん普通にメールアドレスでのサインアップもできるのと、Bitbucket、GitLabにも対応)

デプロイも超簡単。
リモートリポジトリへのPushをHookしてデプロイすることもできます。

加えてCDNに独自ドメイン、SSL対応まで無料

めちゃくちゃ便利じゃん、最高じゃね?

っと、思ったのですがいくつか考慮点もあったのでそのアタリも含めてこのあとに続きます。

強力なホスティング機能

これまでは静的HTMLレベルであれば、AWSのS3というサービスにホスティングしてました。
あちらもほぼ無料なのでw

ただAWSはIaaSなのでこんな問題も・・・

  • カスタムドメイン対応、SSL対応、CDNを建てるのがすべて別サービス
  • カスタムドメインはDNSサービス使うので有料
  • データ容量やデータ転送量にも課金が発生

比べてnetlifyは・・・

  • 月100Gまでの通信量と300分までのBuildが無料
  • カスタムドメイン無料
  • SSL対応無料
  • CDN無料

これらがすべて1つのサービスで対応できる

これでも高くなったほうなんですよね、2年前とかホスティングだけなら完全無料だったので。

料金プラン

リモートリポジトリ連携での高速デプロイ

netlifyだけでCI/CD環境ができてしまう

この機能もかなり強力。
デフォルトでGithubなどのリモートリポジトリと連携できます。

まずは[New site from Git]を押します。

次にリモートリポジトリの種類を選びます、今回はGithubで。

次に連携対象のリモートリポジトリを選択します。

最後に以下の3つを指定します。

  • 指定したリモートリポジトリでPushHookを受け取る特定ブランチ
  • Hook受取時に実行するコマンド
  • コマンド終了時にホスティングするディレクトリ

たったこれだけでCI/CD環境が出来てしまいます

追加サービス

メインのホスティング機能以外に、追加サービスもあるのでこちらも紹介します。

Function

サイトにも書いてありますが、AWSアカウントなしでLambdaを利用できます。
これにより、静的Webサイト+Lambdaの組み合わせもnetlifyのみで実現可能になります❗

普段からLambdaとAPI Gatewayを利用している人からしたら特に必要ないかもですが・・・w
LambdaとAPI Gatewayの手間なところをnetlify側で準備してくれるので、functionを書くことだけに専念できます。
またプレビューとロールバックも行えるようになります。

料金

無料分でも12万5000リクエスト/月使えますね。
ただ、実行時間については100時間/月です。
Lambdaの実行期間は限界10秒なので、36,000回転までは回せます。

Firebaseでも4万秒(11時間くらい)/月なので、そう考えたら結構お得な気はする。

あまりにもよく使うfunctionの場合は実行時間に気をつけないといけないとですね。
超えそうなら1つ上の毎月$25ですね🤔

Form

お問い合わせFormなどを作った際に、<form>タグにnetlify属性を追加するとNetlifyダッシュボードでお問い合わせ内容を受信することができます❗

本来ならJavascriptなどで作る必要がありますが、以下のようなコードで実装可能にします❗

<form name="contact" netlify>
  <p>
    <label>Name <input type="text" name="name" /></label>
  </p>
  <p>
    <label>Email <input type="email" name="email" /></label>
  </p>
  <p>
    <button type="submit">Send</button>
  </p>
</form>

料金

そうそうお問い合わせがこないならフリープランで十分です。
月に100通も超えてくるようならおとなしく$19/月を課金するか、別の仕組みを作りましょうw

別の仕組みを作るコストと、管理するコストを考えつつですね🤔

Identity

IdentityはGoTrueというAPIを利用して認証機能を提供してくれるサービスです。
ユーザー登録を必要とするサービスや、特定ユーザーのみの会員制サービスを作ることを簡単に出来るようにします。

このような画面を作ることができ、上記のアカウントであればすぐにサインアップを出来るようにします。

料金

フリープランでは登録数が1000人まで。
ちょっとつらいのが、特定ユーザーのみの会員制サービスにした場合は5人までというところ。

それを増やそうと思うと、次の課金が$99と結構お高い

もう少し間くらいとったプランがないかなぁと思う今日このごろです。

その他考慮点

複数人は有料

netlifyのStarterPlanはチームメンバーは1名までしか登録できません。
そのためコンソール画面に入れるユーザーは1名までとなります。

Tokenは必要に応じて発行できるので、CLIからの操作は複数人でも可能です。

まとめ

ホスティングサービスとしては十分に素晴らしい仕組みだと思ってます。
Firebaseもなかなかですが、個人的にはこっちのが楽ですね。

まだまだ伸びそうですし、個人的にはFaunaDBとの連携もしてるのでJAMStackの世界観が広がっていくのが楽しみです✨

コメント