【Django3】Django3 + WSL + Python仮想環境でWebページを表示する

Udemyで [【徹底的に解説！】Djangoの基礎をマスターして、3つのアプリを作ろう！](https://www.udemy.com/course/django-3app/learn/lecture/23383980#overview) を受講した。その内容を中心に、WSLを用いたUbuntuの環境構築、そしてWebページを表示するまでの過程をまとめる。

# 環境構築: Windows Subsystem for Linux（WSL）

難しいことは考えずに早速Djangoを動かす環境を作り、webページを表示させる。

この記事ではWindows10のパソコンで、LinuxのディストリビューションであるUbuntuの環境を作成する。Linuxは多くの言語をサポートしているOSであり、無償のライブラリも豊富に存在することから、開発の現場では良く使われている。

### Ubuntuの基本設定

まず、WindowsでWSLを使えるようにするために有効化をおこなう。そのために
**コントロールパネル** → **プログラム** → **プログラムと機能** → **Windowsの機能の有効化または無効化** → **「Windows Subsystem for Linux」にチェックを入れて「OK」** → **PCの再起動**
という手順を踏む。

再起動が完了したら、ubuntuをインストール。

<img width="600" alt="Ubuntu 20.04 LTS" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854965/1e09cb21-8ab2-39d4-3841-8c995526bb58.png">

Ubuntu 20.04 LTSを用いた。

インストールが完了したら起動する。

するとUNIX usernameとpasswordの新規登録が要求されるので、一つ一つ埋めていく。処理が終わったらコマンドラインが表示され、Ubuntuが使用できる状態になる。

初期設定として、以下のコマンドをそれぞれ実行し、Ubuntuのupdateとupgradeをおこなう。ちなみに、updateはリポジトリを追加、削除したときに必ず実行するものであり、upgradeは通常のパッケージの更新にも使われる[^1]。また、`sudo`とは一時的にroot（管理者）の権限をもつものであり、システム全体の変更が可能になる。

```Ubuntu
$ sudo apt update
[sudo] password for sota_morita:
Hit:1 http://archive.ubuntu.com/ubuntu focal InRelease
Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [109 kB]
...

$ sudo apt upgrade
[sudo] password for sota_morita:
Reading package lists... Done
Building dependency tree
...
```

upgradeの方は少々時間がかかるため、早くDjangoを動かしたい気持ちを抑えながら待つ。

upgradeが終わったら一度WSLを閉じて再起動する。任意で日本語化をおこなう[^2]とわかりやすいが、ここでの解説は省略する。

### Visual Studio Codeの設定

以上でUbuntuの基本的な設定ができたため、次にエディタの設定をおこなう。ここではVisual Studio Codeを用いる。Visual Studio Codeのインストールは難しくない。ここでは初期設定のままであるという想定で進める。

Visual Studio Codeの初期設定ではLinuxは使用できないため、「Remote - WSL」という拡張機能をインストールする。

<img width="600" alt="Remote - WSL" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854965/075ee02e-9091-a42d-6d2e-b4306b42b907.png">

インストールが完了したら、Visual Studio Codeを再起動する。

再起動したら、**左下に表示される緑の「Open a Remote Window」** → **Remote-WSL: New Window using Distr...** → **Ubuntu-20.04**と操作を進めると、新しいウィンドウが開く。これで、Visual Studio CodeでUbuntuを使用できるようになる。

<img width="600" alt="Open a Remote Window" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854965/b5792092-0b25-980d-67f5-0c86d71648a4.png">

上部バーにある**Terminal** → **New Terminal**でターミナルを開くと、Ubuntuのコマンドラインが現れる。以後は、ここからさらに設定を進める。

もちろん、Ubuntu 20.04 LSのターミナルを使っても同じことができる。

### Pythonのインストール

仮想環境を作成するために、`python3-venv`のみをインストールすれば良いのかと思った[^3]が、うまくいかなかったので、先にPythonをインストールした。講義とPythonのバージョンを合わせたかったので、`pyenv`からPythonをインストールする。

このインストール方法は

[ubuntu 20.04 / 18.04 に pyenv をインストールする話【2020/11/23更新】](https://qiita.com/neruoneru/items/1107bcdca7fa43de673d)[^4]

を参考にしたため、こちらを参照。Pythonインストール後は、以下を実行して正しくインストールされているか確認した。

```
$ pyenv global 3.8.5

$ python --version
Python 3.8.5
```

### 仮想環境の構築

ここでは、`home/(username)/`の下に`test`というディレクトリを作成し、この中で仮想環境を作る。`test`に移動した後、次のコマンドを実施する。`django3_general`は今回作成する仮想環境の名前であり、任意に設定できる。

```
$ python3 -m venv django3_general
```

処理が終わった後、`ls`コマンドで`test`の中身を見てみると、新たに`django3_general`が作られていることがわかる。

```
$ ls
django3_general
```

### Djangoのインストール（仮想環境内）

これから仮想環境内でDjangoのインストールをおこなう。

まず、`test`内で以下のコマンドを実行して、仮想環境（ここでは`django3_general`）を立ち上げる。

```
$ source django3_general/bin/activete
```

するとコマンドラインの先頭に`(django3_general)`が表示される。この状態でDjangoをインストールする。

```
$ pip install django
Collecting django
  Downloading Django-3.1.5-py3-none-any.whl (7.8 MB)
     |████████████████████████████████| 7.8 MB 5.3 MB/s
...
```

```
$ pip list
Package    Version
---------- -------
asgiref    3.3.1
Django     3.1.5
pip        20.3.3
pytz       2020.5
setuptools 47.1.0
sqlparse   0.4.1
```

無事にDjangoがインストールされた。

# Djangoプロジェクトをスタートさせる

さて準備が整ったところで、作った仮想環境内でDjangoのプロジェクトをスタートさせる。新規プロジェクトを作成するには、仮想環境を立ち上げたうえで以下のコマンドを実行する。ここでは`test_project`というプロジェクト名にしたが、任意に変更できる。

```
$ django-admin startproject test_project
```

これでカレントディレクトリの配下に`test_project`という新たなディレクトリが作成される。`cd`で`test_project`に移り、`ls`で中身を確認すると、次のように`manage.py`というPythonファイルと`test_project`というディレクトリが存在する。（`test_project`の中に`test_project`がさらに作られている。）

```
$ cd test_project
$ ls
manage.py  test_project
```

この`manage.py`を使って、次のようにサーバーを立ち上げることができる。

```
$ python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...
...
（省略）
...
Django version 3.1.5, using settings 'test_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
```

結果に記載されているリンク`http://127.0.0.1:8000/`を`Ctrl + クリック`すると、次のような画面がWebブラウザに現れる。

<img width="600" alt="http://127.0.0.1:8000/" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/854965/4126a77b-43d1-c13c-81ae-0036f3165325.png">

つまり、Webブラウザ（Chromeなど）からの要求を、立ち上がったサーバーが受け、Djangoがそれに応答しているということである。この状態からプログラムを進めることにより、様々なWebアプリを開発することができる。

本記事では環境構築に主軸をおいたが、講義ではDjangoや仮想環境についてイメージがつきやすいように図や具体例を使ってわかりやすく解説されていた。また、講義のメインは環境構築ではなくDjangoを使ったアプリ開発であるため、DjangoでWebアプリを作ってみたい方は受講をおすすめする。

 [【徹底的に解説！】Djangoの基礎をマスターして、3つのアプリを作ろう！](https://www.udemy.com/course/django-3app/learn/lecture/23383980#overview) 



[^1]: [aptコマンドチートシート](https://qiita.com/SUZUKI_Masaya/items/1fd9489e631c78e5b007)
[^2]: [WSLのUbuntu環境を日本語化する](https://www.atmarkit.co.jp/ait/articles/1806/28/news043.html)
[^3]: [Installing pip/setuptools/wheel with Linux Package Managers](https://packaging.python.org/guides/installing-using-linux-tools/)
[^4]: [ubuntu 20.04 / 18.04 に pyenv をインストールする話【2020/11/23更新】](https://qiita.com/neruoneru/items/1107bcdca7fa43de673d)