0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@nomu_kyou(k n)

OCI Autonomous Database の Select AIをブラウザからチャット形式で使用できるアプリをCodexで作成

0
Last updated at Posted at 2026-04-28

はじめに

OCI Autonomous Database の Select AIを、
ブラウザからチャット形式で使用できるアプリをCodexで作成しました
以下の記事の複合技です

アプリ名が、「Select AI Chat 2」であったり、
幾つかパラメータ名がイケてないですがご容赦を。

アプリの実装では、私は一切コードも書かず、WEBAPサーバやDatabaseサーバにも直接アクセスせず、
ほぼCodexに対して、自然言語で処理を行いました
※ Compute,Autonomousの作成、データのロードは手動でOCIコンソール上で実施しました。

アプリの処理フロー

[Browser]
   |
   | 1. ユーザが質問入力
   v
[select-ai-chat2.html]
   |
   | 2. POST /api/ai/chat
   v
[nginx]
   |
   | 3. reverse proxy
   v
[Python app.py]
   |
   | 4. sqlplus 実行
   v
[OCI Autonomous Database]
   |
   | 5. SET_PROFILE + SELECT AI + SHOWSQL
   v
[Python app.py]
   |
   | 6. 結果整形
   v
[Browser]

構成図

以下は、今回の実現構成を ASCII アートで表したものです。

+--------------------------------------------------------------+
| ローカルPC                                                   |
|  - VS Code                                                   |
|  - Codex / ターミナル                                        |
|  - HTML / Python / nginx設定を編集                           |
+----------------------------+---------------------------------+
                             |
                             | SSH / SCP / 編集反映
                             v
+--------------------------------------------------------------+
| OCI Compute (WEB / AP サーバ)                                |
|                                                              |
|  [nginx]                                                     |
|   - /app/select-ai-chat2.html を配信                         |
|   - /api/ai/chat を Python アプリへ転送                      |
|   - HTTPS 終端                                               |
|                                                              |
|  [Python app.py]                                             |
|   - チャットAPIを提供                                        |
|   - SQL*Plusを実行                                           |
|   - Select AI結果を整形                                      |
|                                                              |
|  [Wallet / Oracle設定]                                       |
|   - TNS_ADMIN=<MASKED>                                       |
|   - ORACLE_HOME=<MASKED>                                     |
+----------------------------+---------------------------------+
                             |
                             | SQL*Plus + Wallet
                             v
+--------------------------------------------------------------+
| OCI Autonomous Database                                      |
|  - 接続先サービス: <MASKED_SERVICE_NAME>                     |
|  - DBMS_CLOUD_AI.SET_PROFILE('SELECT_AI_PROFILE3')           |
|  - SELECT AI {{query}}                                       |
|  - SELECT AI showsql {{query}}                               |
+--------------------------------------------------------------+

新規 Codex 環境向け - 構築用プロンプト

以下の文章を、新しい Codex 環境でそのままプロンプトとして使ってください。

OCI Compute 上で稼働している Web/AP サーバと、OCI Autonomous Database を使って、`select-ai-chat2.html` と同等の機能を実装してください。

前提構成は以下です。

- ローカルPC + VS Code から Codex を使って作業する
- Web/AP サーバは OCI Compute
- Database は OCI Autonomous Database
- Web サーバは `nginx`
- API アプリは `python3`
- DB 接続は `sqlplus` とウォレットを使う
- HTTPS は自己署名証明書でよい

実装したい内容は以下です。

## 目的

`select-ai-chat2.html` という新しい Web コンテンツを作成してください。

このページは、ブラウザからチャット形式で質問を入力すると、OCI Autonomous Database の Select AI を呼び出して結果を返す画面です。

## 作りたい画面の要件

- チャット形式の UI にする
- ユーザが文字入力できるテキストエリアを用意する
- Enter で送信、Shift + Enter で改行できるようにする
- AI からの返答をチャットログ形式で表示する
- AI が生成した SQL も表示する
- PC とスマホの両方で見やすいレスポンシブデザインにする
- HTTPS 経由でアクセスできるようにする

## `select-ai-chat2.html` の要件

実装したい `select-ai-chat2.html` の要件は次の通りです。

- チャット UI を持つ
- 質問入力欄を持つ
- Enter で送信できる
- AI の回答を表示できる
- `SHOWSQL` の結果も表示できる
- 利用プロファイルは `SELECT_AI_PROFILE3` 固定


