GCE ubuntu django vue の環境をデプロイしてとりあえず uWSGI で公開してい見る

2021年9月1日

表題の環境で構築します。
uWSGI での公開がメインなので django や vue は詳しく書けていません。

参考

インストールする

必要なものをインストールします。

sudo apt -y install python3-pip python-dev default-libmysqlclient-dev git npm

vue-cli をインストールします。

sudo npm install -g @vue/cli

pip で必要なライブラリをインストールします。

sudo pip3 install uwsgi django pip3 install mysqlclient

アプリを clone する

home 配下に project_name というリポジトリをクローンします。

cd /home/
git clone https://github.com/xxx/xxx.git project_name

階層は下記の通りです。
backend が django で frontend が vue です。

└── project_name
    ├── backend
    │   ├── config
    │   ├── manage.py
    │   ├── app
    │   └── templates
    ├── frontend
    │   ├── node_modules
    │   ├── package-lock.json
    │   ├── package.json
    │   ├── vue.config.js
    ......

uWSGI の動作を確認する

まずは uWSGI だけでブラウザに Hello World を表示してみます。 

cd /home/project_name/backend/
vi test.py

下記の通りに記述します。

# test.py
def application(env, start_response):
    start_response('200 OK', [('Content-Type','text/html')])
    return [b"Hello World"]

ポートの 8000 番で uWSGI を起動します。

cd /home/project_name/backend/
uwsgi --http :8000 --wsgi-file test.py

外部ＩＰが 111.222.333.444 だとした場合にブラウザで下記にアクセスすると Hello World が表示されます。 

http://111.222.333.444:8000/

これで uWSGI が動いていてポート 8000 が解放されている確認が取れました。

アプリと連携する

npm ci コマンドで node_modules を作成し、npm run build でビルドします。

cd /home/project_name/frontend/
sudo npm ci
sudo npm run build

django も外部ＩＰを許可するために settings.py を下記の通りに記述します。

# settings.py
ALLOWED_HOSTS = ['111.222.333.444']

uwsgi を起動します。
※人によってここは config ではなくプロジェクト名ですが、wsgi.py がある階層で実行します。

cd /home/project_name/backend/
uwsgi --http 0.0.0.0:8000 --module config.wsgi

エラーがなければOKです。
静的ファイルがルーティングできていなかったので画面が真っ白でした。
静的ファイルを参照できるようにします。

静的ファイルを設定する

静的ファイルを集める階層を指定します。

# setings.py
STATIC_ROOT = '/home/project_name/backend/static'

指定した階層に静的ファイルを集めます。

python3.7 manage.py collectstatic

uWSGI のコマンドを設定ファイルから実行できるようにする為、さらに静的ファイルを参照できるようにする為下記の通り uwsgi.ini を作成します。

cd /home/project_name/backend/
vi uwsgi.ini

中身を下記の通りに記述します。

[uwsgi]
chdir = /home/project_name/backend
module = config.wsgi:application
static-map = /static=/home/project_name/backend/static
http = 0.0.0.0:8000

uWSGI を実行します。

uwsgi --ini uwsgi.ini

ブラウザで再度下記のＵＲＬにアクセスします。

http://111.222.333.444:8000

ちなみに uWSGI をバックグラウンドで動かすには下記のコマンドを実行します。

uwsgi --ini uwsgi.ini &

止める場合は下記のとおりです。
プロセスの削除は「マスタプロセス」（一番上）のみkillすればすべて消えるとの事です。

ps -aux | grep uwsgi
user     1538  0.0  0.7  15588  7456 pts/1    T    14:35   0:00 vi uwsgi.ini
user     2025  2.2  3.6  45768 36792 pts/1    S    14:40   0:00 uwsgi --ini uwsgi.ini
user     2026  0.0  1.0  25284 10700 pts/1    S    14:40   0:00 uwsgi --ini uwsgi.ini
user     2149  0.0  0.0   4836   884 pts/1    R+   14:40   0:00 grep uwsgi
kill -QUIT 2025

ハマったところ

ufw でポートを解放していたのですが、これがうまくいかず GCP 上のファイアウォールの設定でポートを解放したらうまくいきました。

YouTube

2021年9月1日