Docker+VSCodeによる開発環境の構築 (Django+Nuxt編)

DjangoとNuxtを使って開発を行うときの環境の構築方法を記述していきたいと思います。

DockerとVSCodeを使ってステップでのデバッグを実行できるようにするのが目標です。 Docker DesktopとVisual Studio Codeは既にインストール済みの前提で記述していきます。

環境構築

開発環境として下記のものをDockerコンテナ上に構築します。

CentOS: 7.8Python: 3.8.3Node.js: 14.4.0Django: 3.0.6Nuxt: 2.12.2SQLite: 3.31.1

VSCodeに入れる拡張機能(プラグイン)は以下のものを入れます。

・Remote - Containers
・Python
・Jinja	(Pythonテンプレートライブラリ)
・Vetur

Docker開発環境のディレクトリ・ファイル構成は以下の形になります。

djanuxt_dev
  │
  ├ dev
  │  │
  │  ├ src
  │  │  │
  │  │  └ djanuxt	    ※ <-- Djangoプロジェクト
  │  │      └ .vscode	※ <-- VSCode設定ファイル
  │  │           │
  │  │           ├ launch.json
  │  │           └ settings.json
  │  │  
  │  ├ Dockerfile
  │  └ ssh.sh
  │
  └ docker-compose.yml

まず以下のDockerfileを作成します。

[djanuxt_dev/dev/Dockerfile]
	
 Dockerfile


	FROM centos:7

	RUN yum -y update && yum clean all && \
	    yum -y install \
	    wget \
	    gcc \
	    tar \
	    make \
	    which \
	    iputils \
	    net-tools \
	    vim

	# Install Python3
	RUN yum groupinstall -y "development tools"
	RUN yum install -y  \
	    blas-devel \
	    bzip2-devel \
	    gdbm-devel \
	    lapack-devel \
	    libffi-devel \
	    libjpeg-devel \
	    libtiff-dev \
	    libpng-devel \
	    libuuid-devel \
	    ncurses-devel \
	    openssl-devel \
	    sqlite-devel \
	    readline-devel \
	    tk-devel \
	    xz-devel \
	    zlib-devel

	ENV PYTHON_VERSION 3.8.3
	ENV LD_RUN_PATH /usr/local/lib
	WORKDIR /usr/src
	RUN wget https://www.python.org/ftp/python/${PYTHON_VERSION}/Python-${PYTHON_VERSION}.tgz && \
	    tar zxf Python-${PYTHON_VERSION}.tgz && \
	    rm Python-${PYTHON_VERSION}.tgz && \
	    cd Python-${PYTHON_VERSION} && \
	    ./configure --enable-optimizations && \
	    make altinstall && \
	    ln -s /usr/local/bin/pip3.8 /usr/local/bin/pip && \
	    ln -s /usr/local/bin/python3.8 /usr/local/bin/python
	RUN pip install --upgrade pip

	# Django
	RUN pip install django==3.0.6
	RUN pip install django-sslserver
    RUN pip install python-dotenv

	# Node.js
	RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash -
	RUN yum install -y nodejs
	RUN npm install -g yarn

	# SQLite3
	WORKDIR /usr/src
	RUN wget https://www.sqlite.org/2020/sqlite-autoconf-3310100.tar.gz && \
	    tar xvfz sqlite-autoconf-3310100.tar.gz && \
	    rm sqlite-autoconf-3310100.tar.gz && \
	    cd sqlite-autoconf-3310100 && \
	    ./configure --prefix=/usr/local && \
	    make && \
	    make install && \
	    ln -sf /usr/local/bin/sqlite3 /usr/bin/sqlite3

	# Git2
	RUN yum -y remove git
	RUN yum -y install https://repo.ius.io/ius-release-el7.rpm
	RUN yum -y install git2u yum-utils
	RUN yum-config-manager --disable ius

	# SSL
	RUN yum install -y openssl
	RUN yum install -y epel-release
	RUN yum install -y nkf --enablerepo=epel
	ADD ssl.sh /opt/ssl.sh
	RUN chmod a+x /opt/ssl.sh
	RUN nkf -Lu --overwrite /opt/ssl.sh
	RUN /bin/bash -c "source /opt/ssl.sh /etc/ssl/ssl_keys localhost"

	# Local environment
	RUN ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime
	ENV LANG ja_JP.UTF-8

	EXPOSE 8000 8443 3000
	RUN mkdir /var/www
	WORKDIR /var/www

次にDjango開発サーバーでSSLを使えるよう秘密鍵・SSL証明書をDockerkコンテナ内に作るためのシェルを作成します。

[djanuxt_dev/dev/ssl.sh]
	
 ssl.sh


	#!/bin/sh

	path=$1
	servername=$2

	mkdir -p ${path}
	openssl genrsa -out ${path}/server.key 2048
	openssl req -new -key ${path}/server.key -out ${path}/server.csr -subj '/C=JP/ST=Tokyo/L=Tokyo/O=Example Ltd./OU=Web/CN='${servername}
	openssl x509 -in ${path}/server.csr -days 3650 -req -signkey ${path}/server.key -out ${path}/server.crt

その次にDocker ComposeのYAMLファイルを作成します。

[djanuxt_dev/docker-compose.yml]
	
 docker-compose.yml


	version: "3"
	services:
	    web:
	        build:
	            context: ./dev
	        image: "djanuxt-dev"
	        container_name: "djanuxt-dev"
	        ports:
	            - "8000:8000"
	            - "8443:8443"
	            - "3000:3000"
	        tty: true
	        stdin_open: true
	        volumes:
	            - ./dev/src:/var/www:cached
	        working_dir: /var/www
	        privileged: true
	        command: /sbin/init

