Nextjs 13で環境変数が倒せなかった話

July 23, 2023

この記事は3分ぐらいで読めるっぽいよ。

背景

職場でフロントエンドがNextjs(13)、バックエンドにC#のgRPC-Webサーバーの
システムを構築しております。
フロントエンドからバックエンドのgRPC-Webサーバーを直接叩くので、
フロントエンド側にgRPC-WebサーバーのURLを伝搬しなければなりません。
ある程度製作が進んだところで
デプロイについていろいろ考え始めたところ、
まぁ鉄板にコンテナに包もうと思ったわけです。
コンテナ化するならURLの設定値は環境変数経由で
渡したほうが良さそうだなと。

ところが...どっこい！

いろいろ試しても王道策はダメ！
_(:3」∠) < ﾀｶｻﾞﾜｼﾞｭﾝｽｹ
はぁ...
んで、妥協案と言いますか...折衷案？を考えたので
一応シェアする感じです。
王道なやり方ご存じの方、教えてくださると感謝カンゲキ雨嵐とな。

※毎度お馴染み、当方はtypescriptやweb系技術についてズブの素人です。ご注意ください。

いろいろ試した王道策

process.env

こいつが一番記事が多い＆王道そう。
ただこいつ、ビルド時に解決されちゃうんですよね...
というわけで断念...

publicRuntimeConfigとserverRuntimeConfig

これが、一番やりたいことに近そうだったのですが、
当方の環境だと、ビルドエラーが出ちゃうんですよね...
一応GithubのIssueにも上がってますが、使い物にならないという結論に...

折衷案（のつもり？）

大雑把な概要と手順

~~まぁ、とても愚直に設定を返すAPIを実装して、~~
~~ それを初期化時に呼び出す感じです。~~
~~サーバーサイドのAPIならprocess.envが使えたので、~~
~~そこで、~~
~~1. サーバーサイドで環境変数から設定オブジェクトを作成~~
~~2. Webクライアントが初期化時にサーバーサイドのAPIを叩いて設定オブジェクトを受信＆読み込み~~
~~といったフローです。~~
~~まぁ、愚直で王道だよね。~~

↑ゆきまくらの勘違いでした！結局この方法もビルド時に埋め込まれます！(2023-07-23追記)
以下の項目はサーバーサイドAPIの実装例程度にとどめた認識をお願いします🙇

実装の簡単なガイド

なんか、Nextjs13で結構APIの実装方法が変わったみたい？
こちらのサイトを参考にしました。

サーバーサイド

src/app/api/settingsにフォルダを作る
そのフォルダ内にroute.tsを作成する。

route.ts

Copy

export async function GET(request: NextRequest) {
  
  //適当な設定情報を格納したクラス
  const settingobj = { foo: process.env.FOO, };

  return NextResponse.json(settingobj);
}

クライアントサイド

クライアントサイドの任意の場所でfetch('/api/settings')呼ぶ。
(つまり、HTTPAPIをコールするってこと)

(ヒント？？).bodyファイル(2023-07-23追記)

.next/server/app/apiディレクトリにsettings.bodyというファイルが生成されており、
こいつを試しに手で変えてやると、ビルド後の変数の値が切り替わった。
(つまり、ビルド後のファイルを直に編集)
ただ、これを実運用に持っていくには、あまりに邪道過ぎてやりたくないな...
困ったものだ...(´Д｀)ﾊｧ…

〆

まぁ、クライアントサイドが環境変数直接アクセスできないのは
理論的には分からなくもない。
けどさぁ、例えば動的にデリバリーするコンテンツの変数を
配信直前に変更できる工夫とかはあってもいいようにも思えてしまう。
(欲張りか？)
今までWebUIのシステムをまともに考えた事がなかったから、
圧倒的に経験値が足りなくて辛み...
まぁ楽しいのだけれども。
実は、まだ当方では完全解決とまでは行ってなくて、
~~DIコンテナに設定を注入するアーキテクチャにしてしまったため、~~
~~この設定を読み出す関数をコールする~~
~~タイミングに悩んでいるところであるヽ(･ω･)/ｽﾞｺｰ~~
↑これはDAOに実装を固めて、だましだまし使うことにした。(2023-07-23追記)
一難去ってまた一難、泣きっ面に蜂、弱り目に祟り目、虎口に逃れて竜穴に入る...
では(^^)ノシ

ゆきふるまくらの。

月別アーカイブ

タグ