Help us understand the problem. What is going on with this article?

Django×PinaxでWebサービス入門⑤|インターネット公開

More than 1 year has passed since last update.

この記事の内容

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

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

Overall Structure_04.png

  • ファイアーウォールのセットアップ
  • 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/に接続できるはずです。

FireShot Capture 40 - example.com [localhost] I pinax-project-account - http___150.95.139.172_.png

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

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

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

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

# yum install -y nodejs

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

# npm install

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

# npm run watch

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

FireShot Capture 41 - example.com [localhost] I pinax-project-account - http___150.95.139.172_.png

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

次回

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

mtitg
データサイエンスの企業でWebエンジニアやってます
datamix
データサイエンスに関わる最適なサービスを継続的に提供することで、企業・地域・社会に属するひとりひとりが、客観的に意思決定する力を高め、自由に、そして平等に活躍できる世界を実現します。
https://datamix.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした