Loading

  • LIGHT

  • DARK

ROUTE

ルートゼロの
アクティビティ

【2025年最新】Python×Docker×OpenAI APIでAIチャットを作る完全ガイド

技術情報
6

はじめに

AI技術を学ぶなら、PythonとOpenAI APIは外せません。
でも、「環境構築が面倒」「APIの実装方法が分からない」と悩む人も多いのではないでしょうか？

そこで今回は、Dockerを使ってAIチャット開発環境を構築し、OpenAI APIと連携するチャットアプリを作る手順を紹介します。
実際に動くコード一式も公開するので、コピペで試せます！

実行環境構築

1. 目指す構成とフォルダ構成

まずは完成イメージです。
以下のように必要ファイルを整理しておくと、Dockerで一括管理できて便利です。

project-root/
├── docker-compose.yml
├── Dockerfile
├── requirements.txt
├── .env
├── app/
│   ├── main.py          # FastAPIサーバー
│   ├── chat_logic.py     # OpenAI API呼び出し処理
│   ├── static/
│   │   ├── index.html    # チャットUI
│   │   ├── script.js     # メッセージ送信処理
│   │   └── style.css     # 必要ならスタイル

2. Dockerfile（Python環境構築）

Dockerfileでは、Python3.11の公式イメージを使って、必要ライブラリをインストール。
app/以下のコードをコンテナにコピーすることで、ホスト側とコンテナ側のファイルを同期します。

FROM python:3.11

WORKDIR /app

COPY requirements.txt .
RUN pip install -r requirements.txt

COPY app /app

CMD ["python", "main.py"]

Dockerの導入方法は以下の関連記事より確認いただけます！

→Dockerに関する記事

DockerでPython Flaskアプリを簡単に構築する方法

Docker + Spring Boot で手軽に開発環境を構築しよう！

3. docker-compose.yml（環境変数やポート設定）

docker-compose.ymlで、環境変数（APIキー）やボリューム設定、ポートマッピングを定義。
docker-compose up –buildだけで、環境構築から実行まで一発で行えます。

version: '3'
services:
  python-ai:
    build: .
    container_name: python-ai-server
    environment:
      OPENAI_API_KEY: ${OPENAI_API_KEY}
    volumes:
      - ./app:/app
    working_dir: /app
    ports:
      - "8080:8080"
    command: ["python", "main.py"]

4. requirements.txt

必要ライブラリをまとめて管理。PythonのAI開発ではopenai, fastapi, uvicornが必須です。

openai
fastapi
uvicorn

5. .env（APIキー管理）

APIキーはコードに直接書かず、.envにまとめて管理するのが安全です。
このAPIキーは、事前にOpenAIの公式サイトで発行しておく必要があります。

OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

APIキー発行手順（補足）

  1. OpenAIの公式サイトにアクセス
    https://platform.openai.com/signup

  2. アカウントを作成（Googleアカウント連携なども可）

  3. ダッシュボードにログイン後、画面右上の「アカウントアイコン」→「API Keys」を選択

  4. 「Create new secret key」ボタンを押して、新しいAPIキーを発行

  5. 発行されたキーをコピーして、.envファイルに貼り付け

注意

  1. APIキーは一度しか表示されないので、忘れずにコピー＆保存してください。

  2. もし漏洩した場合は、「Revoke（無効化）」して新しいキーを発行しましょう。

6. FastAPIサーバー（main.py）

FastAPIでバックエンドAPIを構築。
ポイントはCORS設定と、/staticでHTML/JSを直接提供すること。
さらに/chatのエンドポイントで、OpenAI APIとのやりとりを担当します。

import os
import sys
import uvicorn
from fastapi import FastAPI, Request
from fastapi.staticfiles import StaticFiles
from fastapi.middleware.cors import CORSMiddleware

sys.path.append(os.path.dirname(__file__))
from chat_logic import process_message

app = FastAPI()
app.add_middleware(
    CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"]
)
app.mount("/static", StaticFiles(directory="static"), name="static")

