Docker+VSCodeによる開発環境の構築 (Django+Nuxt編)
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
で開始できます。2回目からはDockerイメージは作成済みなのですぐにDockerコンテナが起動します。
Dockerはホント便利ですね。
この記事が気に入ったらサポートをしてみませんか?