vercelへのデプロイと環境変数

以下の前回の記事でvercelへのデプロイの際のContentfulのAPI Keyの設定を後回しにしていましたが、実際にデプロイしましたので報告します。

前回の記事ではプロジェクト直下に置いたvercel.jsonにContentfulで取得したAPI Keyを書いたらいいんじゃね？的なことを書いてましたが、Githubにあげる時点で疑問が出てきました。

「これ、githubに上げたらみんながAPI Keyを見れるよな？」

ということはやり方が間違っているので調べます。前回参考にした記事をもう一度見直すと以下のコマンドを入力する説明があります。

$ vercel secrets add contentful_space_id [your-space-id]
$ vercel secrets add contentful_access_token [your-access-token]

わーお！つまりvercel-cliを使ってvercel自体に直接API Keyを送る訳です。そんでvercel.jsonではvercel-cliでアップロードしたidなどの環境変数のうち、どの変数を利用するかを指定していただけでした。

{
 "build": {
   "env": {
     "NEXT_PUBLIC_CONTENTFUL_SPACE_ID": "@contentful_space_id",
     "NEXT_PUBLIC_CONTENTFUL_ACCESS_TOKEN": "@contentful_access_token"
   }
 }
}

ちなみにvercel-cliはnpmを使ってインストール出来ます。

npm install vercel

これでgithubにプルすれば、自動的にビルドしてくれます。

ちなみにサイトの現状

My new title

StaticGeneration

今作っているサイトは私の作ったコンテンツをContentfulに登録し、それを読み込んで表示するだけなので、クライアントサイドでのレンダリングは必要ありません。また、Contentfulでコンテンツを書き換えたのをトリガーにビルドしてくれる機能があるのでサーバサイドレンダリングも必要なくスタティックジェネレーションだけでいけるようです。今のままで自動的にやってくれるのか、はたまた何か特別な設定が必要なのか、次回はそこらへんを探って記事にしようかなと思います。