フロントエンドで「Next.js」を選ぶ理由③：無料サーバーが使えます
この記事の文字数は、3,623 文字です。
サーバーの公開ってお金かかることがほとんどです。 初学者や駆け出しエンジニアにとって、サーバーを公開してみたいけど、お金かかるのはちょっと・・・と二の足を踏んでいる方はたくさんいらっしゃるでしょう。 朗報です。 なんとNext.jsを開発している会社が無料サーバーを用意しています。 お得にサーバー構築してみませんか？
目次
こんにちは。ナオツです。
フロントエンド業界でスキルを磨いていくなら、 そして、フロントエンド業界で実践の経験を積んでいくなら、
Next.jsを使っていくのが得策である
という話をしてきました。
Next.jsとは Reactを使って、SSR・SSGサーバーを構築できるようにしたフレームワークです。
その理由は、
- TypeScriptとの親和性が高いので実装が爆速・安全になる
- Reactは世界的に採用のニーズがもっとも高い
でしたね。
Next.jsとTypeScriptの親和性についてはこちら Reactにおける世界のニーズについてはこちら
今回はNext.jsをオススメする最後の理由です。 それが今回のテーマである、
無料サーバーが使える
という点です。
「無料」
この言葉が嫌いな人はいないですよね？(笑)
Vercelとは
Next.jsはVercelという組織が開発しています。
Vercel社とは カリフォルニア州サンフランシスコに本社をかまえるスタートアップ企業です。 詳しくはこちら 公式サイト
Vercel社はNext.jsを開発しているだけでなく、クラウドサービスも展開しています。
Vercelのクラウドサーバー
アプリケーションを公開するのであれば、サーバーをもつことは必須です。 サーバーを公開しないと複数のユーザーに、あなたのアプリケーションを使ってもらえないからです。
現在サーバーをもつには、自前でサーバー用のコンピューターを購入するのではなく、クラウドサービスを契約してレンタルサーバーをホスティングすることが多いかと思います。 有名どころだと、
- AWS（Amazon Web Service）
- Azure
- GCP（Google Cloud Platform）
などがあります。
一度はこれらのサービスの名を聞いたことがあるんじゃないでしょうか？
Vercelでも同様にサーバーをレンタルしてホスティングすることが可能です。 サーバーといってもAWSのように細かい作業は不要です。 VercelのWebサイト上でポチポチクリックして設定を選んでいくだけです。
こういうクラウドサービスを PaaS といいます。
PaaSとは Platform as a Service（サービスとしてのプラットフォーム）」の略。 アプリケーションソフトが稼働するためのデータベースやプログラム実行環境などが提供されるサービスのこと。
サーバーをレンタルするといっても、個人が使うレベルで使用量があまりヘビーでなければ、 レンタル無料プランで運用可能 なのです！
現時点での無料プラン詳細
- 独自ドメインの割り当て: 50 まで（.vercel.app を除く）
- 転送量: 月 100GB まで
- デプロイ回数: 24 時間で 100 回まで独自ドメインの割り当て: 50 まで（.vercel.app を除く）
- 転送量: 月 100GB まで
- デプロイ回数: 24 時間で 100 回まで
個人で使うなら十分すぎる内容です。
Next.jsとVercelサーバーとの親和性
ここからが本題です。
Next.jsもVercelサーバーもVercel社製です。
VercelサーバーはNext.jsのアプリケーションを動かすことに特化 しています。
この恩恵がめっちゃありがたいんです。
簡単にサーバーを公開できる
本来サーバーを公開する際は、アプリケーションの開発以外に、
- サーバー公開のための細かい設定
- SSL通信の設定
- サーバー公開後にデプロイする手順やその設定
などなど、不随する作業がたくさんあります。
インフラエンジニアの腕の見せ所です。
しかし、Next.jsで作ったアプリケーションをVercelで公開する場合、これらは一切不要です。
何を隠そう、このブログサイトも 「Next.js×Vercel」 の構成で公開しています。
公開するためにVercelのサイトで設定をポチポチやっていて驚きました。 僕はどちらかというとアプリケーション寄りのエンジニアなので、インフラ作業を専門としていません。
そんな僕でも、
なんて簡単にサーバーを公開できるんだ…
感動で言葉を失いました。
ちなみにNext.js以外もホスティングできるようですが、他のフレームワークについては触っていないので言及できません。
ただNext.jsに限って言えば、この簡単さは衝撃です。
サーバーの公開手順
ここでは簡単な流れだけご説明します。
- GitHubのリポジトリと連携させる
- 環境変数をセットする
- mainブランチ（旧masterブランチ）にpush
- 自動で公開（デプロイ）
これだけです。 エラーになれば、Vercelの管理画面で確認できますし、独自ドメインの紐づけも簡単にできます。 具体的な画面の紹介等については、今後キャプチャつきで実践レベルで丁寧にご紹介していきますね。
もちろんヘビーユースの場合には有料プランもあり
とくにチームでアプリケーションを管理する場合は、無料プランでは難しいこともあるでしょう。
有料プランも紹介しておきます。
Vercelの料金体系には Hobby、Pro、Enterprise の3種類があります。
Hobby
前述の無料プランです。
Pro
スタートアップ企業などに好まれそうなスペックですね。
- 料金：1メンバーあたり$20/月（ちょっとお高め）
- 最大10人のチームメンバー
- 詳細な請求書設定
- ビルドの並列化（1スロット$50/月）
- ブランチごとのプレビュー（$100/月）
- 独自のパスワード保護（$150/月）
Enterprise
このプランは自身のアプリケーションに合わせて、細かくスペック等をカスタマイズできるプランです。
- 料金：要問い合わせ
- 稼働率99.99%のSLA
- サーバレス関数のマルチリージョン化
- エンタープライズサポート
- Next.jsアプリケーションの監査
注意点
昔はVercelという名前ではありません!
ひとつだけ注意があります。 あなたのググラビリティを上げるためにも、この章を書かせてください。
Vercelは、以前は ZEIT という社名で、 now というサービス名でした。 それが、2019/04/21に社名が Vercel に変わり、あわせてサービス名も Vercel に変更されました。
つまり、「Vercel」という検索ワードでググっても現時点では1年半くらいの記事しかヒットしません。
問題に直面し解決しない場合は、「ZEIT」や「now」などの文字列で検索することをオススメします。
もちろん古い記事なので、細かい仕様は変わっているかもしれませんが、問題解決の可能性は飛躍的に上がることでしょう。
まとめ
いかがだったでしょうか。
Next.jsをフロントエンドのフレームワークに選ぶことで、無料のフロントエンドサーバーを簡単に管理することができます。
次回はいよいよ、このEasy Life Tipsというブログサイトを1から作っていきたいと思います。
そのためには、バックエンドサーバーも構築する必要があるのですが、もちろん無料でいきたいですよね。
安心してください。無料ですよ。
データベースサーバーは？
安心してください。無料ですよ。
それではお楽しみに。
