2020-04-27に投稿

Vercel（元ZeitのNow）でNext.jsアプリをデプロイ 2020年最新版

Vercel Now Nextjs

now というコマンドを使わないVercel（元ZeitのNow）へのデプロイ方法を解説します。今回の手順ではNext.jsを使います。

背景

now というコマンドで簡単にデプロイできるということで一世を風靡したZeitのNowですが、先日Vercelというサービス名に変更されました。その前からちょこちょこ新たな機能をリリースしており、nowというコマンドを使わなくてもGitHub連携によってpushするだけでデプロイできるようになったり、環境変数も独自のsecretsという設定を使わず、管理画面で設定できるようになったりと、かなり手軽になってきているので実際にそれらを使ったデプロイ方法を説明します。

Next.jsアプリを作成

まずはNext.jsのアプリケーションを作成します。

npm init next-app
# or
yarn create next-app

いくつか設定項目が現れるため下記のように設定しました。

√ What is your project named? ... next-vercel-sample
√ Pick a template » Default starter app

あとは出力されるメッセージの通り、下記のようにして実行できます。

cd next-vercel-sample
yarn dev

GitHubへ登録

今回はnowコマンドは一切使わずGitHub連携でデプロイを行います。ですのでまずはいま作成したアプリケーションをGitHubに登録します。その前にとりあえずcommitしておきます。

git init
git add .
git commit -m "Initial commit"

addとcommitはVSCode等でやってもよいでしょう。

まずは適当にGitHubでリポジトリを作成します。

表示されているとおりに設定してpushします（SSHキーの登録などは事前に行っておいてください）。

Vercelにデプロイする

続いてVercel側に今pushしたものをデプロイします。VercelのダッシュボードにImport Projectボタンがあるためそちらをクリックします。

From Git Repositoryを選択します。

Importボタンをクリックします。

プロジェクトの選択画面が開きますので適宜選択します。僕の場合は個別に権限を与えたものだけ選択できるようにしているため、同様の場合は下記のようにEdit your repository access settings on GitHub.を実行してGitHub側で権限を与えてから選択します。

選択できたらSelectしてImportを実行です。プロジェクト名の入力画面が開くので入力してContinueします。

引き続きROOT DIRECTORYやBUILD COMMANDの設定画面なども開きますが、Next.jsアプリケーションの場合は一切何も設定しなくてもデプロイが可能のためひたすらContinueして最後のDeployボタンを押せば完了です。

Buildingステータスになっているのでしばし待ちます。

Readyとなったらデプロイ完了です。

URLがいくつかありますが、どれでも閲覧できます。DEPLOYMENTというURLは一意なデプロイURLです。DOMAINSはそのプロジェクトのURLで、いつも使えるURLです。どれでも良いので開くとローカルで実行したアプリケーションと同じ画面が表示されます。これでデプロイは完了です！

ちなみに下記は今回作ったサンプルです。

https://next-vercel-sample.now.sh/
https://github.com/dala00/next-vercel-sample

更新したい時

プログラムを調整して更新したいときは、GitHubにpushするだけで勝手にデプロイされます。

ちなみに先ほどの画面はProduction Deploymentで、masterブランチのものがProductionとしてデプロイされます。別のブランチを作ってそちらでpushしておくと、その製品版のURLは利用されず、別ブランチ用のURLが作成されるため安全にステージング環境として利用することが可能です。下記のようにDeploymentsメニューで全てのブランチのデプロイを確認できます。

それをクリックすると下記のようにテスト用のURLを利用することが出来ます。

プルリクエストを作るとブランチのマージもGitHub上だけで行えます。

ちなみにGitHub連携しているとこんな感じでnowちゃんが甲斐甲斐しくコメントをしてくれます（そういやこちらはまだ名前が変わってないですね）。これで一人ぼっちで友達がいなくても寂しくありません。

環境変数を設定する

Nowではずっとsecretsという機能を利用してプライベートな値を利用できるようにしていましたが、最近Vercelになったのと同じくらいの時期に管理画面で直接環境変数を設定できるようになりました。下記のように設定ができます。

ちなみにProductionは本番、つまり独自ドメインを設定していればそちらのURLや、プロジェクト名.now.sh というシンプルなエイリアスのものなどです。Previewは別のブランチでpushした時に作成されるURLです。DevelopmentはローカルPCにて、now devを実行した時のものです。

設定後は見えなくなります。

Next.js上では、next.config.jsにて例えば下記のように設定します。ローカルでの環境変数は直接指定するか、dotenv等を利用しましょう。envはサーバー側（というかビルド時）、publicRuntimeConfigでクライアント側に環境変数を渡せます（漏洩してはいけない値を渡さないようにしましょう）。

// require('dotenv').config()

module.exports = {
  env: {
    TEST_TEXT: process.env.TEST_TEXT,
  },
  publicRuntimeConfig: {
    TEST_TEXT: process.env.TEST_TEXT,
  },
}

index.jsを下記のように調整することで利用できます。

import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()

export default function Home() {
  return (
    <div className="container">
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1 className="title">
          Welcome to{' '}
          <a href="https://nextjs.org">
            Next.js! {publicRuntimeConfig.TEST_TEXT}
          </a>
        </h1>

問題なければ下記のように表示されます。

nowコマンドは？

こちらも使えます。今回のパターンだと不要でしたが、 @now/next というbuilders以外を使う場合はローカルで now dev コマンドで開発ができます。この場合は事前に now コマンドを実行してVercel側のプロジェクトと紐付けておく必要があります。

まとめ

ということで2020年に入り、Vercelは進化を遂げ続けており非常に使いやすくなりました。GitHubや自動デプロイに慣れている方はGitHub連携で、GitHubを使ったことがなくてちょっと怖い、という方は今まで通りnowコマンドを使って、柔軟に利用できます。非常に便利ですので使い倒していきましょう。

ツイッターでシェア

みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです（在宅）。大体10年ちょい。記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

https://www.alphabrend.co.jp