これらのファイルを用意してDockerイメージを作成してみます。

Dockerイメージの構築

Dockerイメージを作ってみます。コマンドプロンプト/ターミナル等で以下のコマンドを実行します。

docker-compose.ymlのある場所で

	docker-compose up -d

上記コマンドを実行するとDockerイメージの構築が始まります。 結構時間がかかりますが上手くイメージが作れればDockerコンテナの起動までしてくれます。

こんなメッセージが表示されれば成功です

画像1

VSCodeの設定

Dockerコンテナの起動までできたら、VSCodeを開いて立ち上がったDockerコンテナにアタッチします。

VSCodeを立ち上げて拡張機能に「Remote Containers」が入っているか確認します。入っていなければインストールします。

画像2

DockerコンテナへのアタッチはVSCodeの左下の[><]のような箇所をクリック。

画像3

アタッチする種類を聞いてくるので

画像4

下記のものをを選びます。

Remote-Container: Attach to Running Container...

選択後、今立ち上がっているDockerコンテナのリストが表示されるので、先程作った下記のDockerコンテナを選択します。

画像5

Dockerコンテナ選択後、VSCodeが別画面で開きます。 画面左下にアタッチしたDockerコンテナの名前が表示されてアタッチ出来たらメニューバーの[ファイル]⇒[フォルダを開く]を選択して開くフォルダの場所を入力します。(※このフォルダはDockerコンテナ内のフォルダになります)

下記のパスを入力します。まだdjanuxtプロジェクトを作っていない場合は怒られますのでプロジェクト作成後に入力します。

/var/www/djanuxt

djanuxtフォルダなしの場合

画像6

djanuxtフォルダありの場合

画像7

フォルダが開くとVSCodeの画面左ペインにファイルのツリーが表示されます。

画像8

Djangoプロジェクトが見れるようになったら、その中にVSCodeの設定ファイルを作成します。 djanuxt/.vscodeフォルダ作成後、以下のlaunch.jsonとsettings.jsonをファイルを作成します。

djanuxt		※ <-- Djangoプロジェクト
  └ .vscode	※ <-- VSCode設定ファイル
       │
       ├ launch.jsonsettings.json
[djanuxt_dev/dev/src/djanuxt/.vscode/launch.json]
	
 launch.json


	{
	    "version": "0.2.0",
	    "configurations": [
	        {
	            "name": "Python: Django",
	            "type": "python",
	            "request": "launch",
	            "program": "${workspaceFolder}/manage.py",
	            "args": [
	                "runserver",
	                "0.0.0.0:8000",
	            ],
	            "django": true
	        },
	        {
	            "name": "Python: Django HTTPS",
	            "type": "python",
	            "request": "launch",
	            "program": "${workspaceFolder}/manage.py",
	            "args": [
	                "runsslserver",
	                "0.0.0.0:8443",
	                "--certificate",
	                "/etc/ssl/ssl_keys/server.crt",
	                "--key",
	                "/etc/ssl/ssl_keys/server.key"
	            ],
	            "django": true
	        },
	    ]
	}
[djanuxt_dev/dev/src/djanuxt/.vscode/settings.json]
	
 settings.json


	{
	    "python.linting.enabled": true,
	    "python.pythonPath": "/usr/local/bin/python",
	}

この状態まで来たらデバッグを開始できます

VSCodeでデバッグ

Djangoの開発サーバーとNuxtの開発サーバーを動かします。 Django開発サーバーはVSCodeから起動します。 Nuxt開発サーバーはDockerコンテナ内に入ってコマンドラインを打って起動します

まずNuxt開発サーバーを起動します。コマンドプロンプト/ターミナル等でDockerコンテナに入ります。

docker exec -it djanuxt-dev bash

画像9

コンテナ内に入れたらnuxtディレクトリの直下まで移動します。

cd /var/www/djanuxt/nuxt

その位置で下記コマンドでNuxt開発サーバーを起動します。

package.jsonの存在する場所です

	yarn run dev

Nuxt開発サーバーが立ち上がりビルドが始まります。ビルド完了したら以下のListening on画面になります。

画像10

これでhttp://localhost:3000/nuxtにアクセスできるようになっています。

画像11

次はDjangoの開発サーバーを立ち上げます。VSCodeのデバッグから起動します。 HTTPとHTTPSが選べるようになっていると思いますが、とりあえずHTTPで起動します。

画像12

拡張機能に「Python」を入れておかないと動かないので入ってない場合はインストールします。ついでに「Vetur」「Jinja」も入れておきます。

画像13

拡張機能をインストールした場合はVSCodeの再読み込みが必要なので再読み込みをします。 必要な拡張機能が入ったらデバッグ開始ができるようになります。 Django開発サーバーが起動できたら画面下のターミナルは以下のような内容が表示されます。

画像14

これでhttp://localhost:8000でDjangoのページにアクセスできると思います。

あとはDjangoのソースコードの任意に位置にブレークポイントを貼っておきます。その箇所が実行されればブレークポイントの行で実行が止まり[F10]でステップ移動できることでしょう。

画像15

以上でDjango+Nuxtの開発環境の構築は完了です。開発を中断するときはDockerコンテナを落とすのをお忘れなく。

docker-compose stop

再開は

docker-compose up -d

で開始できます。2回目からはDockerイメージは作成済みなのですぐにDockerコンテナが起動します。
Dockerはホント便利ですね。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
1
大阪生まれの東京育ち。現在は生まれ故郷の大阪で活動するフリーランスプログラマー。
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。