開発サーバとして便利なGoogle App Engine Launcher
フロント（htmlやjsなど）を開発するのに
簡単にローカルWebサーバとして使えるので重宝しているGoogle App Engine Launcher。
ある程度準備すれば
ブラウザで検証したいときにHTML等の静的ファイルをぽいぽいっと置いて
ポチポチっとするだけで確認できたり、無料でデプロイしたりできます。
とても簡単、便利なのですが
なかなかマイナーでレクチャーするのが手間なので、ここで紹介します。
Google App Engine
Googleが提供するクラウドWebサーバ。
AWSなどと違ってPaaS（Platform as a Service）。
OSを意識せず、特定の言語(Python, Golang等)でのみ構築可能なWebサーバ。
開発言語に制限があるが、逆にOS設定、運用コストが減るというもの。
クラウドといえばAWSが有名で、PaasなGAE（Google App Engine）はなかなかマイナーです。
でも今回はPythonとかGolangとか使いません。
Google App Engine LauncherはGAE開発に必要なツールで
ローカルGAEサーバ機能、デプロイ機能があります。
このローカルGAEサーバ機能を、開発サーバとして使います。
また、デプロイ機能で、ファイルをWebにアップしてテスト、デバッグするのにも利用できます。
準備
Python
Python2.7が必要です。
本家からPython 2.7.xをダウンロードし、インストールしましょう。
www.python.org
Google App Engine SDK
Install an SDK for App Engine | App Engine Documentation | Google Cloud
Google App Engine SDK for PythonからOSに合ったものをダウンロードし実行してください。
最初に、PC環境の自動チェックが走ります。そのあいだ「Next」は非活性です。しばらく待ちましょう。
その後は、どんどん「Next」で進めましょう。
「Run Launcher」でGoogle App Engine Launcherが起動すれば準備完了です！
使い方
アプリの作成
GAEアプリを作成します。
File > Create New Application
アプリケーション名とアプリの置き場所を指定して、作成（Create）します。
設定
そのままではPythonサーバとして動いてしまうので
HTMLやJSといった静的ファイルを置けば動くように変えます。
エクスプローラ等でアプリの置き場所に移動して、app.yamlを開きます。
- url: .* script: main.app libraries: - name: webapp2 version: "2.5.2"
の部分を、以下に書き換えてください。
- url: / static_dir: up
アプリ直下(app.yamlと同階層)にupフォルダを作成し、
この中に開発 or 検証したいHTMLファイルを置いていけばOKです。
別フォルダがよければ「static_dir: up」の部分を変更すればOKです。
例えば「static_dir: ../../design/files」とかも設定できます。
ローカルサーバ
ローカルWebサーバの起動方法について説明します。
- 作成したアプリをクリック
- 「Run」をクリック
- 左側の黒アイコンが緑アイコンになれば起動成功です
- 「port」の値にブラウザでアクセスすれば、置いたHTMLファイルを閲覧できます
ここでは、先ほど作ったupフォルダ直下に「hello.html」を配置しました。
なので「http://localhost」＋「:8080/」＋「hello.html」にアクセスします。
ブラウザでHTMLを閲覧できました。
これで、ガシガシJSでajax書いたり、CSS変更したり開発ができます。
あと、停止は、「Stop」で停止します。
デプロイ用GAEアプリ登録
Google App Engineには無料枠があります。
これはクレジットカード不要で、GmailアカウントがあればOKで、登録は楽です。
無料枠は、1ヶ月あたりアクセスが上限に達するとアクセスできなくなるだけで、お金を請求されることはありません。
ブラウザで閲覧して検証する程度で、上限に達したことはありません。
GAEアプリの登録をします。
https://appengine.google.com/
「Create Application」をクリック。
- アプリ名を入力
- 「Check Availability」で利用可能かチェック
- アプリタイトルを入力
- 「Create Application」をクリック
前述の「アプリの作成」のアプリ名が使えなくて別名にした場合はapp.yamlを
application: appengine ↓ application: hogehogehogeapplication
のように変更しましょう。
デプロイ
「Deploy」をクリック。
Gmailアドレスとパスワードを入力。
「code 0」「You close this window now.」と表示されればデプロイ成功です。
「http://」＋「アプリケーション名」＋「.appspot.com/」＋「hello.html」にアクセスし表示できました。
Tips
偽.yaml
ドメイン（アプリ名）を任意に決められるとはいえ
GAEにデプロイしたファイルをそのまま放置しておくのも気持ち悪いものです。
そこで、GAEコンソールからアプリ自体を落とすこともできますが
面倒なのでちょっとした方法を紹介します。
まず、app.yamlの横に#fake_app.yamlファイルを用意します。
#fake_app.yamlファイルの中身を以下のようにします。（アプリ名は任意）
application: hogehogehogeapplication version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: /favicon\.ico static_files: favicon.ico upload: favicon\.ico
つまり「static_dir: up」部分を省いたapp.yamlになります。
そして
この状態でLauncherから「Deploy」します。
アクセスできなくなりました。
最後に
