1時間でさわって学ぶDocker

mkdir docker-hands-on
cd docker-hands-on

docker run -it alpine:latest

> echo "hello"
hello
> exit # コンテナの外に出る

touch Dockerfile
vim Dockerfile

FROM alpine:latest

docker build -t myalpine .

docker run -it myalpine

cat /etc/os-release

exit

docker run --rm -it myalpine

docker run --rm -d -it myalpine

docker exec -it <container id> sh

docker ps

docker stop <container id>

docker rm <container id>

mkdir front
cd front
npm init -y
npm install express

// Expressライブラリをインポート
const express = require('express');

// Expressを初期化
const app = express();

// リッスンするポートを定義
const port = 3000;

// ルートパス('/')へのGETリクエストのルートハンドラを定義
app.get('/', (req, res) => {
  res.send('Hello, Docker!');
});

// 指定したポートでアプリをリッスン
app.listen(port, () => {
  console.log(`App running on http://localhost:${port}`);
});

# ベースイメージとしてNode.js 14のイメージを選択
FROM node:14-slim

# コンテナ内の作業ディレクトリを/appに設定
WORKDIR /app

# package.jsonとpackage-lock.jsonをコンテナ内の作業ディレクトリにコピー
COPY package*.json ./

# アプリケーションの依存関係をインストールするためにコンテナ内でnpm installを実行
RUN npm install

# アプリケーションのソースコードの残りを作業ディレクトリにコピー
COPY . .

# アプリケーションはポート3000でリッスンするので、Dockerにこのポートを公開するように指示
EXPOSE 3000

# アプリケーションを起動するコマンド
CMD [ "node", "index.js" ]

node_modules
npm-debug.log

docker build -t front-demo .

docker run -d --rm -p 3000:3000 front-demo

cd ../
mkdir back
cd back

flask
openai

from flask import Flask, Response, request
import openai
import os
import json

app = Flask(__name__)

@app.route('/', methods=['GET'])
def generate():
    openai.api_key = os.getenv('OPENAI_KEY')

    response = openai.ChatCompletion.create(
      model="gpt-3.5-turbo",
      messages=[
        {
          "role": "user",
          "content": f"Please generate one sentence of a joke in Japanese."
        }
      ],
      temperature=1,
      max_tokens=256,
      top_p=1,
      frequency_penalty=0,
      presence_penalty=0
    )

    result = json.dumps(response.choices[0].message.content.strip(), ensure_ascii=False)
    return Response(result, content_type='application/json; charset=utf-8')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=4000)

# ベースとなるイメージの設定
FROM python:3.11-slim

# ワーキングディレクトリの設定
WORKDIR /app

# 依存関係リストのコピー
COPY requirements.txt requirements.txt

# 依存関係のインストール
RUN pip install -r requirements.txt

# ソースコードのコピー
COPY . .

# ポート4000を公開
EXPOSE 4000

# 実行コマンド
CMD [ "python", "app.py" ]

docker build -t back-demo .

docker run -p 4000:4000 -d --rm -e OPENAI_KEY=your_openai_key back-demo   

docker run -p 4000:4000 -d --rm -e OPENAI_KEY=${OPENAI_API_KEY} back-demo

cd ../
cd front
npm install axios

const express = require('express');
const axios = require('axios');

const app = express();
const port = 3000;

app.use(express.static('public'));

app.post('/api', async (req, res) => {
    try {
        const response = await axios.get('http://api:4000');
        res.send(response.data);
    } catch (error) {
        console.error(`Error: ${error}`);
    }
});

app.listen(port, () => {
    console.log(`App running on http://localhost:${port}`);
});

mkdir public
touch public/index.html
vim public/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Hello World Page</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://unpkg.com/htmx.org@1.6.1"></script>
</head>
<body class="grid items-center justify-items-center h-screen gap-4 bg-gray-200">
    <div id="response" class="text-center">Waiting for response...</div>
    <button class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700" hx-post="/api" hx-trigger="click" hx-swap="innerHTML" hx-target="#response">Click me!</button>
</body>
</html>

docker build -t front-demo .

docker network create network-demo

docker run --rm -d -p 3000:3000 --network network-demo --network-alias web front-demo
docker run --rm -d -p 4000:4000 -d -e OPENAI_KEY=${OPENAI_API_KEY} --network network-demo --network-alias api back-demo

version: '3.8' # 修正；versionは(optional)となっており、必須ではない。
services:
  front:
    build:
      context: ./front
    ports:
      - 3000:3000
    networks:
      app-network:
        aliases:
          - web

  back:
    build:
      context: ./back
    ports:
      - 4000:4000
    environment:
      - OPENAI_KEY=${OPENAI_API_KEY} #環境変数に設定してない場合は、直でAPIキーを書いて下さい。
    networks:
      app-network:
        aliases:
          - api

networks:
  app-network:
    name: network-demo

docker compose up -d

docker compose build

docker compose up -d --build

docker compose down