環境で結果が変わるVercelエラーたち

解決策は現在自分が取っている方法を書いているものの、ろくなものではないです
情報提供できるよ、という方がいたらぜひお願いします

何がしたかったか

• APIとフロントエンドをNext.jsで開発している
• APIのエンドポイントを環境変数で定義したかった <= 変更容易性的な（意味ない？
• 環境変数API_ENDPOINTは自身のドメイン + /apiだが、これをVercelでやるのは難しかったためnext.config.tsで定義していた
  • ローカル：開発サーバーのURL（http://localhost:3000）
  • Vercel：VERCEL_URLの値を使用

何が起こったか

ローカル環境でもプレビュー環境でも問題なく動いていた。
プレビューで動くなら本番でも大丈夫だと思い、PRをマージしてプロダクションビルドした。

すると、

1. VERCEL_URLはhttps://プロジェクト名-ハッシュ-nanasi1s-project.vercel.appとなる
2. API_ENDPOINTはビルド時にVERCEL_URLの値が埋め込まれる
3. APIへのHTTPリクエストはAPI_ENDPOINTがベースになっている
4. https://プロジェクト名.vercel.appからアクセスした結果、
   1. https://プロジェクト名-ハッシュ-nanasi1s-project.vercel.appとはドメインが違う
   2. CORSポリシーに違反するためエラー

Vercelのシステム環境変数：
https://vercel.com/docs/projects/environment-variables/system-environment-variables

普通に考えてもうちょっといいVERCEL_URLの取り回しがありそうなものだが、どうしてこうなった？

本番でのビルド=それ以外のURLのビルドなので、デフォルトの？ハッシュがあるURLが埋め込まれてしまった、ということなんだろうか

それとも、

• CI/CDが悪い => VercelとGitHubを連携した時のデフォルトだし平気？
• next.config.tsが悪い => なくはないか...?

解決策

next.config.tsでは環境変数を動的に設定できるので、VERCEL_ENVを使ってプロダクションビルドとプレビュービルドを条件分岐しよう

• VERCEL_ENV === 'production': VERCEL_PROJECT_PRODUCTION_URL
• VERCEL_ENV === 'preview': VERCEL_URL

https://github.com/nanasi-1/encrypted-board/blob/main/next.config.ts

何がしたかったか

• APIとフロントエンドをNext.jsで開発している
• /api/postsにある投稿一覧にアクセスし、それを画面に表示したい
  • これを行うコンポーネントはサーバーコンポーネント
  • => データフェッチはサーバーで行う
• レスポンスはResponseのjsonメソッドでパースしていた

何が起こったか

1. Vercelのプレビュー環境では、デフォルトだと認証処理が入る
   • ログインしているVercelアカウントにアクセス権があるか確認してるっぽい
2. ページにアクセスし、/api/postsにリクエストが送られた
   • ローカル環境では正常に動いていた
3. レスポンスはAuth...という感じのHTMLだった
4. ↑はJSON形式ではないため、パースしようとしてエラーが発生
5. ↑はサーバーエラーのため、ステータスコード500が返される

解決策

Vercelの設定からプレビュー環境の認証を解除すれば動く。
プレビューが見られたらまずいプロジェクトでもない限り、OFFでもいいかもしれない。

もしくはそういうのに対策できる何かがある？（調べてない）

（認証というか認可な気がするけど気にしない）