この記事の内容

前回は以前作ったTODOアプリを外部のVPSサーバーにデプロイするところまで行いました。
まだインターネット公開されていないので、今回はそのためのファイアーウォールやApacheの設定を行っていきます。

今回の対象は、全体像で見てみるとこの緑色で囲った部分です。

ファイアーウォールのセットアップ
ApacheとWsgiのセットアップ
npmでフロント周りの静的ファイルを生成

ということをしていきます。

ファイアーウォールのセットアップ

ファイアーウォールの設定をしていきます。
http通信を許可します。

# firewall-cmd --permanent --zone=public --add-service=http

ファイアーウォールを再起動しておきます。

# systemctl restart firewalld

ApacheとWsgiのセットアップ

httpd.confファイルを編集して、Apacheがアプリケーションを外部に公開できるようにします。

# vim /etc/httpd/conf/httpd.conf

httpd.confを開いたら、下記をファイルの最下部に追加します。

/etc/httpd/conf/httpd.conf

LoadModule wsgi_module /usr/lib64/python3.6/site-packages/mod_wsgi/server/mod_wsgi-py36.cpython-36m-x86_64-linux-gnu.so
WSGIScriptAlias / /var/www/cgi-bin/todo/todo/wsgi.py
WSGIPythonPath /var/www/cgi-bin/todo

Alias /site_media/static/ /var/www/cgi-bin/todo/static/dist/

<Directory /var/www/cgi-bin/todo/todo>
Order deny,allow
Allow from all
</Directory>

ここでは、

wsgiモジュールの場所をApacheに伝える
URL(今回の場合http://150.95.139.172)とアプリケーションのルートディレクトリをつなぐ
静的ファイル用のURL(今回の場合http://150.95.139.172/site_media/static/)とアプリケーション内の静的ファイルを格納しているディレクトリをつなぐ
アプリケーションのルートディレクトリ以下を公開

ということをしています。

Apacheを再起動します。

# systemctl restart httpd

念の為PostgreSQLも再起動します。

# systemctl restart postgresql

ここまでくるとブラウザからhttp://150.95.139.172/に接続できるはずです。

接続できました。まだscssをコンパイルしてcssファイルを作成するという部分ができていないので、見た目が崩れてしまっています。

npmでフロント周りの静的ファイルを生成

scssコンパイルのために、ローカル同様npmを使えるようにします。今回は簡易的にインストールしますが、実際にはnvmを使ってしっかりバージョン管理を行う必要があります。

nodejsをyumでインストールします。

# yum install -y nodejs

npmが使えるようになっています。フロントにて必要なライブラリを取得します。

# npm install

watchコマンドで静的ファイルを生成します。

# npm run watch

先程と同様にhttp://150.95.139.172/に接続してみます。

ちゃんとcssファイルが生成されているため、レイアウトが整いました。
これでようやくWebアプリケーションを本格的に開発するためのローカル・本番(VPSサーバー)の構築が整いました。

次回

次回は作成しているTODOアプリにTODOアプリとしての機能を追加し、Webサービスとして成立するようにしていきます。