Next.jsアプリを社内公開するならVercel?Netlify?AIツール公開前のチェックポイント

AIツールは「作ったあと」が大事。社内共有前に考えたい公開先とセキュリティ
AIを使った業務ツールは、以前よりも手軽に作れるようになりました。
しかし、実際の業務で使うには「自分のパソコンで動く」だけでは不十分です。
社内メンバーや業務委託メンバーに使ってもらうには、公開先やログイン方法、APIキーの管理まで考える必要があります。
今回は、弊社で社内向けの小さなAI業務支援ツールを共有するにあたり検討した、公開前のポイントを整理します。
Next.js・Vercel・APIキーの関係を、むずかしい言葉なしで図解します。

Next.jsとVercelは何が違う?
まず混乱しやすいのが、Next.jsとVercelの違いです。
Next.jsは、Webアプリを作るための仕組みです。一方、Vercelは、作ったWebアプリをインターネット上に公開するための場所です。
たとえるなら、Next.jsは「お店の中身を作る方法」、Vercelは「そのお店を出す場所」のようなものです。
開発中は、自分のパソコン上で localhost というURLを使って確認できます。
しかし、このURLは自分のパソコンの中だけで使えるものです。
他の人にURLを送っても、そのままでは開けません。
VercelとNetlify、どちらを選ぶ?
Webアプリの公開先としてよく使われるのが、VercelやNetlifyです。
どちらも便利なサービスですが、得意分野が少し異なります。
VercelはNext.jsとの相性がよく、APIを使う小さなWebアプリやAI連携ツールを公開しやすい点が特徴です。
一方、Netlifyは静的サイトやJamstack系のサイト公開に強く、HTML、CSS、JavaScript中心のサイトにも向いています。
今回のように、Next.jsで作った社内向けAI業務支援ツールで、AI APIを使うサーバー側の処理がある場合は、Vercelを使うのが自然だと判断しました。
APIキーは画面側に出さない
AI APIを使うツールでは、APIキーの扱いがとても重要です。

APIキーをコードに直接書いたり、GitHubに上げたり、チャットで共有したりするのは避ける必要があります。
万が一外部に漏れると、不正利用や想定外の費用発生につながる可能性があります。
そのため、APIキーやログイン用パスワードは、公開先サービスの「環境変数」に登録して管理します。
環境変数とは、アプリの外側で安全に設定しておく情報のことです。
特にNext.jsでは、環境変数の名前に NEXT_PUBLIC_ を付けると、ブラウザ側から見える値になります。
APIキーには絶対につけないよう注意が必要です。
社内向けでもセキュリティ設計は必要
社内向けツールであっても、URLを知っている人がアクセスできる状態にする以上、最低限のセキュリティは必要です。
たとえば、ログイン用パスワードを設定する、APIキーを環境変数で管理する、.env.local をGit管理から除外する、本番用パスワードを簡単な文字列にしない、といった基本対策です。
また、AI APIの月間利用回数に上限を設けることも大切です。
便利なツールほど使われる機会が増えるため、費用が増えすぎないように運用面まで設計しておく必要があります。
AI活用は「使える状態に整える」までが設計

AIツールを作ること自体は、以前よりも身近になりました。
しかし、業務で使うためには、作ったあとの共有方法、権限管理、APIキー管理、費用上限、更新方法まで考える必要があります。
AI活用は、ツールを作って終わりではありません。
現場の人が安心して使える状態に整え、業務の中に無理なく組み込めてはじめて効果が出ます。
AI Mateでは、生成AIを単なるツール紹介で終わらせず、現場の業務に合わせた設計・運用・改善まで含めて支援しています。
生成AIの活用や、社内の業務効率化にご関心のある企業様は、お気軽にお問い合わせください。
AI Mateでは、現場の業務に合わせた生成AI活用研修・業務改善支援を行っています。
