開発サーバとして便利なGoogle App Engine Launcher

f:id:MSitter29:20150328155109j:plain
フロント(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

Download the Google App Engine SDK - Google App Engine — Google Cloud Platform
f:id:MSitter29:20150328155234j:plain
Google App Engine SDK for PythonからOSに合ったものをダウンロードし実行してください。

f:id:MSitter29:20150328155248j:plain
最初に、PC環境の自動チェックが走ります。そのあいだ「Next」は非活性です。しばらく待ちましょう。

その後は、どんどん「Next」で進めましょう。
f:id:MSitter29:20150328155305j:plain
f:id:MSitter29:20150328155315j:plain
f:id:MSitter29:20150328155327j:plain
f:id:MSitter29:20150328155336j:plain
f:id:MSitter29:20150328155350j:plain
f:id:MSitter29:20150328155407j:plain
「Run Launcher」でGoogle App Engine Launcherが起動すれば準備完了です!
f:id:MSitter29:20150328155419j:plain

使い方

アプリの作成

GAEアプリを作成します。
File > Create New Application
f:id:MSitter29:20150328155554j:plain

f:id:MSitter29:20150328155606j:plain
アプリケーション名とアプリの置き場所を指定して、作成(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サーバの起動方法について説明します。
f:id:MSitter29:20150328155630j:plain

  1. 作成したアプリをクリック
  2. 「Run」をクリック
  3. 左側の黒アイコンが緑アイコンになれば起動成功です
  4. 「port」の値にブラウザでアクセスすれば、置いたHTMLファイルを閲覧できます

ここでは、先ほど作ったupフォルダ直下に「hello.html」を配置しました。
なので「http://localhost」+「:8080/」+「hello.html」にアクセスします。
f:id:MSitter29:20150328155804j:plain
ブラウザでHTMLを閲覧できました。
これで、ガシガシJSでajax書いたり、CSS変更したり開発ができます。

あと、停止は、「Stop」で停止します。

デプロイ用GAEアプリ登録

Google App Engineには無料枠があります。
これはクレジットカード不要で、GmailアカウントがあればOKで、登録は楽です。

無料枠は、1ヶ月あたりアクセスが上限に達するとアクセスできなくなるだけで、お金を請求されることはありません。
ブラウザで閲覧して検証する程度で、上限に達したことはありません。

GAEアプリの登録をします。
https://appengine.google.com/

f:id:MSitter29:20150328155918j:plain
「Create Application」をクリック。

f:id:MSitter29:20150328155948j:plain

  1. アプリ名を入力
  2. 「Check Availability」で利用可能かチェック
  3. アプリタイトルを入力
  4. 「Create Application」をクリック

前述の「アプリの作成」のアプリ名が使えなくて別名にした場合はapp.yaml

application: appengine
↓
application: hogehogehogeapplication

のように変更しましょう。

デプロイ

f:id:MSitter29:20150328160037j:plain
「Deploy」をクリック。

f:id:MSitter29:20150328160049j:plain
Gmailアドレスとパスワードを入力。

f:id:MSitter29:20150328160104j:plain
「code 0」「You close this window now.」と表示されればデプロイ成功です。

f:id:MSitter29:20150328160112j:plain
「http://」+「アプリケーション名」+「.appspot.com/」+「hello.html」にアクセスし表示できました。

Tips

偽.yaml

ドメイン(アプリ名)を任意に決められるとはいえ
GAEにデプロイしたファイルをそのまま放置しておくのも気持ち悪いものです。

そこで、GAEコンソールからアプリ自体を落とすこともできますが
面倒なのでちょっとした方法を紹介します。


まず、app.yamlの横に#fake_app.yamlファイルを用意します。
f:id:MSitter29:20150328161859j:plain
#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になります。

そして

  1. 「app.yaml」を「#app.yaml」にリネーム
  2. 「#fake_app.yaml」を同階層に複製
  3. 複製したファイルを「app.yaml」にリネーム

f:id:MSitter29:20150328161915j:plain

この状態でLauncherから「Deploy」します。
f:id:MSitter29:20150328161928j:plain
アクセスできなくなりました。

最後に

  1. 「app.yaml」(中身はfake_app.yaml)を削除
  2. 「#app.yaml」を「app.yaml」にネームを戻す

別PCからアクセス

GAE Launcherは開発用なのでlocalhostからのアクセスしか受け付けません。
しかしVM(Modern.IEなどで)等、同じイントラネット内の色々なブラウザからテストしたい場合があります。

以下の設定でローカルIPアドレスからアクセスできるようになります。
「Edit」 > 「Application Setting」
f:id:MSitter29:20150328163420j:plain
f:id:MSitter29:20150328163435j:plain
--host=「IPアドレス
で自PCのIPアドレスを指定します。

f:id:MSitter29:20150328163445j:plain
localhostではなくIPアドレスからアクセスできました。
この設定をすると逆にlocalhostからはアクセスできないので、注意しましょう。