使用Docker+Django+Next+TypeScript+ECS开发Web应用的故事（1）～准备篇～

2 年 ago
科, 颖
3 minutes

首先

我为了我的求职活动，使用了Docker，Django（graphene-django），Next.js，TypeScript和ECS来创建了一个作品集。但是由于在学习和实现各项技术时都是一人独自摸索，遇到了一些困难，所以我把部分功能（仅用户认证）的制作过程记录下来作为自己的备忘。由于篇幅较长，我计划分章节写。

使用Docker、Django、Next、TypeScript和ECS创建应用的故事（2）～从Django的初始配置到创建模型～。

トレサポのメインページ

选择使用各自的技术原因

    • Docker: ローカル開発環境の統一のため

 

    • Django(graphene-django): バックエンドとして、単一のエンドポイントでクエリを実行して、データを絞って取得できるため

 

    • Next.js: フロントエンドとして、ライブラリが豊富であり、簡単におしゃれなUI構築ができ、 SSG方式を取ることで、SEO対策になるため

 

    • TypeScript: コンパイル時点でエラーが分かるため

 

    ECS: Dockerのプロジェクトをそのままデプロイできるため

开发环境 fā

    • macOS Big Sur 11.2.1 (M1)

 

    • frontend

node 16.3.0
next 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
Django 3.1.2
graphene-django 2.13.0

Postgres 10

在项目根目录下创建文件和文件夹。

文件夹结构如下所示。

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にてコマンドを上書きしています。
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のイメージを取得するのにアーキテクチャを指定しています。
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のコンテナを起動するように作成しています。
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

 

    djangoにインストールするパッケージを記載しています。
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
.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

创建一个Django项目。

用以下命令创建Django项目：

$ make django

使用以下命令将应用程序添加到Django中。

$ make app

4. 确认行动

我将暂停所有容器，并尝试启动容器。

$ docker-compose stop
$ docker-compose up
next.jsのトップ画面
スクリーンショット 2021-07-09 20.33.09.png

总结

我在Dodker上建立了环境并创建了Next.js和Django项目，并进行了启动确认。下次我将写有关Django项目的初步设置和模型创建的部分。

本文介绍了使用Docker+Django+Next+TypeScript+ECS创建应用程序的经历，从Django的初始配置到创建模型。

请参照以下内容，以汉语母语完成翻译，只需要一种选择：

 

✖
广告
将在 10 秒后关闭
bannerAds