【Python＋Django＋Docker＋VS Code】WebアプリHello Worldを表示してみる（Mac環境）

環境メモ
⭐️macOS Monterey
⭐️Python 3.11.1
⭐️Django 4.1.6
⭐️Visual Studio Code 1.75.0 ←Mac OS版
⭐️Docker desktop 4.11.1 ←Mac OS版

↓↓完成内容
`http://127.0.0.1:8000/nonHello`
![スクリーンショット 2023-02-06 2.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/134e4a76-8007-5d7c-efa8-56b26cc1f58c.png)


# 1.概要
Python（プログラミング言語）、Django（Webアプリフレームワーク）、Docker（コンテナ仮想環境）を構築し、WebアプリHello Worldを表示してみます。

# 2.ざっくり説明
## 2-1.Django（ジャンゴ）
Pythonで使えるWebアプリ・サービスのフレームワークDjango（ジャンゴ）を使う。
Djangoはフルスタックフレームワークと呼ばれており、Webアプリの開発において必要な機能が全て揃っているともいえるフレームワークです。

## 2-2.Docker（ドッカー）
コンテナ型仮想環境を作成・実行・管理するためのプラットフォームです。
Dockerは、開発環境の構築が簡単にできます。 Dockerエンジンをインストールし、利用したいアプリのDockerイメージを入手してコンテナを作成するだけで、開発環境が構築できます。

## 2-3.Visual Studio Code(VS Code)
Microsoftが開発したソースコードエディタです。プラグインをインストールすると効率的なコーディングが行えるようになります。

# 3.環境構築
## 3-1.Docker Desktopのインストール
Mac用のDockerデスクトップをインストールする

Docker Desktop for Mac
https://docs.docker.com/desktop/install/mac-install/
![スクリーンショット 2023-02-06 3.23.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/f809d1b5-6f83-4527-28fe-c71e144138d2.png)


## 3-2.Visual Studio Code(VS Code)のインストール
Mac用のVisual Studio Codeをインストールする

Download Visual Studio Code
https://code.visualstudio.com/download

![スクリーンショット 2023-02-06 3.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/72c14d41-1beb-1878-a525-a4ddaa49868c.png)


## 3-3.VS Codeにプラグイン`Dev Containers`をインストール
VS Code上から拡張機能を検索し`Dev Containers`をインストールする。
Dev ContainerはVS Codeからコンテナ上でビルドやアプリの実行ができ、VS CodeからDockerのコンテナへリモートデバッグができます。
![スクリーンショット 2023-02-06 0.53.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/8ef763da-baa8-e1c4-e604-7f78221adaaa.png)

# 4.Dockerの環境を作る
## 4-1.devcontainerフォルダの作成
`.devcontainer`フォルダを作ります。
Devcontainerは、開発環境に必要なライブラリを格納します。
![スクリーンショット 2023-02-06 0.56.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/dff2d7fe-90aa-8893-9cab-6b1635850001.png)

## 4-2.devcontainer.jsonの作成
devcontainer.jsonを作成します。
Devcontainer で利用するコンテナーの構成や設定を格納するファイルです。

 ```devcontainer.json
{
	"name": "non-django",
	"dockerFile": "Dockerfile",
	"extensions": [
		"ms-python.python"
	],
}
 ```

## 4-3.docker-compose.ymlの作成
docker-compose.ymlを作成します。
Dockerの設定ファイルです。

```docker-compose.yml
version: '3'
services:
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
        - .:/code
    ports:
        - "8000:8000"
```

## 4-4.Dockerfileの作成
Dockerfileを作成します。
新規にDockerイメージを作成するための手順を記したテキストファイルです。

Dockerfile
```Dockerfile
FROM python:3
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
COPY . /code/
```

## 4-5.requirements.txtの作成
requirements.txtを作成します。
一括インストールしたいPythonパッケージをまとめたリストです。

```requirements.txt
Django
```

## 5.Docker Desktopを起動する
Docker Desktopを起動します。
クリックして起動する。
![スクリーンショット 2023-02-06 1.07.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b72a2ca2-4e49-f000-62fe-6597d2faa6c7.png)

![スクリーンショット 2023-02-06 1.05.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/18232a19-ef28-6751-e013-153ab5592b97.png)

