【Django + VSCode + Docker + Git・GitHub】コピペでできるリモート開発環境の構築

# はじめに
本記事では、Djangoのリモート開発環境の構築方法とGit・GitHubを用いたバージョン管理について説明します。予備知識がない方でも作業が進められるように作成していますので、とりあえずリモート開発環境を構築してみたいという人は参考にしていただけると幸いです。


# 目次

1. [前準備](#前準備)
2. [Dockerファイルの作成](#dockerファイルの作成)
2. [リモート開発環境への接続とアプリケーションの実行](#リモート開発環境への接続とアプリケーションの実行)
3. [参考文献](#参考文献)



# 前準備
### Docker Desktopのダウンロード

以下のリンク先
からDockerDesktopをダウンロードして、アカウントを作成してください

https://docs.docker.com/desktop/install/windows-install/

こんな感じで画面が表示されれば作業完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/5d29e417-a325-4ef1-358d-f6f0c0fbab0f.png)


### Gitのダウンロード
以下のリンク先からGitをダウンロードしてください

https://git-scm.com/download/win

画像の通りGit Bashが使えるようになっていれば作業完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/0b41db4c-e65e-5235-80dc-dc6e92ac5c20.png)

### GitHubのアカウント作成
以下のリンク先でアカウントを作成してください

https://github.co.jp/

### VSCodeのインストール
以下のリンク先でVSCodeをインストールしてください

https://code.visualstudio.com/download



### リポジトリの作成
GitHubで以下の通りリポジトリを作成します(リポジトリを作成できれば問題ないので、以下の設定はご自身の状況に合わせて自由に行ってください)
- プロジェクト名：DjangoProject
- 公開範囲：Private
- .gitignore：python

Code→HTTPSを選択してURLをコピー(黒塗りしている部分です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/106f6990-9103-e8e1-c553-b92c2cfdf8fc.png)

VSCodeでプロジェクト管理用のフォルダを作成して開く（新しく空のフォルダを作成していただければいいかと思います）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/8716308e-b4cf-beae-73de-2a28d4bb7b69.png)


ctrl + shift + @でpowershellを起動して以下のコマンドを実行
```
git clone リポジトリのURL
```

DjangoProjectがcloneされていればOKです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/48f20ed9-497b-b509-2c39-4c2b55814a37.png)

### Dockerファイルの作成
拡張機能→Remote Developmentをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/41bb8b66-dec0-e4eb-e51f-d5dcf276b8ca.png)

画像の通りFlaskProject内に.devcontainerフォルダと設定ファイルを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/16794367-d6cf-e905-8170-670a07418723.png)

devcontainer.jsonの中身を以下の通り編集
```json
{
  "name": "django.devcontainer",
  "dockerComposeFile": "docker-compose.yml",
  "service": "web",
  "workspaceFolder": "/vsc_workspace",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python"
      ]
    }
  }
}
```

docker-compose.ymlを以下の通り編集（PostgreSQLを使用する想定でdjango_sampleというDBを作成するように設定を行っています）
```yml
version: '3'

services:
  web:
    build: .
    tty: true
    volumes:
      - ../:/vsc_workspace
    depends_on:
      - db

  db:
    image: postgres
    volumes:
        - postgres_data:/var/lib/postgresql/data
    environment:
        POSTGRES_USER: postgres
        POSTGRES_PASSWORD: password
        POSTGRES_DB: django_sample

  pgadmin4:
    image: dpage/pgadmin4
    ports:
        - 8888:80
    volumes:
        - pgadmin4_data:/var/lib/pgadmin
    environment:
        PGADMIN_DEFAULT_EMAIL: test@gmail.com
        PGADMIN_DEFAULT_PASSWORD: password
    depends_on:
      - db

volumes:
    postgres_data:
    pgadmin4_data:
```

Dockerfileを以下の通り編集
```Dockerfile
FROM python:3.11

ENV PYTHONUNBUFFERED 1

RUN mkdir /code

WORKDIR /code

COPY requirements.txt /code/

RUN pip install -r requirements.txt

COPY . /code/
```

画像の通りDjangoプロジェクトをDjangoProjectフォルダの直下にmanagement.pyが来るように配置
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/abdb24d1-b630-bfd6-6ec1-5e02db6afe54.png)

# リモート開発環境への接続とアプリケーションの実行
VSCodeでDjangoProjectフォルダを開く(Djangoフォルダではなく.devcontainerを直下に持つフォルダを開いてください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/bdfed099-5ce0-1888-1664-40a984de2b2a.png)

画面左下の><ボタンをクリック→コンテナーで再度開くをクリック（実行にはしばらく時間がかかります。また、リモート開発環境を立ち上げるにはDocker Desktopを立ち上げている必要があります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/d2c0cb1b-7224-089e-71cd-5da26d594528.png)

settings.pyのDB接続情報を以下のように設定(本記事のdocker-compose.ymlファイルをコピペした場合)
```python
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.postgresql_psycopg2',
        'NAME': 'django_sample',
        'USER': 'postgres',
        'PASSWORD': 'password',
        'HOST': 'db',
        'PORT': '5432',
    }
}
```

ctrl + shift + @でターミナルを起動して以下のコマンドを順に実行
```
python manage.py makemigrations
```
```
python manage.py migrate
```
```
python manage.py runserver
```

画像の通りURLが出てきたら成功です（URLをクリックするとアプリが立ち上がります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/7b835d26-9bb2-45d7-7fd6-97f69cf29691.png)


# リモート開発環境の運用方法
リモート開発環境を構築出来たら以下のサイトを参考にGit・GitHubを用いたバージョン管理を行いましょう

https://qiita.com/KomoriSohto/items/664da46d1474364f8f8b