広告

【Python+Django4】VS Code+Dockerで簡単構築【Dev Containers】【Win/Mac】

Django

当サイトではアフィリエイト広告を利用しています。

広告

はじめに

今回はDjangoの開発環境を、VS CodeとDockerを使用して簡単に構築します。

以前こちらの記事で、WindowsにPython環境をインストールし構築しました。

【PythonでWebアプリ】Djangoの開発環境をWindowsで構築
Djangoの開発環境をWindowsで構築する手順をまとめました。WindowsにAnacondaをインストールして進めます。

Anadcondaを使用しておりライセンスの問題や、やはりOSに直接環境をインストールしていくのは面倒です。
LaravelもDockerを使い、コンテナ上に簡単に開発環境を構築することができます。

Windows
Laravel Sailで開発環境構築【Vite対応】
今回は、Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。
Mac
【M1 Mac】Laravel Sailで開発環境構築【Vite対応】
Laravel Sailを使って環境の構築を行いました。 SailはDockerですので、開発環境を簡単に用意することもできますし、カスタマイズすることも楽です。

Dockerさえインストールしておけば、別なPCでも、複数人での開発でも、同じ環境を簡単に作ることができます。

本記事ではDjangoの開発環境をDockerで構築し、VS Codeからリモートで開発を行います。

単にコンテナを用意しそこで実行するだけではなく、VS Codeのリモート開発と連携します。
プロジェクトを開くだけでコンテナが起動し、コンテナ上のコマンド操作や実行などができます。

今回使用する環境とバージョン

今回試した環境
  • Windows 11 / 10
  • macOS Monterey (M1)
  • Docker Desktop
  • Python 3.11.2
  • Django 4.1.7

2022/04/20 WindowsとMacを使い、最新バージョンで確認しました。
2023/03/11 最新バージョンで確認しました。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

VS Codeインストール

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

【VS Code】インストール手順を解説 【Windows/M1 Mac対応】
今回はVS Codeのインストール手順を解説します。WindowsとMacのそれぞれ分けてまとめました。

VS Codeのオススメ設定や拡張機能などは、以下の記事にまとめました。

【VS Code】オススメの設定・拡張機能・便利機能・ショートカット【Win/Mac対応】
私的に最初に行う設定や、拡張機能、よく使うショートカットや便利な機能をまとめてみました。
広告

Docker Desktopのインストール

Macの場合はDockerのみですが、Windowsの場合はDocker(WSL2がバックエンド)が必要です。
Dockerのインストール方法は、以下の記事をご覧ください。

Windows
【Docker Desktop】Windowsにインストール(WSL2)
WindowsにDockerをインストールする手順を解説します。ついでにPython環境を、コンテナに構築してみたいと思います。
Mac
【Docker Desktop】Macにインストール【Monterey/M1】
MacにDockerをインストールする手順を解説します。ついでにPython環境を、コンテナに構築してみたいと思います。

VS Codeのインストール

VS Codeでコンテナへのリモート開発を行います。
詳しい仕組みなどは、以下の記事をご覧ください。

【VSCode/Dev Containers】DockerでPython開発【Win/Mac】
VS CodeでDockerコンテナを使いリモート開発を試してみました。Dockerを使いPython環境を用意し、VS Codeでリモートデバッグを行いないます。

VS Codeの用意と、「Dev Containers」という拡張機能をインストールしてください。

Dockerコンテナの設定

開発環境のコンテナを作成するための定義を用意します。

この設定ファイルは、プロジェクトを作成する度に活用できます。

任意の場所にプロジェクトフォルダを用意します。

Windows例:
\\wsl.localhost\Ubuntu\home\xxx\django-sample-app\
Mac例:
/users/xxx/Documents/django-sample-app

Windowsの場合、保存場所はWSLを指定しましょう。
Cドライブなどに保存した場合、ファイルシステムの関係で読み込みが遅くなります。

上記のフォルダの中に、「.devcontainer」フォルダを作成し、このようにファイルを作成します。

/
└ .devcontainer/
  ├ devcontainer.json
  └ Dockerfile

devcontainer.jsonを作成し中身を以下のようにします。
Dockerfileで作成ということと、拡張機能のインストールを記述します。

{
	"name": "Django Sample",
	// Dockerfileでイメージ・コンテナを作成
	"dockerFile": "Dockerfile",
	// リモート先のVS Codeにインストールする拡張機能
	"customizations": {
		"vscode": {
			"extensions": [
				"ms-python.python"
			]
		}
	},
}

Dockerfileを定義します。
Python環境のイメージを使用し、Djangoをインストールします。

FROM python:3 
ENV PYTHONUNBUFFERED 1 
RUN pip install django

PYTHONUNBUFFERED」は、Pythonの標準出力のバッファリングを無効にします。
アプリケーションの出力(Djangoのログなど)をリアルタイムで確認できるようになります。

設定はこれだけです。
リモート先の設定と、Dockerコンテナの定義を行いました。

以降の解説キャプチャはWindowsをベースにしていますが、Macでの操作も同様です。

VS Codeの起動

VS Codeを起動し、F1キーを押しコマンドパレットを開きます。
「Open Folder in Container」と入力し選択します。

参考までに以前とメニューの表示方法が変わりました。

【VS Code】Dev Containersで「Open Folder in Container」などのメニューが表示されない
Dev Containers拡張機能のメニューの表示に仕様変更があったためまとめました。

先程作成したフォルダを選択します。
プロジェクトにはDockerの設定も含まれているため、初回起動時にはイメージとコンテナが自動で作成されます。

