LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-02

その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でログインしたときに使ったやつです。

範囲を選択_016.png

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

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0