AWSでWebアプリケーションを公開

以前作ったアプリがあるので、お試しでAWSで公開してみようと思いました。
サーバー構成は、nginxをリバースプロキシとして使用し、バックエンドはPythonのgunicornで動かします。

※今回は事前にバックエンド、フロントエンドのソースコードは用意できている前提で進めます。

EC2の設定

AWSにサインインし、EC2>インスタンスと進んでいくと「インスタンスを起動」が表示されるため、それを押します。
最低限、設定が必要なところは「キーペア」と「ネットワーク設定」なのでそこの解説をします。

※インスタンスタイプはt2.microが無料枠対象なのでこだわりなければおすすめ

キーペア

今回は新しくキーペアを作成、設定はそのままでいいのでキーペア名を入力し、「キーペアを作成」
作成するとpem(あるいはppk)ファイルが保存されます。

ネットワーク設定

セキュリティグループをルールを編集し、22(SSH)と80(HTTP)ポートにアクセスを可能とします。
※今回はテスト環境のため、任意の場所からのアクセス許可とします。

以上を設定し「インスタンスを起動」で設定完了。
インスタンス概要からパブリックipアドレスを控えてきます。

アプリケーションの公開設定

EC2への接続

まずは、先ほど起動したEC2にsshで接続します(ここで鍵が必要になってきます)。
今回はTeraTermを使用しますが、sshで接続できるのであればなんでも問題ないです。

特に設定していなければ、ユーザは「ec2-user」、パスワードはなしで大丈夫です。

接続後にscp、gitなどを用いてサーバを立てるのに必要なファイル群をEC2内に用意します。

linuxの場合

ssh -i 〇.pem ec2-user@パブリックIP

nginxの設定

下記コマンド実行でnginxをインストールします。

sudo yum update -y
sudo yum install nginx -y

成功したのち、設定ファイルの編集を行います。

sudo vi /etc/nginx/nginx.conf

設定ファイルを開き、httpのserver箇所を以下のように編集してください。

    server {
        listen 80;

        server_name 〇.〇.〇.〇; # あなたのパブリックIPアドレス

        location / {
                root /home/ec2-user/build; # ビルドファイルのパス
                try_files $uri /index.html;
        }

        location /api/ {
                proxy_pass http://127.0.0.1:5000;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto $scheme;
        }
     }

その後、nginxを起動します。

sudo systemctl start nginx

バックエンドの設定

pythonのインストールを行います。

sudo yum install python3 python3-pip -y

その後、必要なパッケージのインストールを行います。下は一例ですので、それぞれ必要に応じてパッケージを入れます。

pip install flask flask-cors gunicorn

サーバー起動のスクリプトが記載されているファイル(app.pyなど)があるディレクトリまで移動し、以下のコマンドでサーバを起動します。

nohup gunicorn -w 4 -b 127.0.0.1:5000 app:app &

バックエンドの設定がうまくいっていれば、サーバが起動します。

動作確認

http://パブリックIPでアクセスします。
成功していた場合、作成したアプリが立ち上がります。
※もし、接続に失敗していた場合はgunicorn、nginxのログなどで原因を探してみてください。

バックエンド側も動作していました。

まとめ

AWSを使ってWEBアプリケージョンを公開までやってみました。
今回はお試しということでセキュリティ面には考慮してませんが、次はそのあたりも考慮してやってみたいです。

余談

今回公開したアプリでフロントエンド側で使用したライブラリです。
blocly

チュートリアルなどもあるため、ビジュアルプログラミングに触ってみたい人も入りやすいと思います。