AWS Cloud9 IDE内でWebアプリケーションを表示する

AWS Cloud9 IDE内で、実行中のWebアプリケーションを表示することができます。

今回は、Flaskを利用して確認します。
FlaskはPythonの軽量なWebアプリケーションフレームワークです。

Python3の構築は下記エントリを参照してください。

Flaskのインストール

Flaskをpip経由でインストールします。

$ sudo pip-3.6 install flask
Collecting flask
  Downloading
略
Successfully installed Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1 click-6.7 flask-1.0.2 itsdangerous-0.24

コードの作成

確認用のテストコードを作成します。
メニューバー [File] - [New From Template] - [Python File] を選択します。

タブウィンドウに新規エディタが表示されるので、下記のコードを貼り付けて保存します。
ポートは8080を指定します。

test.py

from flask import Flask
app = Flask(__name__)

@app.route("/")
def hello():
    return "Hello World!"

if __name__ == "__main__":
    app.run(debug=True, port=8080)

IDE内からWebアプリケーションを表示するには、ポート8080を指定する必要があります。
それ以外のポート番号だとエラーが表示されます。

※ドキュメントだとポート番号8081、8082も許可してるっぽいけど、エラーになる。なぜ？

Webアプリケーションの表示

1. [Run]ボタンを選択
2. Webアプリケーションが実行 (Running on http://127.0.0.1:8080/)
3. [Preview]ボタンを選択
4. [Preview Running Application] を選択

IDE上にアプリケーションプレビュータブが開かれ、Hello World! と表示されました。

アプリケーションプレビュータブ

1. プレビューをリロードします。
2. アドレスバー。URLを入力します。
3. プレビューを新しいウィンドウで開きます。

参考

• Flask
• AWSドキュメント
  • AWS Cloud9 Integrated Development Environment (IDE) で実行中のアプリケーションをプレビューする