## 内部で実行したい SQL

ユーザが入力した文字列を `{{query}}` とします。

内部では必ず次の SQL を実行してください。

EXEC DBMS_CLOUD_AI.SET_PROFILE('SELECT_AI_PROFILE3');
SELECT AI {{query}};
SELECT AI showsql {{query}};
 

返却時には、AIの回答と `SHOWSQL` の両方を見られるようにしてください。

## サーバ構成

以下のような役割分担で作成してください。

- `nginx`
  静的 HTML を配信し、API を Python アプリへリバースプロキシする
- `python` アプリ
  `/api/ai/chat` を受け取り、SQL*Plus を実行して Select AI の結果を返す
- `sqlplus`
  Autonomous Database へ接続して SQL を実行する

## 実装方針

以下の方針で作業してください。

1. まず既存コードや配置を確認する
2. `select-ai-chat.html` があれば参考にし、なければ新規に `select-ai-chat2.html` を作る
3. `app.py` 側で `SELECT_AI_PROFILE3` を扱えるようにする
4. `nginx` に `/app/select-ai-chat2.html` の公開設定を追加する
5. 必要なら `index.html` にもリンクと概要を追加する
6. サーバへ反映し、`nginx` とアプリを再読み込みまたは再起動する
7. 実際にページへアクセスして動作確認する

## 配置先の考え方

以下のような構成を想定してください。実環境に合わせて必要なら調整して構いません。

- 静的HTML配置先:
  `/usr/share/nginx/aitestat/`
- Pythonアプリ配置先:
  `/opt/aitestat-app/`
- nginx設定:
  `/etc/nginx/conf.d/aitestat.conf`
- systemdサービス:
  `/etc/systemd/system/aitestat-app.service`
- ウォレット:
  `~/network/admin/`

## 環境変数

`app.py` では接続情報を環境変数ファイルから読むようにしてください。

値そのものは既存環境の設定を確認して利用し、回答には生の接続情報やパスワードを書かないでください。

想定するキーは以下です。

APP_HOST=127.0.0.1
APP_PORT=8000
APP_DB_USER=<MASKED>
APP_DB_PASSWORD=<MASKED>
APP_DB_SERVICE=<MASKED>
APP_AI_USER=<MASKED>
APP_AI_PASSWORD=<MASKED>
APP_AI_SERVICE=<MASKED>
TNS_ADMIN=<MASKED>
ORACLE_HOME=<MASKED>


## セキュリティ要件

- 回答にはパスワード、秘密鍵、ウォレットの中身などの機微情報を出さない
- 必要があっても、接続情報はマスクして説明する
- HTML 側に資格情報を埋め込まない

## 最後にやってほしいこと

作業完了後は以下を報告してください。

1. 作成・更新したファイル
2. 反映した設定の概要
3. 動作確認結果
4. 公開 URL
5. 機微情報をマスクした補足説明

可能なら、実装後に `select-ai-chat2.html` の概要を説明する Markdown も 1 ファイル作成してください。

Select AI Chat 2 実装ガイド

1. アプリケーションの概要

select-ai-chat2.html は、OCI Autonomous Database の Select AI をブラウザからチャット形式で利用するための Web コンテンツです。

もともとベースになっている select-ai-chat.html が、実はありました
それは、Select AI をチャット形式で試せる汎用ページで、以下のコンテンツをそのままWEBアプリ化したものでした。

利用者が質問を入力すると、AI の回答と SHOWSQL の結果を確認できます。
また、複数の Select AI プロファイルを選択式で切り替えられる構成になっており、
用途に応じてプロファイルを使い分けられるのが特徴でした
（コメントなし・ありを使い分けられる）

そのうえで select-ai-chat2.html は、
既存の select-ai-chat.html と似た見た目・操作感を保ちながら、
使用する AI プロファイルを固定化した専用ページです。
利用者は質問文を入力して Enter を押すだけで、内部では次の 2 つの SQL が実行されます。

EXEC DBMS_CLOUD_AI.SET_PROFILE('SELECT_AI_PROFILE3');
SELECT AI {{query}};
SELECT AI showsql {{query}};

