소개

내 자신의 취업으로 Docker, Django(graphene-django), Next.js, TypeScript, ECS를 사용하여 포트폴리오를 만들었습니다.
각각의 기술에 관해서, 독학으로 구현하는데 고전했기 때문에, 자신의 기록용으로서, 기능의 일부(유저 인증만)의 제작 과정을 썼습니다.
길어지기 때문에 여러 번 나누어 써 가려고 생각합니다.
다음 기사 : Docker + Django + Next + TypeScript + ECS로 앱을 만든 이야기 (2) ~ Django의 초기 설정에서 Model 작성편 ~
실제로 만든 웹 앱의 URL입니다.
Tresapo : ht tp // 료 t 라이 마늘 g 마나게 멘 t. 코m/

각각의 기술을 채용한 이유

Docker: 로컬 개발 환경의 통일을 위해

Django (graphene-django) : 백엔드로서 단일 엔드 포인트에서 쿼리를 실행하여 데이터를 좁히고 검색 할 수 있기 때문에

Next.js : 프런트 엔드로서 라이브러리가 풍부하고 쉽게 세련된 UI 구축을 할 수 있고 SSG 방식을 취함으로써 SEO 대책이되기 때문에

TypeScript : 컴파일 시점에서 오류를 알기 때문에

ECS : Docker 프로젝트를 그대로 배포 할 수 있기 때문에

개발 환경

macOS Big Sur 11.2.1 (M1)

frontend

node 16.3.0

다음 11.0.1

typescript 4.3.4

recoil 0.3.1

formik 2.2.9

jest 26.6.3

apollo-client

backend

Python 3.7.10

장고 3.1.2

graphene-django 2.13.0

Postgres 10

1. 프로젝트 바로 아래에 파일, 폴더 만들기

폴더 구성은 다음과 같습니다.

myProject/
    app/
    frontend/
    Dockerfile
    Dockerfile-node
    docker-compose.yml
    requirements.txt
    Makefile

Dockerfile
백엔드용 Dockerfile. ECS에 배포하는 편의상, dockerhub에서 python의 이미지를 pull 할 때 M1의 Mac이라면 amd64가 아닌 아키텍처를 기본적으로 취득하기 때문에 아키텍처를 지정하고 있습니다.
CMD에 관해서는, 프로덕션용에 기재하고 있어, django의 settings를 프로덕션용과 개발 환경용으로 나누고 있다. 개발 환경에서는 docker-compose에서 명령을 덮어 씁니다.

Dockerfile

FROM python@sha256:73c7d5d218ff9e2d76f41edcc1bd4f71961f7551ea7b2e39ab8b4793cede21b4

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

COPY ./requirements.txt /requirements.txt
RUN apk add --update --no-cache postgresql-client jpeg-dev
RUN apk add --update --no-cache --virtual .tmp-build-deps \
    gcc libc-dev linux-headers postgresql-dev musl-dev zlib zlib-dev
RUN pip install -r /requirements.txt
RUN apk del .tmp-build-deps

RUN mkdir /app
WORKDIR /app
COPY ./app /app

RUN mkdir -p /vol/web/media
RUN mkdir -p /vol/web/static
RUN adduser -D user
RUN chown -R user:user /vol/
RUN chmod -R 755 /vol/web
USER user

CMD sh -c "python manage.py migrate --settings app.prod_settings && python manage.py runserver 0.0.0.0:8000 --settings app.prod_settings"

Dockerfile-nodejs
프런트 엔드용 Dockerfile. 여기도 마찬가지로 node.js의 이미지를 얻기 위해 아키텍처를 지정합니다.

Dockerfile-nodejs

FROM node@sha256:f5079a4f93c8e4fd07ffa93fc95f6484d7f4f40abd126c11810cb282483ab599
MAINTAINER kanagawa App Developer Ltd

RUN npm config set unsafe-perm true
RUN npm install -g npm
RUN npm install -g create-next-app
RUN mkdir /frontend

WORKDIR /frontend
COPY ./frontend /frontend

CMD sh -c "npm run start"

docker-compose.yml
프런트 엔드, 백엔드 및 DB 컨테이너를 시작하도록 만들고 있습니다.

docker-compose.yml

version: "3"

services:
  app:
    build:
      context: .
    ports:
      - "8000:8000"
    volumes:
      - ./app:/app
    command: sh -c "python manage.py migrate &&
      python manage.py runserver 0.0.0.0:8000"
    environment:
      - FRONT_URI=http://localhost:3000
      - ALLOWED_HOST=localhost
      - DB_HOST=db
      - DB_NAME=app
      - DB_USER=postgres
      - DB_PASS=supersecretpassword
    depends_on:
      - db

  db:
    image: postgres:10-alpine
    environment:
      - POSTGRES_DB=app
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=supersecretpassword
      - POSTGRES_HOST_AUTH_METHOD=trust

  next:
    build:
      context: .
      dockerfile: "./Dockerfile-nodejs"
    volumes:
      - ./frontend:/frontend
    command: sh -c "npm run dev"
    ports:
      - "3000:3000"

requirements.txt
장고에 설치할 패키지를 나열합니다.

requirements.txt

Django==3.1.2
graphene-django==2.13.0
django-filter==2.4.0
django-graphql-jwt==0.3.1
PyJWT==1.7.1
django-cors-headers==3.5.0
psycopg2
factory-boy
pytz
django-environ
gunicorn==20.0.4

Makefile

Makefile

.PHONY:
	app test migrate pro admin django react 

app:
	docker-compose run --rm app sh -c "python manage.py startapp api"

migrate:
	docker-compose run --rm app sh -c "python manage.py makemigrations --settings app.dev_settings"
	docker-compose run --rm app sh -c "python manage.py migrate --settings app.dev_settings"

admin:
	docker-compose run --rm app sh -c "python manage.py createsuperuser --settings app.dev_settings"

django:
	docker-compose run --rm app sh -c "django-admin startproject app ."

next:
	docker-compose run --rm next sh -c "npx create-next-app . --ts"

django-test:
	docker-compose run --rm app sh -c "python manage.py test --settings app.dev_settings"

다음 명령으로 프런트 엔드 및 백엔드 이미지 만들기

$ docker-compose build

2.Next.js 프로젝트 만들기

다음 명령으로 next.js 프로젝트 만들기

$ make next

3. 장고 프로젝트 만들기

다음 명령으로 장고 프로젝트 만들기

$ make django

다음 명령으로 장고에 애플리케이션 추가

$ make app

4. 동작 확인

한 번 컨테이너를 모두 멈추고 컨테이너를 시작해 보겠습니다.

$ docker-compose stop
$ docker-compose up

localhost : 3000에 액세스하면 다음 화면이 표시됩니다.

localhost:8000에 액세스하면 다음 화면이 표시됩니다.

요약

이번은 Dodker에서의 환경 구축과 Next.js, Django의 프로젝트를 작성해, 기동 확인하는 곳까지 썼습니다.
다음은 Django 프로젝트의 초기 설정에서 Model 작성까지의 장소를 쓰고 싶습니다.
다음 기사 : [Docker + Django + Next + TypeScript + ECS로 앱을 만든 이야기 (2) ~ Django의 초기 설정에서 Model 작성편 ~]
( htps : // 이 m/rys0707/이고 ms/512d4bcf04에 6b2d7f972 )

참고