logo

フロントエンドで「Next.js」を選ぶ理由③:無料サーバーが使えます

この記事の文字数は、3,623 文字です。

サーバーの公開ってお金かかることがほとんどです。 初学者や駆け出しエンジニアにとって、サーバーを公開してみたいけど、お金かかるのはちょっと・・・と二の足を踏んでいる方はたくさんいらっしゃるでしょう。 朗報です。 なんとNext.jsを開発している会社が無料サーバーを用意しています。 お得にサーバー構築してみませんか?

検索キーワード
Next.js
React
Vercel
ZEIT
now

こんにちは。ナオツです。

フロントエンド業界でスキルを磨いていくなら、 そして、フロントエンド業界で実践の経験を積んでいくなら、

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に限って言えば、この簡単さは衝撃です。

サーバーの公開手順

ここでは簡単な流れだけご説明します。

  1. GitHubのリポジトリと連携させる
  2. 環境変数をセットする
  3. mainブランチ(旧masterブランチ)にpush
  4. 自動で公開(デプロイ)

これだけです。 エラーになれば、Vercelの管理画面で確認できますし、独自ドメインの紐づけも簡単にできます。 具体的な画面の紹介等については、今後キャプチャつきで実践レベルで丁寧にご紹介していきますね。

もちろんヘビーユースの場合には有料プランもあり

とくにチームでアプリケーションを管理する場合は、無料プランでは難しいこともあるでしょう。

有料プランも紹介しておきます。

Vercelの料金体系には Hobby、Pro、Enterprise の3種類があります。

Hobby

前述の無料プランです。

Pro

スタートアップ企業などに好まれそうなスペックですね。

  • 料金:1メンバーあたり$20/月(ちょっとお高め)
  • 最大10人のチームメンバー
  • 詳細な請求書設定
  • ビルドの並列化(1スロット$50/月)
  • ブランチごとのプレビュー($100/月)
  • 独自のパスワード保護($150/月)

Enterprise

このプランは自身のアプリケーションに合わせて、細かくスペック等をカスタマイズできるプランです。

  • 料金:要問い合わせ
  • 稼働率99.99%のSLA
  • サーバレス関数のマルチリージョン化
  • エンタープライズサポート
  • Next.jsアプリケーションの監査

Vercelの料金プランについて詳しくはこちら

注意点

昔はVercelという名前ではありません!

ひとつだけ注意があります。 あなたのググラビリティを上げるためにも、この章を書かせてください。

Vercelは、以前は ZEIT という社名で、 now というサービス名でした。 それが、2019/04/21に社名が Vercel に変わり、あわせてサービス名も Vercel に変更されました。

つまり、「Vercel」という検索ワードでググっても現時点では1年半くらいの記事しかヒットしません。

問題に直面し解決しない場合は、「ZEIT」や「now」などの文字列で検索することをオススメします。

もちろん古い記事なので、細かい仕様は変わっているかもしれませんが、問題解決の可能性は飛躍的に上がることでしょう。

まとめ

いかがだったでしょうか。

Next.jsをフロントエンドのフレームワークに選ぶことで、無料のフロントエンドサーバーを簡単に管理することができます。

最新のフロントエンドスキルを学ぶ方法はこちら

次回はいよいよ、このEasy Life Tipsというブログサイトを1から作っていきたいと思います。

そのためには、バックエンドサーバーも構築する必要があるのですが、もちろん無料でいきたいですよね。

安心してください。無料ですよ。

データベースサーバーは?

安心してください。無料ですよ。

バックエンドサーバーやデータベースサーバーとは?

それではお楽しみに。

ホームフロントエンドReactフロントエンドで「Next.js」を選ぶ理由③:無料サーバーが使えます

Ads

すべての記事

  • すべての記事を読む

システム開発関連の記事

  • システム開発関連すべて
  • インフラ
  • Git

UIデザイン関連の記事

  • UIデザイン関連すべて
  • Figma

フロントエンド関連の記事

  • フロントエンド関連すべて
  • フロント技術全般
  • React

バックエンド関連の記事

  • バックエンド関連すべて

開発環境関連の記事

  • 開発環境関連すべて
  • Windows

生活関連の記事

  • 生活関連すべて
  • フリーランス
  • 学び