VercelでNext.jsのプロジェクトをデプロイしてみた

6 min read読了の目安(約5700字

サンプルで作ったNextjsのプロジェクトをVercelでデプロイしてみました!
今回はこちらのリポジトリをデプロイしてみました!

https://github.com/nekoshita/nextjs-blog-example

やりたいこと

  • Next.jsで作ったブログを公開したい
  • 本番環境と開発環境を用意したい
  • 開発環境には認証をかけたい
  • カスタムドメインにする

他にも試したみたいことはたくさんありますが、とりあえず初回なのでこれだけできればよしとします。

とりあえずVercelのサイトでポチポチする

  • GitHubでアカウント登録して
  • デフォルトの設定でポチポチしたら
  • デプロイできました!

デプロイ環境いっぱいあるらしい

なんか複数環境デプロイされた

2環境にデプロイされたました

プッシュしたらさらにデプロイされた

さらに2環境デプロイされました😅

もう一回プッシュしたらさらにデプロイされた

さらにデプロイされました😅

コミット毎に新しいドメインでデプロイしてくれるようです。
そして、ブランチごとにもドメインを用意してデプロイしてくれるようですね。

masterにマージしたらいろいろデプロイされた

Vercelはプッシュごとに勝手にデプロイしてくれる

https://vercel.com/docs/git/vercel-for-github#a-deployment-for-each-push
Vercelはデフォルトで、どのブランチへのプッシュでも、プルリク作っても、とりあえずデプロイしてくれます

デプロイ環境は全部で何種類あるの?

https://vercel.com/docs/platform/deployments#deployment-types
デプロイ環境は2種類です
  • Preview
    • デフォルトで全てのプッシュに対してデプロイされる
    • レスポンスヘッダーに x-robots-tag: noindex が付与されているので、検索エンジンにインデックスされない
  • Production
    • Production Branch(mainとかmasterとか)にマージされた時か、vercel --prodコマンドを実行時にデプロイされる

そんなにデプロイされたら逆に困る!?

検索エンジンにインデックスされてしまうのでは?!

https://vercel.com/support/articles/are-vercel-preview-deployment-indexed-by-search-engines?query=search

こちらのドキュメントにあるとおり、プレビュー環境ではレスポンスヘッダーに x-robots-tag: noindex が付与されているので、検索エンジンにインデックスされることはないとのことです。

プッシュでデプロイされるのやめたい

環境ごとに処理をわけたい

NODE_ENVはどうなってる?

  • ローカル実行 yarn dev
    • development
  • プレビュー環境
    • production
  • プロダクション環境
    • production

なので、NODE_ENVでプレビュー環境とプロダクション環境の処理を分岐させることはできないですね

Vercelの環境変数を使う

  • VercelのSettingのEnvironmental Variableで適当な環境変数を設定する
  • next.config.jsonに以下を追記
module.exports = {
  env: {
    ENABLE_BASIC_AUTH: process.env.ENABLE_BASIC_AUTH,
  },
}
  • コード内で process.env.ENABLE_BASIC_AUTH を判定する

この手順でプレビュー環境とプロダクション環境で分岐させることができました!

ん?環境がまたわからない

今回はVercelの環境変数の設定で「プレビュー環境」にだけ環境変数を設定したのですが、それが反映されてると思ってたサイトが予想と違うぞ?

環境変数の設定が反映されるurl

レスポンスヘッダーにx-robots-tag: noindexが付与されているかどうか

え、これじゃあ、環境変数で分岐させて認証かけたとしても、認証かけれないurl出てくるじゃん。。。

もう一回ドキュメントみてみる

https://vercel.com/docs/platform/deployments#preview

If you request a preview URL, the X-Robots-Tag HTTP header will be set as noindex.

やっぱりプレビュー環境だと、レスポンスヘッダーにx-robots-tag: noindexが付与されるとゆっていうように見えますね。
逆に言うと、レスポンスヘッダーにx-robots-tag: noindexが付与されたのなら、それはプレビュー環境であるはず。。。

とすると、僕の期待値的にはこれらのurlはプレビュー環境であり、環境変数もプレビュー環境の値が反されて欲しいものだが、環境変数はプロダクション環境の値が反映されるなう

公開時の環境とビルド時の環境

VercelのCLIを使ったらいけるか??

cliからデプロイした場合でも、ビルドの環境変数はproductionで、公開するドメインはproduction環境もpreview環境も用意される形だったので、無理でした。。。

プレビュー環境にパスワードかけたい

Vercelにそうゆう機能ある?

https://vercel.com/docs/platform/projects#password-protection
  • 個人のhobbyでは使えない
  • teamでかつProEnterpriseでないと使えない
  • つまり、最低でも月に$150かかる

個人で無料枠でプレビュー環境にパスワードをかけるには、自前でベーシック認証などを実装してあげるしかなさそうです。

自前で実装するパターンはいける?

公開時の環境とビルド時の環境の特性上、プレビュー環境で認証を用意したとしても、プレビュー環境で公開されてるけどビルドはプロダクションの環境変数で行われます。
なので、プロダクション環境以外の全ての公開されてるドメインに対して認証をかけることはできません。

カスタムドメイン試したみた

Google Domainsで購入したドメインにしてみたのですが、Google Domains側でネームサーバーのレコードを設定するだけで、すぐにカスタムドメインにできました!

結論

  • デプロイはめっちゃ簡単にできる
  • GitHub連携すればプッシュ毎にデプロイしてくれる
  • デプロイごとにドメインを発行してくれるので、開発状況を共有しやすい
  • 本番環境以外は検索エンジンに登録されてないようにnoindexにしてくれる
  • 自前で本番環境以外に認証をかけることはできない
  • 本番環境以外に認証をかけるには月$150の課金をするしかない(たぶん)

やりたいことはできたのか?

Next.jsで作ったブログを公開したい

できた!

本番環境と開発環境を用意したい

できた!むしろ勝手にされた!

開発環境には認証をかけたい

無料プランではできない!
自前で実装することもできない!
課金が必要でしたが、個人ブログに月$150はかけられないので、断念しました。。。

カスタムドメインにする

できた!

さいごに

僕が試した限りでは、自前でプレビュー環境に認証を実装することはできませんでしたが、もしできる方法があれば教えていただきたいです!

ZennもVercelでデプロイされているようですが、有料プランに入ってない時はプレビュー環境は認証かけずにやっていたのですかね?