使用 Docker 和 WSL2 为 React&Django&MySQL 创建开发环境

目的

# docker-compose up -d --build

我讨厌建筑环境
我想用这个来完成一切

这将是这些人的程序手册。

用什么

码头工人

容器型虚拟化软件。
它是一种可以隔离（容器化）数据和程序（Apache、MySQL、软件等）的机制。
版本：v20.10.17

码头工人撰写

用于定义和运行多个容器的 Docker 应用程序的工具。
您可以一次运行/停止/销毁所有容器。
版本：v2.6.1

码头工人桌面

它是一个方便的工具，可让您构建 Docker 容器等开发环境。
版本：v4.10.1

WSL2

您将能够从 Windows 操作 Linux 内核。
Docker 在 Linux 上运行，因此拥有它非常方便。
您将能够从 Windows 编辑器 vsCode 访问（编辑）Linux 上的文件。

它还提供比在传统 Hyper-V 上运行 Docker 更好的性能。
版本（Ubuntu）：20.04 LTS

VS 代码

他是一位才华横溢的编辑。

建造什么

搭建环境如下。
在 WSL2 上运行 Docker 并构建一个容器。使用 VS Code 使该容器可访问。

DockerとWSL2を使ってReact&Django&MySQLの開発環境を作る

文件夹结构

这次要构建的文件夹结构是这样的。

DockerとWSL2を使ってReact&Django&MySQLの開発環境を作る

1	2
项目	项目根文件夹
背部	后端（Django）文件存储
代码	容器工作目录
Dockerfile	Docker 定义文件
.devcontainer.json	容器连接的 VS Code 配置文件
要求.txt	Python包管理文件
正面	前端（React）文件存储
Docker-compose.yml	Docker Compose 定义文件

文件创建

现在让我们创建一个 Dockerfile。

姜戈

首先，让我们创建后端。

Dockerfile
我将省略对 Docker 命令的解释，但注释描述了每个语句的作用。

Dockerfile

# ベースとなるDokcerイメージを指定する
FROM python:3

# コンソールのstdout（標準出力）と
# stderr（標準エラー出力）のバッファーを無効にする
ENV PYTHONUNBUFFERED 1

# ワークディレクトリを指定する。
WORKDIR /code

# ホストマシンにあるrequirements.txtをImage側のマシンへコピーする
COPY ./requirements.txt .

# pipコマンドを最新にし、
# requirements.txtファイル内のパッケージをインストールする
RUN pip install --upgrade pip && pip install -r ./requirements.txt

requirements.txt
这一次，我们将安装一个客户端来操作 Django 和 MySQL。
另一方面，我也将黑色用于代码格式化。

要求.txt

django==3.2
mysqlclient
black

.devcontainer.json
这里我们描述与 VS Code 连接的容器相关的设置。
也可以为 VS Code 本身预定义扩展和设置。

.devcontainer.json

{
  // コンテナに関する設定
  "name": "handson-back",
  "dockerComposeFile": [
    "../docker-compose.yml"
  ],
  "service": "handson-back",
  "shutdownAction": "none",
  "workspaceFolder": "/code",
  // コンテナにつなげるVS Codeの拡張機能設定
  "extensions": [
    "ms-python.python",
    "CoenraadS.bracket-pair-colorizer-2"
  ],
  // コンテナにつなげるVS Codeの設定
  "settings": {
    "python.formatting.provider": "black",
    "editor.defaultFormatter": null,
    "editor.formatOnSave": true
  }
}

反应

接下来我们将创建前端。

Dockerfile
只有这个

Dockerfile

FROM node:17-alpine

WORKDIR /code

.devcontainer.json
这里我们描述与 VS Code 连接的容器相关的设置。
也可以为 VS Code 本身预定义扩展和设置。

.devcontainer.json

{
  // コンテナに関する設定
  "name": "handson-front",
  "dockerComposeFile": [
    "../docker-compose.yml"
  ],
  "service": "handson-front",
  "shutdownAction": "none",
  "workspaceFolder": "/code",

  // コンテナにつなげるVS Codeの拡張機能設定
  "extensions": [
    "dsznajder.es7-react-js-snippets",
    "esbenp.prettier-vscode",
    "CoenraadS.bracket-pair-colorizer-2"
  ],

  // コンテナにつなげるVS Codeの設定
  "settings": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "prettier.singleQuote": false,
    "prettier.jsxSingleQuote": false
  }
}

码头工人撰写

最后创建一个 docker-compose.yml 文件。
我将省略如何编写 yml 文件，但我正在做的事情在评论中有所描述。

码头工人-compose.yml

# Composeファイル形式
version: '3'

# Dockerの中にボリュームというデータを保持する領域を確保
volumes:
  handson-db-data:

services:
  # データベース（mysql）
  handson-db:
    image: mysql:8.0.23
    container_name: my-db
    # mysqlコンテナがデータを保管する場所とコンテナが保持する領域を紐づける
    volumes:
      - 'handson-db-data:/var/lib/mysql'
    ports:
      - '3308:3306'
    environment:
      # rootユーザーのパス（必須）
      - 'MYSQL_ROOT_PASSWORD=root'
      # 初期作成されるDB名（任意）
      - 'MYSQL_DATABASE=my-db'
      # 作成されるユーザー名（任意）
      - 'MYSQL_USER=my-user'
      # ユーザーのパス（任意）
      - 'MYSQL_PASSWORD=my-user'
      - 'TZ=Asia/Tokyo'

  # バックエンド（django）
  handson-back:
    container_name: my-back
    # docker build で指定するDockerfileの場所
    build: ./back
    # ポートの指定
    ports:
      - '8000:8000'
    # ファイルシステムのマウント設定
    volumes:
      - './back/code:/code'
    # バッシュを開くためのコマンド
    tty: true
    stdin_open: true

    depends_on:
      - handson-db

  # フロントエンド（React）
  handson-front:
    container_name: my-front
    # docker build で指定するDockerfileの場所
    build: ./front
    # ポートの指定
    ports:
      - '3000:3000'
    # ファイルシステムのマウント設定
    volumes:
      - './front/code:/code'
    # バッシュを開くためのコマンド
    tty: true
    stdin_open: true