Django で GraphQL 実装してみた 環境構築編

## Django で GraphQL 環境構築（Docker）
- 環境構築編 ← この記事  
- [Query編](https://qiita.com/dbxkazuxdb/items/b1bdc9eac9856deb493c)
- [Mutation編](https://qiita.com/dbxkazuxdb/items/0d8e79cdba10349b47ec)
- [リファクタ編]()

### 環境

macOS Sonoma 14.5  
docker 26.1.3

python 3.11  
Django 4.2.9  
graphene-django 3.2.2

#### ディレクトリ

<pre>
project
├── apps
│   └── backend
│       ├── app     # django app
│       ├── config  # django project
│       └── manage.py
├── compose.yaml
└── docker
    ├── backend
    │   ├── nginx
    │   │   ├── nginx.def.conf
    │   └── python
    │       ├── Dockerfile
    │       └── requirements.txt
    └── mysql
        ├── Dockerfile
        └── my.cnf
</pre>

## 環境構築

compose.yaml

```compose.yaml
volumes:
  gunicorn:
    driver: local

services:
  app-back:
    env_file: .env.dev
    build: ./docker/backend/python/
    volumes:
      - ./apps/backend:/app
      - gunicorn:/var/run/gunicorn
    environment:
      - chokidar_usepolling=true
      - django_settings_module=config.local_settings
    depends_on:
      - db

  web-back:
    image: nginx:1.25.3
    ports:
      - "80:80"
    volumes:
      - ./docker/backend/nginx/nginx.def.conf:/etc/nginx/conf.d/default.conf
      - ./apps/frontend/dist:/var/www/html
      - gunicorn:/var/run/gunicorn
    depends_on:
      - app-back

  db:
    build: ./docker/mysql/
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    ports:
      - "3306:3306"
    environment:
      MYSQL_DATABASE: ${MYSQL_DATABASE:-django}
      MYSQL_USER: ${MYSQL_USER:-admin}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD:-password}
      MYSQL_ROOT_PASSWORD: ${MYSQL_PASSWORD:-password}
      tz: "asia/tokyo"
```

docker/backend/python/Dockerfile

```Dockerfile
FROM python:3.11

WORKDIR /app

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1

COPY requirements.txt /app/requirements.txt
RUN pip install --upgrade pip && pip install -r requirements.txt

RUN apt-get update && \
  apt-get install -y --no-install-recommends \
  libreoffice \
  fonts-ipafont-gothic && \
  apt-get clean && \
  rm -rf /var/lib/apt/lists/*


RUN mkdir -p /var/run/gunicorn

CMD ["gunicorn", "config.wsgi", "--bind=unix:/var/run/gunicorn/gunicorn.sock", "--reload"]
```

docker/backend/python/requirements.txt

```txt
Django==4.2.9
django-cors-headers==4.3.1
django-filter==24.2
graphene-django==3.2.2
gunicorn==21.2.0
mysqlclient==2.1.1
python-dotenv==1.0.0
whitenoise==6.6.0
python-decouple==3.8
dj-database-url==2.1.0
django-environ==0.11.2
black==24.2.0
flake8==7.0.0
openpyxl==3.1.2
pillow==10.3.0
```

docker/backend/nginx/nginx.def.conf

```nginx.conf
upstream gunicorn-django {
    server unix:///var/run/gunicorn/gunicorn.sock;
}

server {
    listen 80;
    server_name localhost;

    location / {
        try_files $uri @gunicorn;
    }

    location @gunicorn {
        proxy_pass http://gunicorn-django;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

}
```

docker/backend/mysql/Dockerfile

```Dockerfile
FROM mysql:8.0

RUN echo "USE mysql;" > /docker-entrypoint-initdb.d/timezones.sql &&  mysql_tzinfo_to_sql /usr/share/zoneinfo >> /docker-entrypoint-initdb.d/timezones.sql

COPY ./my.cnf /var/lib/my.cnf
```

docker/backend/mysql/my.conf

```c
# MySQLサーバーへの設定
[mysqld]
# 文字コード/照合順序の設定
character_set_server=utf8mb4
collation_server=utf8mb4_bin

# タイムゾーンの設定
default_time_zone=SYSTEM
log_timestamps=SYSTEM

# デフォルト認証プラグインの設定
default_authentication_plugin=mysql_native_password

# mysqlオプションの設定
[mysql]
# 文字コードの設定
default_character_set=utf8mb4

# mysqlクライアントツールの設定
[client]
# 文字コードの設定
default_character_set=utf8mb4
```

## Django 立ち上げ

Django の project, app 作成

```bash
mkdir -p apps
docker compose build
docker compose run --rm app-back sh -c "django-admin startproject config ."
docker compose run --rm app-back sh -c "python manage.py startapp app"
```

コンテナを立てる

```bash
docker compose up -d
docker compose exec app-back python manage.py migrate
```

次は、[Query編](https://qiita.com/dbxkazuxdb/items/b1bdc9eac9856deb493c)