messages = [{"role": "system", "content": "あなたは親切なAIアシスタントです。"}]

@app.post("/chat")
async def chat(request: Request):
    data = await request.json()
    user_message = data.get("message")
    reply = process_message(user_message, messages)
    return {"reply": reply}

if __name__ == "__main__":
    uvicorn.run("main:app", host="0.0.0.0", port=8080, reload=True)

7. OpenAI API呼び出し（chat_logic.py）

OpenAIのchat.completions.createで、スレッド履歴を保持しながらやり取りします。

import os
from openai import OpenAI

client = OpenAI(api_key=os.getenv("OPENAI_API_KEY"))

def process_message(user_message, messages):
    messages.append({"role": "user", "content": user_message})

    response = client.chat.completions.create(
        model="gpt-4",
        messages=messages
    )

    reply = response.choices[0].message.content
    messages.append({"role": "assistant", "content": reply})

    return reply

8. HTML+JavaScriptでチャットUI作成

フロントエンドはシンプルなHTML+JavaScriptで実装。
この部分をReactやVueに置き換えることも可能ですが、まずはシンプルに動く形を重視。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>AIチャット with OpenAI API</title>
    <script src="script.js" defer></script>
    <style>
        body { font-family: Arial, sans-serif; }
        #chat { width: 80%; margin: 20px auto; }
        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ccc; padding: 10px; }
        input, button { margin-top: 10px; }
    </style>
</head>
<body>
    <div id="chat">
        <div id="messages"></div>
        <input type="text" id="messageInput" placeholder="メッセージを入力">
        <button onclick="sendMessage()">送信</button>
    </div>
</body>
</html>

script.js

const messagesDiv = document.getElementById('messages');
const messageInput = document.getElementById('messageInput');

async function sendMessage() {
    const message = messageInput.value;
    if (!message) return;

    appendMessage("あなた", message);
    messageInput.value = "";

    const response = await fetch("/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: message })
    });

    const data = await response.json();
    appendMessage("AI", data.reply);
}

function appendMessage(sender, message) {
    const div = document.createElement("div");
    div.textContent = `${sender}: ${message}`;
    messagesDiv.appendChild(div);
    messagesDiv.scrollTop = messagesDiv.scrollHeight;
}

実行確認！

実行手順まとめ

  • まずターミナルやコマンドプロンプトを開きます。

  • docker-compose.ymlが存在するプロジェクトのルートフォルダに移動します。
    例えば、「my-ai-chat」というフォルダにまとめた場合

cd path/to/my-ai-chat

その上で、次のコマンドを実行

docker-compose up --build

  1. これで、Dockerイメージのビルドとコンテナの起動がまとめて実行されます。

ポイント

  • プロジェクトルート（docker-compose.ymlがあるディレクトリ）で実行することが重要です。

  • 初回は–buildをつけることで、Dockerイメージをしっかり再構築。

  • 2回目以降は、コードだけ変えて再起動したいならdocker-compose upだけでもOK。

ブラウザで以下にアクセス

http://localhost:8080/static/index.html

チャットUIが表示され、メッセージを送信するとAIから返信が届く！

さいごに

Python×Docker×OpenAI APIを組み合わせることで、「どこでも再現可能なAIチャット環境」が簡単に作れます。
「環境構築が面倒」「API呼び出しの形式がわからない」という悩みもこれで一気に解消！
ぜひ、この構成を自分のプロジェクトにも応用してみてください。

【関連リンク】

【内部リンク】

Follow Us

RANKINGranking-icon

LATEST POSTS

SNS Feeds

YouTube

@routezero_shinnsotsu

@routezero_shibasuke

RECRUIT

募集要項・エントリー

中途採用エントリーはこちら

arrow

2025年新卒エントリーはこちら

社長と直に面談したい!
社長に直談判

arrow

管理職を目指すあなたは
まずは岡本を倒せ!

arrow

もっとルートゼロを知りたいなら

DISCOVER MORE