見出し画像

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サイトを見ているうちに、自由度の高さを求めて自作することを選びました。

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

令和の時代に求められるスキルを学ぶ機会にもしたいと思い、
今後も長く使えそうな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サイト開発環境構築手順

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


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


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

参考先と違う点は下記の通りです。
・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 ↓

画像1

Docker container ↓

画像2


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

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


▶おわりに

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

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

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

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

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

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

頂いたサポートはみなさんの血肉になるような情報で還元させて頂きます!

あなたが明日500円玉を拾えるようお祈り申し上げます。
2
研究開発職員が自由な世界でアイデアを考える。 あさく、ひろく、ときどきふかく。

こちらでもピックアップされています

The 技術
The 技術
  • 2本

技術記事まとめ

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。