【保存版】Apache WebサーバーでDjangoアプリを公開

（最終更新月：2021年10月）

前回の記事では、Ubuntu搭載のリモートコンピューターでWebサーバーの構築をしました

当記事では、構築したApache Webサーバーで

Djangoで作成したWebアプリをネット上に公開する方法

を解説します

「DjangoアプリをWebに公開したい！」

「自作したWebサーバーでアプリを見れるようにしたい！」

という方へ向けた記事となります

リモートコンピューターへSSH接続が完了しましたら次章より早速始めていきましょう！

「そもそも、リモートコンピューターを準備してない！」という方はまずはこちらをご覧ください！

✔YouTube解説動画

当記事の内容は動画を見ながら進めると、約15分程度で完了します。

動画ならではの情報も解説しているので、記事と一緒にご覧ください。

動画の概要欄には、単元ごとのコードを紹介しているgithubページも載せています。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

【始めに】rootユーザーへ変更しよう

通常のユーザーでリモートコンピューターへSSH接続をしている方は下記のコマンドでrootユーザーのパスワードを設定・変更します

sudo passwd root

パスワードの設定が終わったら、rootユーザーに変更しましょう

su -

root@リモートコンピューター名:

と表記されたらOKです！

githubと連携しよう

トップディレクトリーへ移動しましょう

cd /

こちら↓を参考に認証鍵を作成→githubへ公開鍵を登録します（既にやり方をご存知の方はスキップしましょう！）

SSH接続の設定ができましたら、下記の通りアドレスをコピーして、

コマンドを入力し、

git clone コピーしたアドレス（git@github.com: ...)

プロジェクトをクローンします

作成した「nippoApp」フォルダがあれば完了です

（日報アプリ開発シリーズ↓で開発した日報アプリです）

必要なフォルダを作成する

githubからクローンしたフォルダ「nippoApp」へ移動します

いくつか必要なフォルダを作っていき、最終的にはこのようになっていればOKです！

nippoApp
├── LICENSE
├── README.md
├── auth #以下含め新たに作成
│   ├── name_db.cnf
│   ├── pswd_db.cnf
│   ├── secret_key.cnf
│   └── user_db.cnf
├── requirements.txt
├── site #以下含め新たに作成
│   ├── logs
│   └── public
└── src

「よくわからない！」という方はこちら↓を参考に作ってください

必要なパッケージをインストール

フォルダ構成が整いましたら、パッケージをインストールします

apt install python3-pip

pip3 install virtualenv

virtualenvフォルダの作成

virtualenv -p python3 venv

作成後はこうなります↓

nippoApp
├── LICENSE
├── README.md
├── auth 
├── requirements.txt
├── site 
│   ├── logs
│   └── public
├── src 
└── venv #追加されました

Pythonパッケージのインストール

仮想環境をアクティベートし、requirements.txtからパッケージをインストールします

 source venv/bin/activate

 pip install -r requirements.txt

postgreSQLの設定

当記事では、postgreSQLをデータベースとしご説明していきます

下記の記事を参考に設定を進めてください

Djangoの設定を変更しよう

今のままだと、ローカル環境での設定がそのまま反映されてしまいます

デプロイ環境専用のファイルを作り、環境に合わせた設定へ変更していきます

「base.py」をデプロイ環境でのsettingsとする

src > main > settings へ移動します

まずは「local.py」をコピーし、「base.py」を作成します

cp local.py base.py

「base.py」をデプロイ環境に合わせた変更を加えていきます

「base.py」内での変更点

変更点は下記の通りです

ALLOWED_HOST
DEBUG
STATIC_ROOT
MEDIA_ROOT

ALLOWED_HOST

IPアドレス
ドメイン（取得している場合）

を追記します

IPアドレス・ドメインは必ず ” “ で囲いましょう！

【例】

ALLOWED_HOST = ["192.168.11.14"]

DEBUG

デプロイ環境では必ず「False」にします

DEBUG = False

STATIC_ROOT、MEDIA_ROOT

STATIC_ROOT = PARENT_DIR / 'site/public/static'
MEDIA_ROOT = PARENT_DIR / 'site/public/media'

STATIC_ROOTは追記、MEDIA_ROOTは書き直し、になります