## 6.VS Codeでコンテナのフォルダを選択する
VS Codeでコンテナのフォルダを選択します。
`Open Folder in Container`を選んで、コンテナのフォルダを選択します。
![スクリーンショット 2023-02-06 1.13.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/1ae9061f-486d-6e6e-5fe1-8161281937a5.png)


## 7.Djangoプロジェクトの作成
Django のプロジェクト (project) を作成します。
下記コマンドで、Djangoを構成するプロジェクトのコードを自動生成します。
$ `django-admin startproject` ★★★プロジェクト名★★★
例）
$ `django-admin startproject nonDjangoApp`
![スクリーンショット 2023-02-06 1.23.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/bb0a3852-c999-b578-8685-3649ff5f6b92.png)


## 8.Djangoアプリケーションの作成 
Django のアプリケーションを作成します。
下記コマンドで、Djangoを構成するアプリケーションのコードを自動生成します。
$ `python manage.py startapp` ★★★アプリケーション名★★★
例）
`python manage.py startapp nonSample2`

![スクリーンショット 2023-02-06 1.28.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ea44fc05-a728-e040-aee0-f174d8b89154.png)

## 9.Djangoプロジェクト

### 9-1.Djangoプロジェクトの`settings.py`の`INSTALLED_APPS`にDjangoプロジェクトを追加する
![スクリーンショット 2023-02-06 1.36.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/609bf9bc-9c7d-d933-1fcc-ac08715fa67f.png)


### 9-2.Djangoプロジェクトの`settings.py`の`TEMPLATES`にtemplatesに追加する

`'DIRS': [BASE_DIR, 'templates'],`
![スクリーンショット 2023-02-06 1.40.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ce4127a5-1ea8-cb26-f89a-2090a4633968.png)

### 9-3.Djangoプロジェクトに`urls.py`新規作成する
```urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('nonSample2.urls'))
]
```
![スクリーンショット 2023-02-06 1.45.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/2f56e20c-58a9-908b-9812-4be3038a3280.png)

## 10.Djangoアプリケーション

### 10-1.Djangoアプリケーションに`urls.py`新規作成する

URLで`/nonHello`にアクセスすると`funcHelloWorld`を実行する。

`http://127.0.0.1:8000/nonHello`

```urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('nonHello', views.funcHelloWorld),
]
```
![スクリーンショット 2023-02-06 1.53.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3073b3a7-b785-b532-f0a6-53ca7b590b2f.png)


### 10-2.Djangoアプリケーションの`views.py`修正する

`funcHelloWorld`が呼ばれたら、`index.html`を表示する

```views.py
from django.shortcuts import render

def funcHelloWorld(request):
    return render(request, 'index.html')
```
![スクリーンショット 2023-02-06 2.02.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c69849a7-7c66-21ef-3dc1-b02a1aa14166.png)

### 10-3.`templates`フォルダを作成する
`templates`フォルダを作成し、`index.html`を作成する
![スクリーンショット 2023-02-06 2.05.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/a2763560-ea3e-8b33-8229-ee3b39691ec2.png)

```index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Django nonSample2</title>
  </head>
  <body>
    <p>Hello World</p>
  </body>
</html>
```

![スクリーンショット 2023-02-06 2.06.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/fff22218-6419-2b61-e581-147fa8af02d5.png)

# 11.マイグレーションする
Djangoプロジェクト内で下記コマンドを叩く
$ `python manage.py migrate`

マイグレーション成功
![スクリーンショット 2023-02-06 2.14.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/d92c59fa-1075-4577-398a-608293af4ad0.png)

# 12.ローカルサーバー起動する
$ `python manage.py runserver`

![スクリーンショット 2023-02-06 2.17.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e63b7f65-5e5b-8f6c-1ed0-5a5c4c8cf702.png)

デフォルトには、何も設定していないので、何も表示しません。
`http://127.0.0.1:8000`
![スクリーンショット 2023-02-06 2.16.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/f294736a-89f5-42ee-21a0-3ec1abdc13cc.png)


URLを指定すると、Hello Worldを表示する

`http://127.0.0.1:8000/nonHello`
![スクリーンショット 2023-02-06 2.16.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/134e4a76-8007-5d7c-efa8-56b26cc1f58c.png)



# 12.バージョンを確認する方法
## 12-1.pythonのバージョン
$ python -V

## 12-2.djangoのバージョン
$ python -m django --version

![スクリーンショット 2023-02-06 2.21.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/3ae42846-4baf-1d57-e3bf-d5b734b6c233.png)