📐

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

2021/03/03に公開

Next.js

React

Vercel

tech

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

やりたいこと

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Vercelはデフォルトで、どのブランチへのプッシュでも、プルリク作っても、とりあえずデプロイしてくれます

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

デプロイ環境は2種類です

Preview
- デフォルトで全てのプッシュに対してデプロイされる
- レスポンスヘッダーに x-robots-tag: noindex が付与されているので、検索エンジンにインデックスされない
Production
- Production Branch（mainとかmasterとか）にマージされた時か、vercel --prodコマンドを実行時にデプロイされる

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

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

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

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

vercelのconfigで設定する
- https://vercel.com/docs/configuration#git/github-enabled
- 試してみたら、デプロイされなくなりました
  - https://github.com/nekoshita/nextjs-blog-example/pull/2
  - masterブランチにマージしてもデプロイされませんでした
設定でビルドステップを無視する条件を登録する
- https://vercel.com/docs/platform/projects#ignored-build-step

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

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

プロダクション環境
プレビュー環境
- https://nextjs-blog-example-git-feature-check-env-variable-nekoshita.vercel.app/
- https://nextjs-blog-example-innzmoijs-nekoshita.vercel.app/

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

x-robots-tag: noindexが付与されていない
- https://nextjs-blog-example-omega.vercel.app/
x-robots-tag: noindexが付与されている

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

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

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が言ってるproduction環境は、レスポンスヘッダーにx-robots-tag: noindexが付与されていないところ、っていうのは正しい
なので、prodcution環境はhttps://nextjs-blog-example-omega.vercel.app/ のみ
埋め込まれる環境変数は、ビルド時の環境による
デフォルト設定だと、masterかmainブランチでプッシュすると、productionモードでビルドする
その時は、productionの環境変数が使われ、4箇所にデプロイされる
このうち本当のproduciton環境は一番上のだけであるのだが、ビルドする時に使ってる環境変数は全部prodcutionの環境変数

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

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

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

Vercelにそうゆう機能ある？

個人のhobbyでは使えない
teamでかつProかEnterpriseでないと使えない
つまり、最低でも月に$150かかる

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

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

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

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

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

結論

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

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

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

できた！

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

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

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

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

カスタムドメインにする