에이디건설 ①

도커에서 Typescript React(프론트엔드) 및 Django(백엔드)를 사용하여 웹 애플리케이션을 구축하는 방법을 공유하고 싶습니다. 전 세계의 코더와 물론 반년 후의 저 자신을 위해 말입니다.

맥OS 10.15.2
비주얼 스튜디오 코드 1.49.3

Terminal

~$ mkdir new-app
~$ cd new-app
~$ mkdir backend frontend
~$ touch docker-compose.yml
~$ cd backend
~$ touch Dockerfile requirements.txt
~$ cd ../frontend
~$ touch Dockerfile

~$ code new-app # open VSCode (and start editing files)

VSCode

docker-compose.yml

version: '3'
services:
 backend:
   container_name: new-app-backend
   build:
     context: ./backend
     dockerfile: Dockerfile
   command: sh -c "cd /backend/main && python3 manage.py runserver 0.0.0.0:8000"
   ports:
     - 8000:8000
   volumes:
     - ./backend:/backend
   depends_on:
     - db
     - frontend
   tty: true
 db:
   container_name: new-app-db
   image: mysql:5.7
   restart: always
   environment:
     MYSQL_DATABASE: new-app
     MYSQL_USER: root
     MYSQL_PASSWORD: password
     MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
   volumes:
     - ./mysql:/var/lib/mysql
   ports:
     - 3306:3306
 frontend:
    container_name: new-app-frontend
    build:
      context: ./frontend
      dockerfile: Dockerfile
    command: sh -c "cd /frontend/main && yarn (start)"
    ports:
     - "3000:3000"
    volumes:
     - ./frontend:/frontend
    tty: true

백엔드 > 도커파일

FROM python:3.9
ENV PYTHONUNBUFFERED 1
RUN mkdir /backend
WORKDIR /backend
ADD ./requirements.txt .
RUN pip3 install -r requirements.txt
EXPOSE 8000

프론트엔드 > 도커파일

FROM node:13.13.0
RUN mkdir /frontend
WORKDIR /frontend
EXPOSE 3000

백엔드 > 요구사항.txt

Django>=3.0.5
mysqlclient==1.4.6
django-filter==2.2.0
Pillow==7.1.1
djangorestframework==3.11.0
django-cors-headers==3.2.1

Terminal

건물 이미지

~/new-app$ docker-compose build

Django 및 React 애플리케이션 만들기

장고

~/new-app$ cd backend
~/new-app/backend$ django-admin startproject main　

반응

~/new-app$ cd ../frontend
~/new-app/frontend$ npx create-react-app main --template typescript 

VSCode

데이터베이스 설정 편집

백엔드 > 메인 > settings.py

# ALLOWED_HOSTS = []
ALLOWED_HOSTS = ['localhost']

DATABASES = {
    #'default': {
    #    'ENGINE': 'django.db.backends.sqlite3',
    #    'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    #}
   'default': {
   'ENGINE': 'django.db.backends.mysql',
   'NAME': 'new-app',
   'USER': 'root',
   'HOST': 'new-app-db',
   'POST': 3306,
   'OPTIONS': {
                'charset': 'utf8mb4',
              },
   }
}

국제화(선택 사항, 도쿄에 있는 경우)

# https://docs.djangoproject.com/en/3.0/topics/i18n/

LANGUAGE_CODE = 'ja'  

TIME_ZONE = 'Asia/Tokyo'

Terminal

~/new-app$ docker-compose up