前回まではJSひろばのVueアプリとDjangoのAPIを大まかに作成しました。

今日はフロントエンドのVueのデプロイよりも先にDjangoのアプリをデプロイして実際のAPIを使ってVueからAPIコールができるようにします。実際にデプロイをしたあとに細かなセキュリティの設定やAPIのデータを入力していくようにします。

作業日2022年12月14日
作業にかけた時間5時間
合計作業時間16時間
作業内容ドメインの取得
Ubuntuサーバーの設定
サーバーのユーザー設定
PostgreSQLのインストール
リポジトリのクローン
Djangoのデプロイ
Nginxの設定
SSLの取得

ドメインの購入

ドメインは〇〇.comとかウェブサイトのアクセスリンクになる部分ですね。今回は個人的なお勧めのNameCheap.comからドメインを購入します。APIの方もIPアドレスからAPIのエンドポイントを作成しようと思いましたがセキュリティの面からもドメインを使った方が良いとのことなのでDjangoとVueのアプリケーションのどちらにもドメインを割り当てます。

では、asameshi-api.cloudとjs-hiroba.comを購入します。合計で年間12ドルなので安いですね。SSL Certificate（HTTPS）は無料でサーバー側で設定できるのでここで購入する必要はありません。

サーバーにドメインを登録

今回もまた、個人的なお勧めのLinodeサーバーを使います。東京にサーバーを作りましたので先ほど購入したドメインをサーバーに登録しましょう。ではNameCheapのドメイン設定からカスタムDNSを設定します。

ところがLinode側で登録すると以前に設定していたサーバーと紐づけされてエラーになってしまいました。

これは私の方では何もできないので一旦、サポートにお願いをして待ちます。

その間にIPアドレスからデプロイしちゃいます。

サーバーの設定

まずはLinodeでサーバーを作ります。Linodeサーバーを月額500円で始めるという記事があるのでそちらを参考にしましょう。

サーバーを作成したらLinode側でドメインを登録します。

同じようにapiで使う方のドメインも登録しておきます。

サーバーにSSHで接続

詳しいSSHの使い方はこちらの記事で説明しています。サーバー構築で必ず役に立つので理解しておきましょう。

ではSSHクライアントを使ってサーバーに接続しましょう。SSHクライアントのMobaXtermを使います。

Djangoのデプロイ

詳しいDjangoのデプロイの仕方はこちらで説明しています。

同じような手順で設定していきましょう。

sudo apt update

#userをrootから変更（本当はrootでログインできないように設定するべきですが）
su dan

#ユーザーを作りたい場合
sudo adduser ユーザー名
sudo adduser dan
usermod -aG sudo ユーザー名（ユーザーにsudo権限を与える）
usermod -aG sudo dan
sudo adduser dan www-data

#Pythonのバージョンを確認
python3 --version

#必要なライブラリのインストール
sudo apt install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx curl

この後にデータベースを作成しましょう。

詳しくはDjangoのデプロイの仕方でカバーしているので確認しておきましょう。

次に仮想環境の設定です。

sudo -H pip3 install --upgrade pip

sudo -H pip3 install virtualenv

次にGunicornのテストをしました。

gunicorn --bind 0.0.0.0:8000 js_hiroba.wsgi

でNginxのコンフィグはこのようになりました。

server {
    listen 80;
    server_name asameshi-api.cloud www.asameshi-api.cloud;
    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/dan/JS-Hiroba-Backend;
    }
    location / {
        include proxy_params;
        proxy_pass http://unix:/run/js-hiroba-backend.sock;
    }
}

ではNignxをテストして、サービスをリロードします。

sudo nginx -t

sudo systemctl restart nginx

ドメインをsettings.pyに登録していなかったのでエラーが出ました。しかしこれでDjangoのエラーのページが出たので正しくNginxとGunicornが動いていることが確認できますね。

これでサーバーを再起動してAPIのURLにアクセスすると問題が解決していることが確認できました。

しかしURLを見ても分かるようにまだHTTPのままなのでSSL Certificateを取得して安全なサイトにするようにします。

この作業はLet’s EncryptでSSL取得の記事を見て行いましょう。

ここで、安いプランのシェアサーバーだったせいか、SSLのセットアップに少し苦難し、２時間余計に時間がかかってしまいました。

特に、DNSを使ったSSL証明のチャレンジ、HTTPからHTTPSへのリダイレクトなど初めての作業だったのでとても良い経験になりました。

　JSひろば