ミニマムなVue.jsコンポーネントプログラミングその5(動的なデータ取得:サーバ準備)


その1:ミニマムなシングルコンポーネントVue
その2:ミニマムなルータ
その3:ミニマムなサブコンポーネント
その4;ミニマムなデータ取得(静的)

ときたので、今回は動的なデータ取得ですが、まずはデータを取得できるサーバを準備します。

WebAPIサーバを外部に立てて、WebAPIコールで画面に表示するデータを更新します。
画面サーバを立てるわけではないので、CakePHPとか、ララベルとかそういった
リッチサーバフレームワークは不要なので、軽量かつ直感的にコード実装できる
Flaskを使いたいと思います。(RestFullなWebAPIを実装するためのライブラリも充実してるようだし)

Flaskが動作して外部公開できるサーバなら何でもよく、無料レンタルサーバとか、選択肢は
いろいろあるのでしょうが、ここは流行りのAWS上にサーバ立てしようと思います。
AWSへのアカウント登録の説明ははしょりますが、ベーシック(無料枠)で登録しました。

NC2インスタンスの生成/起動

なにはなくとも、まずこれです。
いろんなAWSサービスも、立てたEC2インスタンスの上で動作しています。
サーバサービスを実装/実行する仮想マシンインスタンスって感じでしょうか。

EC2ダッシュボードでEC2のインスタンスを生成します。
AMI(Amazon マシンイメージ)は「Ubuntu Server 18.04 LTS」を選択しました。

セキュリティグループは以下のように設定しておきます。

  • SSH:TCP:22:マイIP
  • カスタム TCP:TCP:5000:マイIP

ここが大事なところで、個人開発目的なので、自分しかアクセスできない
ようにしておきます。ポート5000は後で説明するFlaskが公開するポート番号です。
このように設定しておくことで、以下の制約がかけられます。

  • sshによるログインは自分PCからのみ。
  • NC2内で立てたWebサーバ等に対するアクセスは自分PCからのみ。

セキュリティグループには後から設定追加できるので、随時アクセス可能な
範囲を広げていくこともできます。

【注意】
wimax等の無線サービスを使っている場合、自分PCのIPアドレスは毎回変動します。
その場合、NC2のセキュリティグループを再編集してください。
SSH、カスタムTCPともに、マイIPを選択し直すと、その時点でのIPアドレスを
自動取得してくれます。EC2のインスタンスは再起動する必要はなく、即反映されます。

このことを知らずにssh接続にいくと、Connection timedoutと
怒られて困惑することになります。

生成したインスタンスを起動すると、インスタンスの状態が

  • running
  • 2/2のチェックに成功しました

になるので、sshで接続します。

接続ボタンを押すと、sshを使うならこんなコマンドだよ、と画面に
ポップアップ表示されるのでコピペして打ち込みます。

ssh -i キーペアファイル ubuntu@パブリックDNS名

パブリックDNS名はインスタンス画面に表示されています。
キーペアはインスタンス生成のどっかで自動生成促されるので、それです。
自分PCのどっかに物理ファイル保存されているはずです。

インスタンスを停止しておけば課金されないので、使わないときは
インスタンスを停止するのがよいでしょう。(小心者)
たぶん、一年間の無料枠においては、上げっぱなしでも課金されない・・
と思いますが、いつ改定されるかもしれずだし。
うっかり2つインスタンスを起動すると2倍の速度で無料枠を使い切るので
注意しましょう。

インスタンスを停止すると作ったファイルは削除されるのでは? 
と一瞬心配しましたが、Readme.txtとか作って、停止→起動→接続すると
無事残ってました。世の中に流れている、S3にログ保存、ってなんなんだろう。

ちなみに選択したAMIの説明文は以下です。
Ubuntu Server 18.04 LTS (HVM),EBS General Purpose (SSD) Volume Type. Support available from Canonical (http://www.ubuntu.com/cloud/services).

EBSとは、「EC2 ブロックストレージボリューム」のことで、
https://aws.amazon.com/jp/ebs/pricing/
を確認すると、
「AWS 無料利用枠には、Amazon Elastic Block Store (EBS) のストレージ 30 GB、I/O 200 万回、スナップショットストレージ 1 GB が含まれています。」
とあるので、ちゃんと保存されるんでしょう。
ストレージ容量は全然構わないんですが、しかし気になるのはI/O 200万回です。
AWSのトップページ=>サービス=>Billingで「無料じゃなくなるかもよ」という
警告が出るのを日々、確認するとよいでしょう。

NC2インスタンス環境整備

接続したコンソールで確認してみます。
python3 => 入ってる。
pip => 入ってない。

足りないもの入れていきます。

sudo apt-get update <== 大事
sudo apt-get install python-pip
sudo apt-get install python3-pip
pip3 install beautifulsoup
pip3 install flask

Flaskサーバ起動

コード作成(main.py)


from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello():
    return 'Hello,Flask on AWS!'

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

flaskはデフォルトでは外部公開されていないので、host='0.0.0.0'で公開します。
といっても、EC2のセキュリティグループ設定でマイIPしか接続できませんが。
以下のようにFlask起動します。

python3 main.py

AWSで立てたマイWebサーバへアクセス

http://パブリックDNS:5000と打つ。
パブリックDNSは、sshでログインしたときに使ったやつです。

おぉ、出た・・感動。
AWSってなんか敷居が高そうな気がしてたけど、

NC2インスタンス生成/起動
インスタンス内でFlask起動
外部PCからアクセス

たったこれだけです!!(本質的には)

次回はWebAPI実装していきたいと思います。