フロントエンドで「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から作っていきたいと思います。
そのためには、バックエンドサーバーも構築する必要があるのですが、もちろん無料でいきたいですよね。
安心してください。無料ですよ。
データベースサーバーは?
安心してください。無料ですよ。
それではお楽しみに。