はじめに

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

目次

前準備
Dockerファイルの作成
リモート開発環境への接続とアプリケーションの実行
参考文献

前準備

Docker Desktopのダウンロード

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

こんな感じで画面が表示されれば作業完了です

Gitのダウンロード

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

画像の通りGit Bashが使えるようになっていれば作業完了です

GitHubのアカウント作成

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

VSCodeのインストール

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

リポジトリの作成

GitHubで以下の通りリポジトリを作成します(リポジトリを作成できれば問題ないので、以下の設定はご自身の状況に合わせて自由に行ってください)

プロジェクト名：DjangoProject
公開範囲：Private
.gitignore：python

Code→HTTPSを選択してURLをコピー(黒塗りしている部分です)

VSCodeでプロジェクト管理用のフォルダを作成して開く（新しく空のフォルダを作成していただければいいかと思います）

ctrl + shift + @でpowershellを起動して以下のコマンドを実行

git clone リポジトリのURL

DjangoProjectがcloneされていればOKです

Dockerファイルの作成

拡張機能→Remote Developmentをインストール

画像の通りFlaskProject内に.devcontainerフォルダと設定ファイルを作成する

devcontainer.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を作成するように設定を行っています）

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を以下の通り編集

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が来るように配置

リモート開発環境への接続とアプリケーションの実行

VSCodeでDjangoProjectフォルダを開く(Djangoフォルダではなく.devcontainerを直下に持つフォルダを開いてください)

画面左下の><ボタンをクリック→コンテナーで再度開くをクリック（実行にはしばらく時間がかかります。また、リモート開発環境を立ち上げるにはDocker Desktopを立ち上げている必要があります）

settings.pyのDB接続情報を以下のように設定(本記事のdocker-compose.ymlファイルをコピペした場合)

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をクリックするとアプリが立ち上がります）

リモート開発環境の運用方法

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