画面上では、次の流れで動作します。

  1. ユーザがチャット欄に質問を入力します。
  2. ブラウザが /api/ai/chat に HTTP POST を送ります。
  3. Python アプリケーションが SQL*Plus を呼び出します。
  4. OCI Autonomous Database に対して Select AI を実行します。
  5. AI の回答と、SHOWSQL で生成された SQL を整形してブラウザへ返します。
  6. ブラウザは結果をチャットログとして表示します。

2. このページで実現していること

  • ブラウザだけで Select AI を使える
  • 入力欄はチャット UI になっている
  • AI プロファイルは SELECT_AI_PROFILE3 に固定されている
  • 実行結果だけでなく、生成された SQL も確認できる
  • PC とスマホの両方で見やすいレスポンシブ構成になっている
  • HTTPS 経由で公開される

3. サーバに行った設定の手順

以下は、今回 select-ai-chat2.html を利用できるようにするために行った設定内容を、できるだけ分かりやすく整理したものです。

ユーザ名、パスワード、接続先、サービス名、公開IPなどはすべてマスクして記載しています。

3-1. 前提となる構成を用意する

まず、Web/AP サーバとして OCI Compute を使い、Database として OCI Autonomous Database を使う構成を前提にします。

サーバ側には少なくとも次のものが必要です。

  • nginx
  • python3
  • sqlplus
  • Autonomous Database 接続用ウォレット
  • systemd

※ Compute,Autonomousの作成は手動でOCIコンソール上で実施しました。

3-2. Autonomous Database 接続用のウォレットを配置する

OCI Autonomous Database に接続するため、ウォレットファイルを Compute サーバへ配置します。

配置イメージ:

~/network/admin/

ウォレット展開後、このディレクトリ配下に tnsnames.ora、sqlnet.ora などが存在する状態にします。

あわせて、環境変数を設定します。

export TNS_ADMIN=~/network/admin
export ORACLE_HOME=~

sqlnet.ora では、ウォレット参照先が TNS_ADMIN を使うようにしておきます。

設定イメージ:

WALLET_LOCATION = (SOURCE = (METHOD = file) (METHOD_DATA = (DIRECTORY=$TNS_ADMIN)))

3-3. SQL*Plus で Autonomous Database に接続できることを確認する

Web アプリを作る前に、サーバ上で SQL*Plus による疎通確認を行います。

接続情報はマスクした形で表すと、次のようになります。

sqlplus <MASKED_USER>/<MASKED_PASSWORD>@<MASKED_SERVICE_NAME>

たとえば疎通確認では、次のような SQL を使えます。

SELECT USERNAME FROM USER_USERS;

これが成功すれば、サーバから Autonomous Database へ接続する下準備はできています。

3-4. Select AI 用のプロファイルをデータベース側で用意する

select-ai-chat2.html は SELECT_AI_PROFILE3 を固定で使うため、事前に Autonomous Database 側でこのプロファイルが作成済みである必要があります。

Web 画面側は、プロファイルの中身を知っている必要はありません。重要なのは次の 2 点です。

  • データベースに SELECT_AI_PROFILE3 が存在すること
  • Web アプリがそのプロファイル名を使って DBMS_CLOUD_AI.SET_PROFILE を実行できること

3-5. Python アプリケーションを用意する

Web 画面からの問い合わせを受け、SQL*Plus を実行して結果を返す API サーバとして app.py を配置しました。

配置先:

/opt/aitestat-app/app.py

このアプリケーションでは、/api/ai/chat への POST を受けると、内部で次の処理をします。

  1. リクエスト JSON から query と profile を取り出す
  2. profile が許可対象か確認する
  3. SQL*Plus を起動する
  4. SET_PROFILE と SELECT AI と SELECT AI showsql を実行する
  5. AI結果と生成SQLをテキストとして返す

今回の select-ai-chat2.html 用に、app.py 側では SELECT_AI_PROFILE3 を許可対象へ追加しています。

許可イメージ:

allowed = {
    "SELECT_AI_PROFILE",
    "SELECT_AI_PROFILE_COMMENTS",
    "SELECT_AI_PROFILE3",
}

3-6. アプリケーション用の環境変数ファイルを配置する

app.py が SQL*Plus 接続時に参照する環境変数を、app.env として配置します。

配置先:

/opt/aitestat-app/app.env

実際の値はマスクすると、次のようなイメージです。

