検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Docker ハンズオン: Nodejs、Flask、PostgreSQL を使用して Docker Compose ファイルを学習する

Docker ハンズオン: Nodejs、Flask、PostgreSQL を使用して Docker Compose ファイルを学習する

Linda Hamilton
Linda Hamiltonオリジナル
2025-01-14 18:28:14640ブラウズ

Docker Hands-on: Learn Docker Compose File with Nodejs, Flask, PostgreSQL

前の投稿では、Docker チュートリアルについて説明しました。

  • https://dev.to/omerberatsezer/docker-tutorial-dockerfile-commands-container-images-volume-network-docker-compose-2p9h

今回は、サンプル プロジェクトの実行を開始します: Nodejs、Flask、PostgreSQL イメージを含む Docker Compose ファイルに焦点を当てて、さまざまな層を実装します:

  • フロントエンド (expressjs を使用した nodejs)、
  • バックエンド (フラスコ)、
  • データベース (postgresql).

次のように表示されます:

  • 複数のコンテナを実行する方法
  • depends_on を使用してコンテナを順次実行する方法
  • 同じネットワーク内でコンテナを実行する方法
  • 構成ファイルにボリュームを作成する方法
  • ポート転送の実装方法

GitHub コード リポジトリ: https://github.com/omerbsezer/Fast-Docker/tree/main/hands-on-sample-projects/full-stack-app

プロジェクト構造:

project-root/
├── docker-compose.yaml
├── frontend/
│   ├── package.json
│   ├── index.js
│   ├── index.html
│   ├── Dockerfile
├── backend/
│   ├── app.py
│   ├── requirements.txt
│   ├── Dockerfile
  • フロントエンド ディレクトリを作成し、Dockerfile を作成します。 
FROM node:18
WORKDIR /home/app
COPY . .
EXPOSE 3000
RUN npm install
CMD ["npm", "start"]
  • index.html を作成します: 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frontend</title>
</head>
<body>
  <h1>Frontend is working!</h1>
</body>
</html>
  • index.js (express js) を作成します。 
const express = require("express");
const app = express();
const port=3000;

app.get("/", (req, res) => {
res.sendFile(__dirname + "/index.html");
})

app.listen(port, () => {
  console.log(`running at port ${port}`);
});
  • package.json を作成します。 
{
  "name": "nodejsapp",
  "version": "1.0.0",
  "description": "nodejsapp description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.3"
  }
}
  • 次に、バックエンド ディレクトリを作成し、Dockerfile を作成します。 
FROM python:3.11
WORKDIR /usr/src/app
COPY . .
RUN pip install -r requirements.txt
EXPOSE 5000
CMD ["python", "app.py"]
  • フラスコを使用してバックエンド アプリを作成します: 
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/')
def home():
    return "Backend is working!"

@app.route('/api', methods=['GET'])
def api():
    return jsonify({"message": "Hello from the backend!"})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)
  • requirements.txt を作成します: 
flask
  • 最後に、バックエンド ディレクトリとフロントエンド ディレクトリの上に docker-compose.yaml を作成します。 
services:
  frontend:
    build:
      context: ./frontend
    container_name: frontend
    ports:
      - "3000:3000"
    volumes:
      - ./frontend:/usr/src/app
    depends_on:
      - backend

  backend:
    build:
      context: ./backend
    container_name: backend
    ports:
      - "5000:5000"
    volumes:
      - ./backend:/usr/src/app
    command: sh -c "pip install -r requirements.txt && python app.py"

  db:
    image: postgres:15
    container_name: db
    environment:
      POSTGRES_USER: user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: mydatabase
    volumes:
      - db_data:/var/lib/postgresql/data
    ports:
      - "5432:5432"

volumes:
  db_data:
  • 次に、docker-compose.yaml が存在する場所でコマンドを実行します。 
user@docker:~$ docker compose up -d
[+] Running 4/4
 ✔ Network node_default  Created                                                                                                                                                                            0.1s
 ✔ Container db          Started                                                                                                                                                                            0.7s
 ✔ Container backend     Started                                                                                                                                                                            0.7s
 ✔ Container frontend    Started
  • 次に、curl でフロントエンドとバックエンドを確認します。 
user@docker:~$ curl http://localhost:3000
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frontend</title>
</head>
<body>
  <h1>Frontend is working!</h1>
</body>

user@docker:~$ curl http://localhost:5000/api
{"message":"Hello from the backend!"}

user@docker:~$ curl http://localhost:5000
Backend is working!
</html>
  • 最後に、コンテナを停止します。 
user@docker:~$ docker ps -a
CONTAINER ID   IMAGE           COMMAND                  CREATED              STATUS              PORTS                                       NAMES
3e51751b546c   node-frontend   "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp   frontend
d8d28325ce10   postgres:15     "docker-entrypoint.s…"   About a minute ago   Up About a minute   0.0.0.0:5432->5432/tcp, :::5432->5432/tcp   db
04c1d04a5668   node-backend    "sh -c 'pip install …"   About a minute ago   Up About a minute   0.0.0.0:5000->5000/tcp, :::5000->5000/tcp   backend
user@docker:~$ docker compose down
[+] Running 4/4
 ✔ Container frontend    Removed                                                                                                                                                                            1.0s
 ✔ Container db          Removed                                                                                                                                                                            0.5s
 ✔ Container backend     Removed                                                                                                                                                                           10.5s
 ✔ Network node_default  Removed                                                                                                                                                                            0.2s
user@docker:~$ docker ps -a
CONTAINER ID   IMAGE     COMMAND   CREATED   STATUS    PORTS     NAMES

結論

この投稿では、サンプルのフロントエンド (express.js)、バックエンド (flask)、データベース (postgresql) アプリを使用して Docker 構成ファイルを作成する方法を示します。まだご覧になっていない場合は、下のメニューで他の Docker コンテンツをご覧ください。

AWS、Kubernetes、Docker、Linux、DevOps、Ansible、機械学習、生成 AI、SAAS のヒント、チュートリアル、ハンズオン ラボについてはフォローしてください。

  • https://github.com/omerbsezer/
  • https://www.linkedin.com/in/omerberatsezer/

以上がDocker ハンズオン: Nodejs、Flask、PostgreSQL を使用して Docker Compose ファイルを学習するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

flask json html express if for cURL Directory using finally JS this github docker database postgresql devops kubernetes https linux ansible Other
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：TCOとは何ですか次の記事：TCOとは何ですか

関連記事

続きを見る