我创建了一个Django+React+PostgreSQL环境的Docker实例，这是我的备忘录

3 年 ago
文, 翔
2 minutes

導言

    Windows11+WSL2環境での記事となります。

以下是本次构建的原因。

    • 自分でDockerfileやdocker-compose.ymlを作ったことがなかったのでDockerへの理解を深めるため

 

    Django+Reactのモダンな環境を触ってみたかった

由于我只是简单地阅读了下面的文章，所以对Docker的理解仅限于此，可能会有改进之处。

 

目录结构

请按照以下方式进行配置，这是将要创建文件的目录。

root/
├── backend/
│   └── dockerfile(django用)
└── frontend/
│   └── dockerfile(react用)
└── docker-compose.yml

创建Dockerfile（Django）

Dockerfile是一个用于根据DockerHub上已存在的映像文件创建个人喜欢的环境的配置文件。

这次我们正在使用DockerHub上的Python镜像来安装Django和psycopg2-binary（用于从Python连接到PostgreSQL的库）。

Django的Image仍然可用，但自2016年12月31日起，已被停止更新，建议不再使用。
FROM python:3.8
RUN pip install --upgrade pip && pip install Django==4.2.2 psycopg2-binary

WORKDIR /usr/backend

CMD ["bash"]

每个命令的说明如下所示。

コマンド意味FROM python:3.8元となるイメージをPython 3.8と設定RUN pip install –upgrade pippip(pythonのパッケージ管理システム)をアップデート~ pip install Django==4.2.2Djangoをインストール~ psycopg2-binarypsycopg2をインストールWORKDIR /usr/backendワークディレクトリを設定CMD [“bash”]コンテナ実行時のデフォルト命令をbashにする

创建 Dockerfile（React）

FROM node:16.20.0-alpine3.18
WORKDIR /usr/frontend
RUN npm install -g create-react-app@5.0.1
CMD ["sh"]
コマンド意味FROM node:16.20.0-alpine3.18元となるイメージを設定(node)WORKDIR /usr/frontendワークディレクトリを設定RUN npm install -g create-react-app@5.0.1reactのアプリを作成するパッケージをインストールCMD [“sh”]コンテナ実行時のデフォルト命令をshにする

创建docker-compose.yml文件

version: '3.8'

services:
  backend:
    build: ./backend
    command: python /usr/backend/manage.py runserver 0.0.0.0:8000
    volumes:
      - ./backend:/usr/backend
    ports:
      - 8000:8000
    depends_on:
      - db
  db:
    image: postgres
    ports:
      - 5432:5432
    environment:
      - POSTGRES_DB=dbname
      - POSTGRES_USER=root
      - POSTGRES_PASSWORD=password
    volumes:
      - postgres_data:/var/lib/postgresql/data/
  frontend:
    build: ./frontend
    working_dir: /usr/frontend/appname
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
      - ./frontend:/usr/frontend
    ports:
      - "3000:3000"

volumes:
  postgres_data:

在 docker-compose.yml 中进行容器启动时的配置（类似于使用命令执行时的选项）。
由于内容较长，省略了各项的具体内容，但指定了应用程序的端口、与主机的文件同步目录等。

请根据在执行React项目创建时指定的项目名称来调整下面的appname部分。

working_dir: /usr/frontend/appname

准备Docker镜像。

在docker-compose中设置了启动服务器的命令，但由于尚未创建项目，我们将先分别在每个镜像中启动容器以先创建React和Django项目。

在包含docker-compose.yml文件的目录中执行以下命令。

docker-compose build

处理完成后

docker image ls
3455b5a9f57fda090730d37ac639fb41.png

创建Django项目

启动后端图像。

docker container run -it --rm [backendのIMAGE ID] bash

请确认你正在 [/usr/backend] 目录中，并输入以下命令（appname 部分请根据需要进行设置）。

django-admin startproject appname .
1.png
docker ps
2.png
docker cp [コンテナID]:usr/backend [root]

当复制操作完成后，请关闭执行docker container run命令的控制台。

如果出现类似下面的错误，请以管理员权限运行控制台并执行cp命令。
符号链接..\目录\ 要求的权限不由客户端持有。

使用React创建项目

请注意，末尾的命令是使用sh而不是bash，与后端一样，单独启动容器。

docker run -it --rm [frontendのimage id] sh

请确认您当前位于 usr/frontend 目录下，然后执行以下指令

npx create-react-app appname --template typescript

当执行完成后，请打开新的控制台，并执行以下命令以将文件复制到主机 PC 上。
※容器ID是当前正在运行的前端容器的ID，root是项目的根目录（指docker-compose.yml所在的目录）。

docker cp [コンテナID]:usr/frontend [root]

请在完成复制后，关闭控制台，或使用[exit]命令退出容器。（由于设置了–rm选项，容器将终止。）

执行docker-compose up

在项目的根目录（即包含docker-compose.yml文件的目录）上执行以下命令。

docker-compose up -d
9759b7cd56ea2c5aa8ae47ea5add9ec3.png

作者简介

由于之前只能通过Laravel-sail或者其他人给的Dockerfile来使用Docker环境，所以这真的是一次很好的学习机会。
其实我本来想在Dockerfile上生成项目，但是发现在docker-compose up时，主机PC上的目录结构会优先同步，所以无法顺利进行。这让我有些遗憾。
如果有兴趣的话，我也可以写一下React和Django的协作方法。

bannerAds