这篇文章是AP Communications 2021年圣诞日历的第16天文章。

起初

在创建一个使用React作为前端和Django作为后端的应用程序时，由于环境设置非常麻烦，所以现在才使用Docker化，可能有点晚。
特别是对于React来说，如果要从头开始安装，引入node.js会很麻烦，所以现在要简单得多。

步骤

环境

Docker 版本为 20.10.8，docker-compose 版本为 1.29.2。

以下本地用中文改寫這句話：

Django建造

首先创建一个Dockerfile。

FROM python:3.8.2
ENV PYTHONBUFFERED 1
WORKDIR /app
COPY requirements.txt /app/requirements.txt
RUN pip install -r requirements.txt
COPY . /app

CMD python manage.py runserver 0.0.0.0:8000

然后创建 requirements.txt 文件，并在其中安装所需的中间件（例如 Django）。

Django==3.1.3
djangorestframework==3.12.2
mysqlclient==2.0.1
django-mysql==3.9
django-cors-headers==3.5.0

接下来创建docker-compose.yml。

version: '3.8'
services:
  backend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 8000:8000
    volumes:
      - .:/app
    depends_on: 
      - db

  db:
    image: mysql:5.7.22
    restart: always
    environment: 
      MYSQL_DATABASE: main
      MYSQL_USER: root
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
    volumes: 
      - .dbdate:/var/lib/mysql
    ports: 
      - 3306:3306

在启动容器之前，执行以下命令来创建django项目。

docker-compose run backend django-admin.py startproject django_react .

在setting.py文件中对DATABASE进行设置。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'main',
        'USER': 'root',
        'PASSWORD': 'password',
        'HOST': 'db',
        'PORT': '3306',
    }
}

既然准备好了，就尝试启动吧。

root@python:~/django_react# docker-compose up
## エラーなく起動できればOK

我试着访问并确认一下。

React构建。

接下来，让我们尝试使用Docker来构建React。
首先，在相同的目录下创建一个名为Dockerfile_react的Docker文件。

FROM node:16-alpine
WORKDIR /usr/src/app

接下来创建docker-compose.yml文件，在先前的文件上做添加。

version: '3.8'
services:
  backend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - 8000:8000
    volumes:
      - .:/app
    depends_on: 
      - db

  db:
    image: mysql:5.7.22
    restart: always
    environment: 
      MYSQL_DATABASE: main
      MYSQL_USER: root
      MYSQL_PASSWORD: password
      MYSQL_ROOT_PASSWORD: password
    volumes: 
      - .dbdate:/var/lib/mysql
    ports: 
      - 3306:3306

  front:
    build:
      context: .
      dockerfile: Dockerfile_react
    restart: always
    volumes:
      - ./node:/usr/src/app:cached
    command: sh -c "cd django_front && yarn start"
    ports:
      - "3000:3000"

我已經準備好了，現在我要啟動容器之前先創建React應用程式。

docker-compose run --rm front sh -c "npm install -g create-react-app && create-react-app django_front"
～～～～～
Happy hacking!

我认为现在已经创建了React应用文件夹。
现在我们来启动它。

root@python:~/django_react# docker-compose up -d front
Creating django_react_front_1 ... done
root@python:~/django_react# docker-compose ps
         Name                       Command               State                    Ports                  
----------------------------------------------------------------------------------------------------------
django_react_backend_1   /bin/sh -c python manage.p ...   Up      0.0.0.0:8000->8000/tcp,:::8000->8000/tcp
django_react_db_1        docker-entrypoint.sh mysqld      Up      0.0.0.0:3306->3306/tcp,:::3306->3306/tcp
django_react_front_1     docker-entrypoint.sh sh -c ...   Up      0.0.0.0:3000->3000/tcp,:::3000->3000/tcp

总结

我能用这种方法实现我想做的事情。
这次在Django的安装中也添加了restframework，所以可以直接开发API并连接Django-React。
关于使用这个来进行应用开发，以后再说。