nowを使ってみた。

こんにちは。
当サイトはプロダクトをデプロイするのにnowを使用しています。
今回はNext.js×microCMSで作成したプロダクトを実際にnowでデプロイする際の手順を解説していこうと思います。

nowとは？

Next.jsの開発も行なっているZEITが開発をしているサーバーレスなクラウドプラットフォームです。最低限だとターミナルでnowと入力するだけでデプロイをすることができます。その手軽さが大変魅力です。
ホスティングに設定・監視などを必要としません。
Jamstackなどの静的サイト・サーバーレスなWebサービスに主に使用されています。
ドキュメントは以下になります。
now docs

実際に使ってみる

Next.jsで作成したプロジェクトがあることを前提に話を進めます。Next.jsでなくてもnowは使用できますが、ZEITが開発してあるだけあってNext.jsとの相性がとても良いです。
当ブログはCMSはmicroCMSを利用していますが、特に指定はありません。
Next.js microCMSという構成でのJamstackなサイトのデプロイを実際に行なっていきたいと思います。
プロダクトがない方はぜひ、私が以前に書いたブログでプロダクトを開始してみて下さい。

またnowのアカウントを作成しておいてください。
now

プロダクトの設定

.envにkeyを設定

envファイルにmicroCMSのkeyを設定しましょう。GETメソッドにはAPI_KEY,POSTメソッドを使用している場合はX_API_KEYが必要です。値はmicroCMSの管理画面から確認して下さい（例の値は架空のものです）。

[.env]

API_KEY=abcdefg-12345-98765
X_API_KEY=gfedcba-54321-12345

.gitignoreを忘れずに！.envファイルのあたいの扱いは当サイトではdotenvを利用しています。

Static HTML exportの設定

Next.jsには静的なHTMLを各ルーティングにexportし、exportすることができます。その設定を行いましょう。
next.config.jsファイルに設定を行います。

const axios = require('axios');
require('dotenv').config();

module.exports = {
  exportPathMap: async function() {
//作成したルーティングをpathに設定して下さい。
    const paths = {
      '/': { page: '/' },
      '/contact': { page: '/contact' },
      '/work': { page: '/work' },
      '/success': { page: '/success' },
    };

    const key = {
      headers: {
        'Content-Type': 'application/json',
        'X-API-KEY': process.env.API_KEY,
      },
    };
    const res = await axios.get(
      `https://ryusou-mtkh.microcms.io/api/v1/posts/`,
      key,
    );
    const data = await res.data.contents;
//postで作成した動的なページはqueryを取得して、ルーティングを配置します。
    data.forEach(post => {
      paths[`/posts/${post.id}`] = {
        page: '/posts/[id]',
        query: { id: post.id },
      };
    });
    return paths;
  },
  env: {
    api_key: process.env.API_KEY,
    x_api_key: process.env.X_API_KEY,
  },
};

yarn export

npmscriptに以下のコマンドを設定

  "scripts": {
    "export": "yarn run build && next export",
  },

next export でStatic HTML exportを行うことができます。exportの設定はnext.config.jsに基づきます。

yarn export

out/ディレクトリが作成されていれば成功です。

nowの設定を行う

now.json

nowのデプロイの設定を行います。
now.jsonを作成して設定していきましょう。設定についてはドキュメントをご覧ください。now.json docs

{
  "build": {
    "env": {
      "API_KEY": "@api_key",
      "X_API_KEY": "@x_api_key"
    }
  }
}

API_KEYを設定

以下のコマンドをターミナルで入力して設定します。

now secrets add  API_KEY abcdefg-12345-98765

now secrets add  X_API_KEY gfedcba-54321-12345

（値は先ほど使用した架空のものです。）
以上で設定は完了しました。
あとはnow devと入力すればデプロイ完了です。now --prodで後ほど設定するドメインでデプロイをすることも可能です。

Git integration

先ほど作成したプロダクトをGitHubにpushしてください。GitHubのリポジトリとnowの設定を行います。

Import Product

アカウント < Overview < Import Product < From Git Repository < Import project from GitHub
から先ほど作成したリポジトリを選択して取り込んでください。
設定はOUTPUT DIRECTORYを out/に変更しておきます。そのほかはdefaultで大丈夫です。
・Import Productをクリック

・From Git Repositoryをクリック（Gitでプロジェクトを管理している場合

・作成したプロダクトを選択

・設定はデフォルトでOK。OUTPUTDIRECTORYは先ほどexportしたoutにしておきましょう

これでGitHubのリポジトリとnowのProductが紐づけられました。
以降はmasterブランチにpushされるか、ターミナルコマンドでnow --prodを入力することでデプロイを行うことができます。

またnowのプロダクトページのsetting < Domainから自身のDomainを設定することもできます。(.now.shなら無料。Custom Domainを設定することも可能）

microCMSのhook設定

OptionとしてmicroCMSとnowのプロダクトの設定を行います。
今回はmicroCMSでコンテンツを更新したら、nowで自動デプロイをするように設定をしたいと思います。

nowでhooksを作成

nowのProductページからProject Settingのページに行って下にスクロールするとDeploy hooksを設定する項目があります。
Create Hooksで作成しましょう。
名前はわかりやすければなんでも構いません。また、GitBranchNameはmasterを入力しておきましょう。
・ProductのSettingをクリック

・下にスクロールするとCreateHookがあります。今回はGitは関係ないので、テキトーにmasterとかでOK

microCMSの設定

nowと紐づけたいコンテンツ　< API設定　< Webhook < カスタム通知
に先ほど作成したhooksを貼り付けます。そして変更をクリックしましょう。
以上です。

簡単ですね。
これで、コンテンツが更新されると、それに連動してnowでも更新されるようになりました。microCMSのカスタム通知については以下のブログをご覧ください。
microCMS CustomWebhook

まとめ

nowはサーバーレスでとても簡単でmicroCMSとの連動もとてもやりやすかった。ぜひ、ご自身の好きなライブラリ・CMSと組み合わせて試してみてください。

参考

Create Next.js App with Contentful
他にも色々な例が乗っているので、試してみてください。（microCMSの例を載せたいなあ。。。）

microCMS Blog
microCMSさんの公式ブログです。
Next.js + microCMS + NetlifyでJAMstackな世界に入門する
かみむらさんの記事にいつも助けられています。