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

2020年6月6日 00:01

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

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

環境構築

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

・CentOS: 7.8
・Python: 3.8.3
・Node.js: 14.4.0
・Django: 3.0.6
・Nuxt: 2.12.2
・SQLite: 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コンテナの起動までしてくれます。

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

VSCodeの設定

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

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

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

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

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

Remote-Container: Attach to Running Container...

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

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

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

/var/www/djanuxt

djanuxtフォルダなしの場合

djanuxtフォルダありの場合

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

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

djanuxt		※ <-- Djangoプロジェクト
  └ .vscode	※ <-- VSCode設定ファイル
       │
       ├ launch.json
       └ settings.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

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

cd /var/www/djanuxt/nuxt

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

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

	yarn run dev

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

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

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

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

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

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

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

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

docker-compose stop

再開は

docker-compose up -d

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

この記事が気に入ったらサポートをしてみませんか？

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

環境構築

Dockerイメージの構築

VSCodeの設定

VSCodeでデバッグ

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