APP_HOST=127.0.0.1
APP_PORT=8000
APP_DB_USER=<MASKED_DB_USER>
APP_DB_PASSWORD=<MASKED_DB_PASSWORD>
APP_DB_SERVICE=<MASKED_DB_SERVICE>
APP_AI_USER=<MASKED_AI_USER>
APP_AI_PASSWORD=<MASKED_AI_PASSWORD>
APP_AI_SERVICE=<MASKED_AI_SERVICE>
TNS_ADMIN=<MASKED_WALLET_PATH>
ORACLE_HOME=<MASKED_ORACLE_HOME>

ポイントは次の通りです。

  • Web 画面そのものは DB に直接つながない
  • app.py がサーバ内で SQL*Plus を実行する
  • 接続情報は HTML に書かず、環境変数ファイルに閉じ込める

3-7. systemd サービスとして API サーバを常駐化する

Python アプリを毎回手動起動しなくて済むように、systemd サービスとして登録しました。

サービス定義ファイルの配置先:

/etc/systemd/system/aitestat-app.service

内容の要点:

  • 実行ユーザ: <MASKED_OS_USER>
  • 作業ディレクトリ: /opt/aitestat-app
  • 環境変数: /opt/aitestat-app/app.env
  • 起動コマンド: python3 /opt/aitestat-app/app.py

起動手順の例:

sudo systemctl daemon-reload
sudo systemctl enable --now aitestat-app.service
sudo systemctl restart aitestat-app.service

3-8. select-ai-chat2.html を nginx 配下へ配置する

ブラウザへ配信する静的 HTML として、select-ai-chat2.html を公開ディレクトリへ配置します。

配置先:

/usr/share/nginx/aitestat/select-ai-chat2.html

この HTML のポイントは次の通りです。

  • チャット UI を持つ
  • 入力欄がある
  • プロファイル選択欄は見せるが、値は SELECT_AI_PROFILE3 固定
  • 送信時に /api/ai/chat へ query と profile を POST する

3-9. nginx で静的コンテンツと API を公開する

nginx では、静的ファイル配信と API プロキシの両方を設定しました。

設定ファイル配置先:

/etc/nginx/conf.d/aitestat.conf

主な考え方は次の通りです。

  • /app/select-ai-chat2.html は静的 HTML として返す
  • /api/ai/chat は Python アプリへリバースプロキシする
  • /healthz でアプリのヘルスチェックをできるようにする
  • HTTP は HTTPS へリダイレクトする

設定イメージ:

location = /app/select-ai-chat2.html {
    alias /usr/share/nginx/aitestat/select-ai-chat2.html;
}

location = /api/ai/chat {
    proxy_pass http://127.0.0.1:8000/api/ai/chat;
}

3-10. HTTPS を有効化する

今回の構成では自己署名証明書を使って HTTPS 化しています。

証明書配置イメージ:

/etc/pki/nginx/aitestat-selfsigned.crt
/etc/pki/nginx/private/aitestat-selfsigned.key

これにより、ブラウザからは HTTPS 経由で select-ai-chat2.html へアクセスできます。

3-11. nginx 設定を反映する

設定ファイル更新後は、構文チェックを行ってから再読込します。

sudo nginx -t
sudo systemctl reload nginx

API アプリを更新した場合は、サービスも再起動します。

sudo systemctl restart aitestat-app.service

3-12. 動作確認を行う

最後に、ブラウザから次のような URL へアクセスして動作確認します。

https://<MASKED_HOST>/app/select-ai-chat2.html

確認観点:

  • 画面が開くこと
  • チャット欄に質問を入力できること
  • 送信後に AI の回答が返ること
  • SHOWSQL の結果も表示されること
  • API のヘルスチェックが成功すること

ヘルスチェック例:

https://<MASKED_HOST>/healthz

作成物のイメージはこんな感じでした
元のデータは、仮想の外資系企業の人事データとしており、社員ごとの部門やオフィスロケーション、給与、入社日.....などが登録されています

image.png

6. まとめ

select-ai-chat2.html は、Select AI を簡単に試せる専用チャット画面です。

この仕組みのポイントは、HTML だけで完結させず、Compute 上の Python アプリを経由して SQL*Plus を実行し、その先で Autonomous Database の Select AI を呼び出している点です。これにより、ブラウザへ資格情報を露出させずに、安全に AI 問い合わせ画面を提供できます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?