OpenAIのAPIを使ったアプリをデプロイする時にエラーが出ます。

Question

実現したいこと

OpenAIのAPIを使ったチャットアプリをデプロイしたい。

発生している問題・分からないこと

OpenAIのAPIを使ったチャットアプリを作りました。
開発中は問題なかったのですが、vercelにデプロイする段階でこのようなエラーメッセージが出て困っています。

エラーメッセージ

Error: The OPENAI_API_KEY environment variable is missing or empty; either provide it, or instantiate the OpenAI client with an apiKey option, like new OpenAI({ apiKey: 'My API Key' }).

該当のソースコード

import OpenAI from "openai";

const openai = new OpenAI({
    apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
    dangerouslyAllowBrowser: true,
});

const gptResponse = await openai.chat.completions.create({
     messages: [ { role: "user", content: sendMessage } ],
     model: "gpt-3.5-turbo",
});

以下、.envファイルです。

NEXT_PUBLIC_OPENAI_KEY="............................................................................"

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

主にGoogleでエラーの原因を検索するなどして調べましたが、解決につながる情報が得られませんでした。
また、APIを使うのが初めてで、なぜデプロイするタイミングでエラーが出たのか全くわからない状況です。
自分で試せたことがほとんどなく申し訳ありませんが、分かる方がいらっしゃいましたらよろしくお願いいたします。

補足

"firebase": "^10.8.0",
"next": "14.1.0",
"openai": "^4.28.0",
"react": "^18",

Answer 1

https://teratail.com/questions/uli7erkm0yzr2j#reply-m9vmhao4ms1n2w こちらの回答と同じように、Vercel の環境変数機能を使用する必要があるかもしれません。

Comments

[shin_jrjr]

ご回答いただきありがとうございます。
早速試してみましたが、エラーが消えませんでした。。。

例えば、vercelでAPI＿KEY という名前の環境変数にした場合、プログラム内ではimportなど何もせずに
process.env.API＿KEYとして使うことができるのでしょうか？
また、vercelの環境変数機能を使用していれば、.envファイル自体も不要なのでしょうか？

お忙しい中恐れ入りますが、どうぞよろしくお願いいたします。。。

[honey32]

あ、間違いだったかもです…
process.env.NEXT_PUBLIC_OPENAI_KEY

なので、 Vercel で環境変数を設定するときも、 `OPENAPI_KEY` ではなく `NEXT_PUBLIC_OPENAI_KEY` にすれば解消するかもしれません。

> また、vercelの環境変数機能を使用していれば、.envファイル自体も不要なのでしょうか？

すみません、試してみたことがないので、Vercel のドキュメントに目を通すか、`NEXT_PUBLIC_` つけ忘れを解消したあとで、試してみると分かると思います。