The 技術 #2：VSCodeでDocker×Django×MySQL×Nginxのwebアプリ開発環境構築

2020/9/6追記
・Docker-compose.ymlを修正しました
↓
python manage.py runserverコマンドでアプリを起動した際、nginxのports設定が8000:8000に設定されているとportが被り、http://127.0.0.1/8000へのアクセスができないためnginxのports設定を8080:8080に変更

2020/9/5 追記
・Docker-compose.ymlを修正しました
　↓
プライベートIPアドレスを静的IPアドレスとして設定するnetworks設定を追加したことで、djangoコンテナとmysqlコンテナの接続ができない問題を解決しました。

令和と題してハードル上げました。
上げたハードルの下をくぐっていきます。

コードはgithubに公開しています。

dockerを使いますが、dockerコマンドは打たなくていいんです。

そう、VSCodeならね。

本記事はDockerで Django3 × MySQL × Nginxの環境をリモートコンテナ上に構築する記事です。

ホストOS：Windows10 home,
リモートOS：ubuntu18.04(LTS),
開発環境：VSCode

となっておりますので、同じような境遇の方は参考にしてください。

▶取り組みの背景

下記の記事でフィルムカメラに関するサービスを何か作ろうと記載しました。

そこでとりあえずサービスの紹介用webサイトを立ち上げようと思いまして、いろいろ調べていました。

無料のwebサイトを作るならWixやJimdoを使えば手っ取り早いのですが、下記のような素敵なwebサイトを見ているうちに、自由度の高さを求めて自作することを選びました。

【2020年版】参考サイトまとめ【WebGL（3Dアニメーション）】編

そうと決まれば勉強あるのみ。

令和の時代に求められるスキルを学ぶ機会にもしたいと思い、
今後も長く使えそうなwebアプリ開発環境構築をつくるところから始めようと思いました。

最終的にはGCPやAWSといったクラウドサービスのIaas（インフラサービス）を使用してサイト公開をしたいと考えているので、その時に移行が楽になるようDockerを使用します。

ちなみに、フィルムカメラ関係のwebサイトは訪問者が少ないと思うので、GCPを利用して完全無料でサイトを作ろうと思っています。

▶開発環境

統合開発環境
・VSCode：1.48.2

ホスト環境(ローカルPC)
・OS：Windows 10 home（64bit）バージョン2004
・Docker：19.03.13-beta2
・docker-compose version：1.26.2
※windows10 homeのPCにDockerを導入する手順は下記が参考になります。

コンテナ環境（ローカルPC上に作る仮想環境）
OS：ubuntu 18.04（LTS）
Python：
　python：3.6
　django：3.1
　uwsgi：2.0.19.1
　mysqlclient：2.0.1
MySQL：
　MySQL：5.7
Nginx：
　Nginx：1.17

▶webサイト開発環境構築手順

shiimono/DockerCompose_ubuntu1804_Django3_MySQL_Nginx

①PCに開発物を入れるためのフォルダを作成する
②VSCodeで①で作成したフォルダを開く
③上記githubリンクからコード一式をクローン or ダウンロード
④③で取得したコード内のmemo.txtを開き、【VSCodeでのリモート開発環境構築手順】に従って設定を行う
⑤djangoのロケットが飛んでいるwebサイトが見えれば開発環境構築完了！

Django(Pythonコンテナ)からMySQL(dbコンテナ)に接続できるかの確認はDjangoチュートリアル#1~#2に沿って確認しました。

はじめての Django アプリ作成、その 1 | Django ドキュメント | Django

コードの中身は下記サイトを参考にさせて頂きましたので、処理の説明等はこちらを参照してください。↓

Docker ComposeでDjango+MySQL+Nginxの環境構築 | chibashi's note

参考先と違う点は下記の通りです。
・windows上でdockerを使っているのでVirtualBoxは不要で動作が軽快
・リモートOSがCentOSではなくubuntu 18.04
・VSCodeで開発できる環境を構築
・Djangoが推奨しているMySQLのAPIドライバであるmysqlclientを使用
・Django(Pythonコンテナ)からMySQL(dbコンテナ)に接続できるようdocker-compose.ymlにnetworks設定を追加

手順⑤が終わった時点でローカルPC上で起動しているDocker Desktopを開くと下記の環境が構築されているはずです。

Docker image　↓

Docker container　↓

基本的に開発はVSCodeのRemote Container機能でリモート環境を作成し、その中で行います。

基礎ができたので次はwebサイト作成をはじめるぞー！

▶おわりに

私は独学派なので基本的にネットでいろいろ調べるのですが、今回は理解が思うように進まず、書籍を買おうかと思いました。

で、本を探したものの、ネットで調べたほうが良いという結論に落ち着きました...。

初めましてなことが多い分野ってなかなか理解が進まないですが、とりあえず動くものを作ってみると理解がサクサク進みますよね。

動くものができないと・・・それはその時。

それでは、良い発明ライフを。