「STATIC_DIR、STATIC_ROOTなどがよくわからない！」という方はこちらを参考にしてください！

settingsの変更に伴って

static、media用のフォルダを作成しよう

site > public内に「static」「media」フォルダを作成しましょう

また、ローカル環境でのメディアフォルダ「media_root」には「pages」というフォルダ、ロゴ「D-Repo.png」がありますので、同じように作成、コピペしましょう！

site
├── logs
└── public
    ├── media
    │   └── pages
    │       └── D-Repo.png
    └── static

情報を隠す

「auth」フォルダ内のファイルにそれぞれ必要な情報を保存します

auth
├── name_db.cnf
├── pswd_db.cnf
├── secret_key.cnf
└── user_db.cnf

migration, collectstatic, runserver

ひとまず設定変更はここで終了です

下記3つのコマンドを使ってエラーの確認、表示の確認をしていきます

マイグレーション migration

python manage.py makemigrations

python manage.py migrate

問題なければ、スーパーユーザーを作成しておいても良いかもしれません

CSSを集める collectstatic

デプロイ環境では、様々な場所に保管されているCSS等を一箇所に集めて読み込む設定をします

そのために今後もCSSに変更を加えるたびに下記のコマンドをすることを忘れずに！

python manage.py collectstatic

問題なければ次はポート8000を使ってサーバーを立ち上げます

サーバーを立ち上げる runserver

python manage.py runserver 0.0.0.0:8000

単なる

$ python manage.py runserver

だとブラウザからIPアドレスによるアクセスができませんのでご注意ください！

エラー発生？！

「アクセスできません」とエラーが出た場合は、ポート8000をufwで許可します

ufw allow 8000

アクセスしてみよう！

192.168.11.14:8000

ひとまず見れるようになりましたが、CSSがぐちゃぐちゃです

アドミンページにアクセスしても、

CSSが適用されていませんね！

ただしここでは、表示されていればOKです！

原因はApache Webサーバー側の設定にありますので、次章を進めていくと自然と直りますのでここでは気にせず次章へ！

apacheの設定を変更しよう

上記のエラーを修正するのはもちろんですが、そもそもWebページを表示するのはポート8000ではありません

通常のウェブサイトはポート80を使っていますのでポート指定をせずにアクセスしてみると、

192.168.11.14

Apacheのデフォルトページが表示されてしまいます

（※「ポートってなに？？」という方はこちらをご覧ください）

ポート80でアクセスするにはApacheの設定を変更していく必要があります

apacheのconfファイルを書き換えていく方法を説明していきます

confファイルの場所

/etc/apache2/sites-available

現在使用しているのはこの中の「000-default.conf」というファイルです

このファイル自体を書き換えるのでも構いませんが、今回は別ファイルを作成し読み込む方法にて解説をします

別記事でApache2の設定方法については詳しく解説する予定です

新しいファイルを開くまで

フォルダに移動します

 cd /etc/apahce2/sites-available

念のためバックアップも取ります

cp 000-default.conf 000-default.bak

新しいファイルを作成します「nippoApp.conf」

cp 000-default.conf nippoApp.conf

ファイル名は何でも構いませんが、必ず「.conf」を拡張子にすることを忘れずに！

ファイルを開きます

nano nippoApp.conf

中身を書き換えていきましょう

nippoApp.confの中身

中身は下記の通りです

<VirtualHost *:80>
	ServerAdmin sample@example.com
        DocumentRoot /nippoApp

	ErrorLog /nippoApp/site/logs/error.log
	CustomLog /nippoApp/site/logs/access.log combined

	alias /static /nippoApp/site/public/static
	<Directory /nippoApp/site/public/static/>
		Require all granted
	</Directory>

        alias /media /nippoApp/site/public/media
        <Directory /nippoApp/site/public/media/>
                Require all granted
        </Directory>

	<Directory /nippoApp/src/main/>
		<Files wsgi.py>
			Require all granted
		</Files>
	</Directory>

	WSGIDaemonProcess nippoapp python-path=/nippoApp/src python-home=/nippoApp/venv
	WSGIProcessGroup nippoapp
	WSGIScriptAlias / /nippoApp/src/main/wsgi.py
</VirtualHost>

上記のフォルダ、