Django環境をWin10 WSL Ubuntu18.04 + Anaconda + Apache2で構築する手順


Windows10 WSLのUbuntu18.04にDjango+Apacheの開発環境を作る手順をまとめます

## 手順

apache2がmod_wsgiを介してpythonにアクセス出来るようにします。また、WSLで使えるリモートIDEとしてVScodeを使えるようにしてやります。

1. anaconda3をインストール
2. djangoをインストール
3. djangoプロジェクトを作ってmigrate
4. apache2をインストール
5. mod_wsgiをインストール
6. apache2の設定ファイルに追記
7. vscodeを使えるようにする

WSLではsystemctlが使えないのでapacheの操作がちょっと変わる、anacondaを使う場合はmod_wsgiをpipでインストールしないと参照先設定を自分で変えなきゃいけなくなる、apache2.confの設定が分かりにくい、辺りが躓きやすいところだと思います。

## 1. WSLのインストール

WSLを有効にしてUbuntu18.04をインストールします
https://qiita.com/matarillo/items/61a9ead4bfe2868a0b86

更新します

```terminal:terminal
sudo apt update
sudo apt upgrade
```

## 2. Apache2のインストール

apache2とapache2-devをインストールして始動します

```terminal:terminal
sudo apt install apache2
sudo apt install apache2-dev
sudo /etc/init.d/apache2 start
```

これでapacheが http://localhost に待機する筈です。ブラウザで開けばドキュメントルートである /var/www/html/ にあるindex.htmlが開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d0cd47a0-9fc9-d046-6679-d8b7eb2c1b72.png)
止めるときはstopです

```terminal:terminal
sudo /etc/init.d/apache2 stop
```

設定変更を反映させる為に再起動するときはrestartします

```terminal:terminal
sudo /etc/init.d/apache2 restart
```

## 3. Anacondaのインストール

pyenvをインストールします

```terminal:terminal
git clone https://github.com/yyuu/pyenv.git ~/.pyenv
```
PATHを通します

```terminal:terminal
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.bashrc
echo 'export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.bashrc
echo 'eval "$(pyenv init -)"' >> ~/.bashrc
source ~/.bashrc
```

インストールできるanacondaのバージョンを確認します

```terminal:terminal
pyenv install -l | grep anaconda
```

選んだバージョンのanacondaをインストールします。以下では2020.02版をインストールしています。

```terminal:terminal
pyenv install anaconda3-2020.02
pyenv rehash
pyenv global anaconda3-2020.02
```
PATHを通します。

```terminal:terminal
echo 'export PATH="$PYENV_ROOT/versions/anaconda3-2020.2/bin/:$PATH"' >> ~/.bashrc
conda init
source ~/.bashrc
```

conda環境を作ります。以下ではdjangoという名前のpython3.7環境を作っています。xxxxがユーザー名です。

```terminal:terminal
conda create -n django python=3.7
echo 'export PYTHONHOME=/home/xxxx/.pyenv/versions/anaconda3-2020.02' >> ~/.bashrc
echo 'export PYTHONPATH=/home/xxxx/.pyenv/versions/anaconda3-2020.02/bin:/home/xxxx/.pyenv/versions/anaconda3-2020.02/lib/python3.7/site-packages' >> ~/.bashrc
conda create django
```

## 4. djangoのインストール

インストールしてバージョンを確認します

```terminal:terminal
pip install django
django-admin --version
```

プロジェクトを作って動かしてみます。ディレクトリを作ってdjango-admin startproject hogeとすればhogeという名前のプロジェクトを作れます。

```terminal:terminal
mkdir django
cd django
django-admin startproject proj1
```

作ったディレクトリ内に作られているmanage.pyをpythonから実行して簡易サーバーを動かして動作を確認します。

```terminal:terminal
cd proj1
python manage.py migrate
python manage.py runserver
```

http://localhost:8000 をブラウザで開くとdjangoのサンプルページが表示される筈です。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/d5ff3be2-02cd-2bea-10fc-0a084b86f538.png" width=50%>

## 5. mod_wsgiのインストール

mod_wsgiはaptからインストールする方法もありますが、aptでインストールしたmod_wsgiはanacondaではなくapt install pythonしたときのpythonを参照しにいく設定がデフォです。anacondaを使う場合はpipからインストールした方が簡単だと思います。

```terminal:terminal
pip install mod_wsgi
pip install mod-wsgi-httpd
```
PATHを通します。
xxxxはユーザー名です。

```terminal:terminal
echo 'export PATH=/home/xxxx/.pyenv/versions/anaconda3-2020.02/bin:$PATH' >> ~/.bashrc
source ~/.bashrc
```

