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

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

背景

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

Nuxt.jsアプリを作成

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

npx create-nuxt-app nuxt-vercel-sample
# or
yarn create nuxt-app nuxt-vercel-sample

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

✨  Generating Nuxt.js project in nuxt-vercel-sample
? Project name nuxt-vercel-sample
? Project description My astonishing Nuxt.js project
? Author name dala00
? Choose programming language TypeScript
? Choose the package manager Yarn
? Choose UI framework Buefy
? Choose custom server framework None (Recommended)
? Choose the runtime for TypeScript Default
? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support, DotEnv
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework Jest
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

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

cd nuxt-vercel-sample
yarn dev

見た目は利用しているUIフレームワークによって変わります。

GitHubへ登録

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

git add .
git commit -m "Initial commit"

VSCode等でやってもよいでしょう。

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

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

Vercelにデプロイする

続いてVercel側に今pushしたものをデプロイします。……がその前に、Nuxt.jsをVercelで使うための @nuxtjs/now-builder というものがNuxt.js公式から用意されていますので、それをnow.jsonに設定します。

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/now-builder",
      "config": {}
    }
  ]
}

これをcommit & pushしておきましょう。

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

From Git Repositoryを選択します。

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

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

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

引き続きROOT DIRECTORYやBUILD COMMANDの設定画面なども開きますが、Nuxt.jsアプリケーションの場合は一切何も設定しなくてもデプロイが可能のためひたすらContinueして最後のDeployボタンを押せば完了です（さきほどのnow.jsonの設定が抜けているとビルドに失敗します）。

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

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

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

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

https://nuxt-vercel-sample.now.sh/
https://github.com/dala00/nuxt-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を実行した時のものです。

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

Nuxt.js上では、nuxt.config.jsにて例えば下記のように設定します。ローカルでの環境変数は直接指定するか、dotenv等を利用しましょう。

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

export default {
  mode: "universal",

  env: {
    TEST_TEXT: process.env.TEST_TEXT
  },

index.vueにてscript側に値を取得処理を作成し、

  methods: {
    getText() {
      return process.env.TEST_TEXT
    }
  }

表示側でそれを使います。

  {{ getText() }}

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

nowコマンドは？

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

まとめ

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