📑

Vercelへnext.js使用フロントエンドアプリをデプロイしてみたら楽すぎた。

3 min read

Vercelとは?

  • Vercelとは、ZEIT社が提供しているホスティングサービスです。
  • 機能として、Global CDNや、Serverless Functionsがあり、Google CloudやGitHubとのIntegration機能があったり様々なものがあります。
  • また、セットアップがかなり簡単で、Next.jsを使用すると簡単にSPA, SSR, SSG, ISRのフロントエンドを作成することができます。
  • Netlifyと同じように、ビルドとホスティングなどをまとめてやってくれます。
  • 無料プランのままでも100回/日までデプロイできる。

早速デプロイしてみよう

事前準備

GitHubにあらかじめNext.jsで作成したアプリをpushしておきます。
今回は、pages/indexを下記のようにし、hello worldを表示してみたいと思います。

export default function Index({current}) {
  return (
    <div>
       Hello World
    </div>
  );
}

export async function getStaticProps() {
    const date = new Date();
    const current = date.toLocaleString()
  return {
    props: {
      current,
    },
  };
}

Vercelのセットアップ

1.右上のログインボタンをクリックする。
スクリーンショット 2021-02-22 13.21.53.png

2.今回はGitHubとのintegrationを行いデプロイしようと思うので、GitHubアカウントでのログインを行います。
スクリーンショット 2021-02-22 13.23.45.png

3.ログインすると、下記のような画面になると思うので、New projectから、プロジェクトを作成する。
スクリーンショット 2021-02-22 13.25.51.png

4.import Git Repositoryから[Add GitHub org or Accountを選択する]
スクリーンショット 2021-02-22 13.27.24.png

5.Github側の設定画面に移動するので、[only select repositories]から、デプロイしたいコードのリポジトリを選択する。
スクリーンショット 2021-02-22 13.33.51.png

6.5の設定が終わると、下記のようにimportするリポジトリの情報が取れるようになるのでimportしてみる。
スクリーンショット 2021-02-22 13.35.01.png

7.Scopeの設定が求められますので、今回は、personal accountの下を選択します。
スクリーンショット 2021-02-22 13.36.25.png

8.下記の画面でBuildの設定や、環境変数の設定などができます。今回は特に設定事項がないので、そのままDeployしていこうと思います。
スクリーンショット 2021-02-22 13.38.26.png

9.Deployを押すと、下記のようにBuildが始まります。
スクリーンショット 2021-02-22 13.40.03.png

10.Buildが成功すると下記のように[STATE]がReadyになるので、こうなったらDeployが無事完了です。
右上にある[Vist]を押すとDeployしたアプリに接続できます。
スクリーンショット 2021-02-22 13.41.45.png

動作確認

期待していた、Hello Worldが確認できました!
デプロイ完了です!
スクリーンショット 2021-02-22 13.43.38.png

まとめ

VercelへNext.jsのアプリをDeployしてみたのですが、いかがでしたか。
簡単すぎて鼻汁が出たところで終わりにしたいと思います!
ありがとうございました!🙇‍♂️

参考

NetlifyキラーのVercelでウェブサイトをホストしたら簡単すぎて笑顔になった

Discussion

ログインするとコメントできます