これでmod_wsgiが動くようになった筈です。簡易サーバーを動かして動作を確認してみましょう。以下のコマンドでhttp://localhost:8000 に簡易サーバーが待機しますのでブラウザで開きます。

```terminal:terminal
mod_wsgi-express start-server
```
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/273f2dbd-ae83-faca-f47a-329ee5579e94.png" width=50%>
mod_wsgi-expressサーバーが正常に動作していれば上のようなサンプルページらしからぬ画像が表示されます。

最後にApache2の設定ファイルに書く為の情報を取得します。

```terminal:terminal
mod_wsgi-express module-config
```

```terminal:terminal
LoadModule wsgi_module "/home/xxxx/.pyenv/versions/anaconda3-2020.02/lib/python3.7/site-packages/mod_wsgi/server/mod_wsgi-py37.cpython-37m-x86_64-linux-gnu.so"
WSGIPythonHome "/home/xxxx/.pyenv/versions/anaconda3-2020.02"
```
上記をどこかにコピペしておきましょう。

## 6. apacheとmod_wsgiを紐づける

django公式の通りapache2.confを追記します。
https://docs.djangoproject.com/ja/2.0/howto/deployment/wsgi/modwsgi/

django projectを/home/xxxx/django/ に作成した場合は下のようになります。最初の2行がmod_wsgi-express module-configで表示される内容のコピペで、WSGIScriptAliasが作ったdjango projectのディレクトリ内に作られるwsgi.pyのPATH、WSGIPythonPathが作ったdjango projectのmanage.pyのあるディレクトリPATH、Direcotyが上記のwsgi.pyのディレクトリPATHとなります。

```vim:/etc/apache2/apache2.conf
LoadModule wsgi_module /home/xxxx/.pyenv/versions/anaconda3-2020.02/lib/python3.7/site-packages/mod_wsgi/server/mod_wsgi-py37.cpython-37m-x86_64-linux-gnu.so
WSGIPythonHome /home/xxxx/.pyenv/versions/anaconda3-2020.02

WSGIScriptAlias / /home/xxxx/django/proj1/proj1/wsgi.py
WSGIPythonPath /home/xxxx/django/proj1


<Directory /home/xxxx/django/proj1/proj1>
<Files wsgi.py>
Require all granted
</Files>
</Directory>
```
apacheの設定を変更しましたので再起動します。

```terminal:terminal
sudo /etc/init.d/apache2 restart
```
http://localhost をブラウザで開いて確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/f9b63823-2804-f91b-bd8a-32f29f0de349.png)
上のようになればOKです。

なお、apache2.confの内容が間違っていたり、インストール出来ていないパッケージがあったりすると以下のようにinternal server errorになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/dd3f6472-462b-7f3f-333a-532954e3f47c.png)
これだけだと原因が分からなくて辛いのでapacheのエラーログを見て判断しましょう。デフォルト設定のままなら以下で見られます。

```terminal:terminal
tail -f /var/log/apache2/error.log
```
だいたい何か入れ忘れているか、PATHが違っているかのどちらかだと思います。

## 7. VScodeで開発出来るようにする

WSLはGUIがありませんが、VScodeのWSL extensionを使うとGUIで開発出来るようになります。Windows10にVScodeをインストールしたあとWSL extensionを有効にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/4877987d-e9a8-c32b-82c3-241da41beb92.png)
以下のコマンドでWSLからVScodeを起動すると、WSL側からWindows側のVS codeを動かしに来てくれるようです。

```terminal:terminal
cd test
code .
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/c190d651-fe81-f062-6fb2-cb6116263f12.png)

ちなみにpermissionの制限はUbuntuそのままですので code .を実行したときの権限での編集となります。例えばapahceの静的ファイルが置いてある /var/www/html/ はownerがrootなので、ユーザーアカウントから変更しようとすると下の画像のようなエラーが出ます。ownerを変更すれば変更可能になりますが、セキュリティ的にそれで良いのか僕は知らないので誰か教えてください。ちなみにsudo code .は実行できないようです。

```terminal:terminal
Unable to write file 'vscode-remote://wsl+ubuntu-18.04/var/www/html/test.html' (NoPermissions (FileSystemError): Error: EACCES: permission denied, open '/var/www/html/test.html')
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/277233/af0f4b16-f8da-32f0-93cf-8fe8c45cf335.png)





## 参考

https://docs.djangoproject.com/ja/2.0/howto/deployment/wsgi/modwsgi/
https://codelab.website/anaconda-django/
https://qiita.com/itisyuu/items/dafa535adc8197208af1
https://blog.capilano-fw.com/?p=369