Frontend is working!<\/h1>\n<\/body>\n<\/html>\n<\/pre>\n\n\n\n

\n
• index.js (express js) を作成します。\n<\/li>\n<\/ul>\n\n

  const express = require(\"express\");\nconst app = express();\nconst port=3000;\n\napp.get(\"\/\", (req, res) => {\nres.sendFile(__dirname + \"\/index.html\");\n})\n\napp.listen(port, () => {\n  console.log(`running at port ${port}`);\n});\n<\/pre>\n\n\n\n
  \n
  package.json を作成します。\n<\/li>\n<\/ul>\n\n
  {\n  \"name\": \"nodejsapp\",\n  \"version\": \"1.0.0\",\n  \"description\": \"nodejsapp description\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"start\": \"node index.js\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\",\n  \"dependencies\": {\n    \"express\": \"^4.17.3\"\n  }\n}\n<\/pre>\n\n\n\n
  \n
  次に、バックエンド ディレクトリを作成し、Dockerfile を作成します。\n<\/li>\n<\/ul>\n\n
  FROM python:3.11\nWORKDIR \/usr\/src\/app\nCOPY . .\nRUN pip install -r requirements.txt\nEXPOSE 5000\nCMD [\"python\", \"app.py\"]\n<\/pre>\n\n\n\n
  \n
  フラスコを使用してバックエンド アプリを作成します:\n<\/li>\n<\/ul>\n\n
  from flask import Flask, jsonify\n\napp = Flask(__name__)\n\n@app.route('\/')\ndef home():\n    return \"Backend is working!\"\n\n@app.route('\/api', methods=['GET'])\ndef api():\n    return jsonify({\"message\": \"Hello from the backend!\"})\n\nif __name__ == '__main__':\n    app.run(host='0.0.0.0', port=5000)\n<\/pre>\n\n\n\n
  \n
  requirements.txt を作成します:\n<\/li>\n<\/ul>\n\n
  flask\n<\/pre>\n\n\n\n
  \n
  最後に、バックエンド ディレクトリとフロントエンド ディレクトリの上に docker-compose.yaml を作成します。\n<\/li>\n<\/ul>\n\n
  services:\n  frontend:\n    build:\n      context: .\/frontend\n    container_name: frontend\n    ports:\n      - \"3000:3000\"\n    volumes:\n      - .\/frontend:\/usr\/src\/app\n    depends_on:\n      - backend\n\n  backend:\n    build:\n      context: .\/backend\n    container_name: backend\n    ports:\n      - \"5000:5000\"\n    volumes:\n      - .\/backend:\/usr\/src\/app\n    command: sh -c \"pip install -r requirements.txt && python app.py\"\n\n  db:\n    image: postgres:15\n    container_name: db\n    environment:\n      POSTGRES_USER: user\n      POSTGRES_PASSWORD: password\n      POSTGRES_DB: mydatabase\n    volumes:\n      - db_data:\/var\/lib\/postgresql\/data\n    ports:\n      - \"5432:5432\"\n\nvolumes:\n  db_data:\n<\/pre>\n\n\n\n
  \n
  次に、docker-compose.yaml が存在する場所でコマンドを?qū)g行します。\n<\/li>\n<\/ul>\n\n
  user@docker:~$ docker compose up -d\n[+] Running 4\/4\n ? Network node_default  Created                                                                                                                                                                            0.1s\n ? Container db          Started                                                                                                                                                                            0.7s\n ? Container backend     Started                                                                                                                                                                            0.7s\n ? Container frontend    Started  \n<\/pre>\n\n\n\n
  \n
  次に、curl でフロントエンドとバックエンドを確認(rèn)します。\n<\/li>\n<\/ul>\n\n
  user@docker:~$ curl http:\/\/localhost:3000\n\n\n\n  \n  \n