Udemyで【徹底的に解説！】Djangoの基礎をマスターして、3つのアプリを作ろう！を受講した。その内容を中心に、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をインストール。

Ubuntu 20.04 LTSを用いた。

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

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

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

$ 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を閉じて再起動する。任意で日本語化をおこなう²とわかりやすいが、ここでの解説は省略する。

Visual Studio Codeの設定

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

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

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

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

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

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

Pythonのインストール

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

このインストール方法は

ubuntu 20.04 / 18.04 に pyenv をインストールする話【2020/11/23更新】⁴

を参考にしたため、こちらを参照。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ブラウザに現れる。

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

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

【徹底的に解説！】Djangoの基礎をマスターして、3つのアプリを作ろう！

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