VSCode＋DockerでDjangoの開発環境を構築する
一度は催眠術にかかってみたいです。
こんにちは、
ワニかず@40歳 出戻りエンジニアです。
ジャンゴというと、
「1.2.ジャンゴ！」
しか知らなかったのですが、
転職先ではDjangoで開発を行うということで、
今回は、VS Code＆Dockerで
Djangoの開発環境の構築までの手順をまとめました。
事前準備
VSCodeをインストール
まずは、VS Codeをインストールします。
VS Codeダウンロードサイトにアクセスして、
ご自身の環境のファイルをダウンロード、
インストールします。私はWindowsの環境で行っています。
WSL2をインストール
以下に手順をまとめましたのでご覧ください。
Docker Desktopをインストール
Docker Desktopダウンロードサイトにアクセスして、
「Docker Desktop for Windows」
をクリックしてインストーラーをダウロードします。
手順
プロジェクトフォルダを新規作成
お好きな場所に、プロジェクト用のフォルダを作ります。
私は今回、「weather_forecast」
というフォルダを作って作業を進めました。
以下の画像はフォルダがいくつか入っていますが、
環境構築完了後の状態です。
始めは空の状態でOKです。
VS Codeの手順
先ほど作ったフォルダでVS Codeを起動します。
devcontainer.jsonを作成
.devcontainerフォルダを作成し、
その中に「devcontainer.json」を作成します。
ファイルの中身は、以下のようにします。
{
"name": "weather_forecast",
"dockerFile": "../.vscode/Dockerfile",
"customizations": {
"vscode": {
"extensions": [
"ms-azuretools.vscode-docker",
"ms-python.python",
"ms-python.vscode-pylance"
]
}
}
}
Dockerfileを作成
.vscodeフォルダを作成し、
その中に「Dockerfile」を作成します。
ファイルの中身は、以下のようにします。
# プロジェクトフォルダ名を入れた場合
FROM python:3.10.9
ENV PYTHONUNBUFFERED 1
ENV PYTHONDONTWRITEBYTECODE 1
RUN mkdir /weather_forecast
WORKDIR /weather_forecast
ADD requirements.txt /weather_forecast/
RUN pip install --upgrade pip && pip install -r requirements.txt
requirements.txtを作成
.vscodeフォルダの中に、
「requirements.txt」を作成します。
ファイルの中身は、以下のようにします。
django==5.0.1
コンテナを作成する
「Ctrl+Shift+P」を入力し、
「コマンドパレット」を表示します。
カーソルが「コマンドパレット」に移動するので、
「Dev Containers: Open Folder in Container...」
を入力し、出てきた項目を選択します。
フォルダ選択画面が出たら、
先ほど作ったプロジェクト用のフォルダを選択します。
私は「weather_forecast」としていたので、
以下のように選択します。
すると、コンテナの作成中になるため、
しばらく待ちます。
その後、完了すると、
以下のようにコンテナに入った状態の画面に切り替わります。
Djangoプロジェクトを作成する
VS Codeのターミナルで
以下を実行します。
私はプロジェクト名を
「 weather_project 」
として実行しています。
django-admin startproject weather_project .
作成が完了すると、
以下のように、フォルダが作られて、
プロジェクトファイルが追加されています。
Djangoプロジェクトのデバッグ設定
左側のメニューの
「実行とデバッグ」を選択して、
「launch.jsonファイルを作成します。」
を選択します。
すると、コマンドパレットのほうに
フォーカスが移動すると思うので、
まずは、「Python Debugger」
を選択します。
次に、「Django Django Webアプリケーションの起動とデバッグ」
を選択します。
次に、「manage.py」
を選択します。
すると、「launch.json」
が自動で作られると思うので、
デフォルトから特にいじらずでOKです。
私の環境では以下のような内容になっています。
{
// IntelliSense を使用して利用可能な属性を学べます。
// 既存の属性の説明をホバーして表示します。
// 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Python デバッガー: Django",
"type": "debugpy",
"request": "launch",
"args": [
"runserver"
],
"django": true,
"autoStartBrowser": false,
"program": "${workspaceFolder}/manage.py"
}
]
}
これでデバッグができる状態が整いました。
Djangoプロジェクトのデバッグ実行
「F5」を押して、デバッガーを起動してみましょう。
「F5」でデバッグを起動すると、
右下に
「ポート8000で実行されているアプリケーションは使用可能です。」
の画面が出るので、
「ブラウザーで開く」を選択します。
すると、ブラウザで、
以下のような画面が出ると成功です。
お疲れさまでした！
Discussion