完了しました。
この時点で、Python+Django環境のコンテナが作成され、リモートしている状態です。

Djangoプロジェクトの作成

VS Codeのターミナルを開きます。

コンテナ上でコマンドの実行ができます。

以下のコマンドで、Djangoプロジェクトを作成します。
最後にドットを付けて、同じ階層にプロジェクトファイルを作成します。

$ django-admin startproject djangoSampleApp .

「djangoSampleApp」はプロジェクト名ですので、任意で指定してください。

プロジェクトフォルダ直下に、Djangoプロジェクトファイルが作成されました。

Djangoには、開発のためのサーバーが用意されているので起動します。
VS Codeのターミナルから以下を実行します。

$ python manage.py runserver

以下のURLにアクセスします。

http://localhost:8000/

Djangoの画面が表示されました。

バージョン確認

Python

ターミナルから確認しましょう。
Pythonは3.10.4がインストールされています。

$ python -V

Python 3.11.2

Django

以下のコマンドで確認します。

$ python -m django --version

4.1.7

また、Pythonの対話モードで確認できます。
Djangoは最新のバージョン4.0.4が導入されていました。

$ python

>>> import django
>>> print(django.get_version())
4.1.7

データベースを追加

以下の記事で、PostgreSQLを追加する手順を解説しました。

【Django】DockerコンテナにPostgreSQL/pgAdminを追加
Django環境をDockerを使用し、さらにPostgreSQLを追加する手順を解説しました。

以下の記事では、MySQLを追加する手順を解説しました。

【Django】DockerコンテナにMySQL/phpMyAdminを追加
Django環境をDockerを使用し、さらにMySQLを追加する手順を解説しました。

これ以降の手順を進めるためには、データベースを作成する必要があります。

管理画面

Djangoの管理画面を確認してみましょう。
まずは、管理画面にログインするユーザーを作成します。

以下のコマンドを実行します。

$ python manage.py createsuperuser

ユーザ名、メールアドレス、パスワードが聞かれますが、任意で指定してください。

以下のコマンドで開発サーバーを起動します。

$ python manage.py runserver

以下のURLにアクセスします。

http://localhost:8000/admin/

管理画面が表示されますので、先ほど作成したユーザでログインを行います。

管理画面にアクセスすることができました。

その他

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Djangoアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

さいごに

今回はDjangoの開発環境を、VS CodeとDockerを使用して簡単に構築しました。
本当にDockerを使うと、開発環境の構築が楽です。

他にも、Django REST Frameworkを導入すると、APIが簡単に実装できます。

【Django4】Django REST FrameworkでAPI作成
Django REST Frameworkを利用して、RESTfulなAPIを作成してみます。

是非試してみてください。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

DjangoDockerMacOSPythonVS CodeWindowsツールプログラミング
広告

個人開発

千草 @chigusaweb

現役のITエンジニア。 気ままにコードを書いたり技術情報を発信しています。 Webアプリ/Windows・Macアプリ/モバイルアプリなど。 (Java, PHP, Javascript, Swift, Python, C#, 他) 個人開発:Clibor, Quipha, TXT-Crypter, 符計算特訓, チグサツール Kindle本: Laravel9 実践入門, 他

クリップボード履歴

Clibor

Windows

Cliborはシンプルで高機能なクリップボード履歴ソフトです。
また普段よく使うワードを定型文として登録し、いつでもクリップボードに保存することができます。高度なテキスト整形・FIFOモード・ホットキーに対応。

クリップボード履歴

Windows版Cliborの利便性を、そのままMacでも。
定型文登録、高度なテキスト整形、FIFOモードなど、便利なクリップボード履歴機能を利用できます。macOS最新のTahoeにも対応。

テキスト暗号化

テキストを暗号化してURLで共有・保存できる無料サービスです。
パスフレーズを知る人だけが復号できます。登録不要、データはサーバーに保存されません。
Notionでも利用できます。

学習

Quipha

Web / iOS

自分だけの問題集や問題を作成し、クイズを行い、学習に活用することができるアプリです。
例えば、学校の授業、語学学習、IT資格やその他の資格など多彩な分野での学習を支援します。
いつでも、どこでも、あなたの学習をサポート。

ツール

日常の「ちょっとした効率化」をサポートするWeb便利ツール集。
テキスト・データ処理から最新のAI連携まで、日々のちょっとした手間でググりがちなユーティリティを1つの場所に集約。

麻雀

麻雀の符計算をひたすら特訓しマスターしましょう。
初心者の方はもちろん、もっと速く計算したい方にも役立ちます。
5万対局以上の実践から問題を収録。

コメント

  1. ごた より:

    M1 Mac Proで本記事の手順を試してみているのですが、
    VS Codeを起動し、左下の緑のアイコンをクリックしても、
    「Open Folder in Container…」が出現しませんでした。

    この原因について思い当たる点がありましたら、教えていただけないでしょうか。

    • 千草 より:

      最新バージョンのDev Containersで試したところ、確かに左下の緑のアイコンをクリックしても表示されませんでした。

      F1キーを押し、コマンドパレットから選択することができました。(Windows/Macで確認済み)
      記事には追記しました。

      • ごた より:

        早速のご返信(ブログ内容の対応も含めて)ありがとうございました!
        無事に記事の末尾までなぞることが出来ました。
        これからもdjangoを学ぶ上でブログを参考にさせて頂きます!

タイトルとURLをコピーしました