#daiizメモ

Cosenseに夢中

トップ > google app engine > Google App Engineでウェブページをホスティングしてみた

Google App Engineでウェブページをホスティングしてみた

google app engine tech

先日、ウェブページを公開する機会があった。
利用するホスティングサービスは、無料でも利用できる、 以下の２つで検討した。

  • Google Drive
    • 以前に使ったことがあるので、とても簡単にできることは知っていた
    • URLが格好悪くなってしまうのが残念
  • Google App Engine
    • URLはシンプルで良い

今回は勉強も兼ねて、Google App Engineを使用してみることにした。 実際に行ったことを思い出しながら、準備からウェブページの公開までをまとめた。

準備１

まずは、Google Cloud Platformの設定から始める

  • デベロッパーコンソールにアクセス

    • 初回はGoogle Cloud Platformの登録作業があるが、誘導に従っていけば大丈夫だった（初回登録はすでに終わらせていたため今回は行っていない）

  • 「プロジェクト」画面の「プロジェクトを作成」をクリック

    f:id:daiiz:20140413102247p:plain

  • 以下のようなパネルが表示される

    • プロジェクト名には適当にプロジェクトの名前を入力（後からも変更可能らしい）。ここで決めた名前はコンソールで使用されるだけ
    • プロジェクトIDは後から変更できないので慎重に決めたほうが良い。プロジェクト（アプリ）のURLは、
      プロジェクトID.appspot.com
      となる。（後で使うので忘れないようにどこかに控えておく）

f:id:daiiz:20140413102521p:plain

以上でコンソール側の準備は終了。

準備２

続いてPC側の準備を行う。ここからはWindows向けの内容となっている。
GAEにはPython、Java、PHP、Goバージョンが用意されているが、今回はPython版を使うことにした。（今回の目的はhtmlやjsをホストするだけなのでpythonは使わないが...）

インストールするものは２つある。通常のアプリと同様にダウンロード・インストールすれば良い。

  • Python 2.7.x

    • こちらのページから入手できる。「Windows X86-64 MSI Installer (2.7.6)」をダウンロードする。インストーラがダウンロードされたらダブルクリックでインストールを開始する。途中でPythonのインストール先を聞かれるので、任意の場所を指定する。これも控えておくと良い。私はC:\Python27\とした。
    • (注意）Pythonには3.x.xのバージョンもあるが、GAEの都合上、必ず2.7.xのものを入手すること。

  • Google App Engine SDK for Python

    • こちらのページから入手できる。「Google App Engine SDK for Python」の項目から「GoogleAppEngine-1.9.2.msi」をダウンロードする。インストーラがダウンロードされたらダブルクリックでインストールを開始する。こちらも途中でインストール先を聞かれるので、任意の場所を指定する。私はC:\Program Files (x86)\Google\google_appengine\とした。

以上でインストール作業は終了。

設定

スポンサーリンク


PC側で各種設定を行う。

  • 環境変数

    • PATHにPythonのパス（私の場合は;C:\Python27\）を追加する

  • Google App Engine Launcher

    • デスクトップにつくられたアイコンをダブルクリックしてGoogle App Engine Launcherを開く

      f:id:daiiz:20140413181634p:plain

    • 「Edit」メニューの「Preferences...」をクリック

      • 「Python Path」の欄にPythonのパス（C:\Python27\python.exe）を入力し「OK」をクリック

デプロイまで

  • Google App Engine Launcherのウィンドウの右下の「＋」ボタンをクリック
  • 以下のような設定ウィンドウが開く
    • 「Application Name」と「Parent Directory」を指定する。例えば、「Application Name」にengineapp、「Parent Directory」にC:\gae\を指定するとC:\gae\engineapp内に各種必要なファイルが自動生成される
    • 他の項目については下の画像のようになっていれば良い
    • 「create」をクリックして設定ウィンドウを閉じる

f:id:daiiz:20140413120239p:plain

  • 次に、先ほど指定したパス（例ではC:\gae\engineapp）内にpublic等の名前を付けたフォルダーを作る。この中に公開したいウェブページを構成するファイル（html、javascript、cssなど）を入れておく。今回は例としてindex.htmlのみを入れておいた。

  • 続いて、Google App Engine Launcherのウィンドウで先ほどの「Application Name」の項目をクリック

f:id:daiiz:20140413120933p:plain

  • ウィンドウ上部の「Edit]ボタンをクリック
    • app.yamlというファイルが開くのでこれを編集する。このファイルは設定時に指定したパス（例ではC:\gae\engineapp）内に入っている。
    • 該当する箇所を以下のように変更する
      • 「application」の項目を、「application: プロジェクトID」とする。*1
      • 「handlers」の項目を、次のようにする*2
 handlers:
- url: /
  static_files: public/index.html
  upload: /
- url: /
  static_dir: public
  • ここまで終えたら、ウィンドウ上部の「Deploy」ボタンをクリック
    • デベロッパーコンソールに登録したGoogleアカウントの「Email」と「Password」を入力して「OK」をクリック
    • 進捗を示す画面が開き、デプロイ作業が行われるので待つ。エラーが出ずに、「You can close this window now」が表示されたことを確認して終了。

ウェブで確認

  • ブラウザを開き、プロジェクトID.appspot.com にアクセスし、正しいページ*3が表示されていることを確認する。

追記

ローカルで確認する方法

実際にデプロイする前にローカルで確認することができる。

  • Google App Engine Launcherのウィンドウ上部の「Run」をクリック
    • ローカルでの実行を終了する場合は隣の「Stop」をクリック
  • 「localhost:ポート番号」にアクセス

Google App Engine Launcher のアップデート

Google App Engine Launcherの新バージョンが登場したときは、必ず更新したほうが良さそうです。 （新バージョンの存在を知らずにデプロイをしようと思ったらできませんでした。）
更新時に注意したことをまとめてみます。

  • 万一のことに備えて、プロジェクトのファイルのバックアップを取る。（私の場合は新バージョンのインストール時に自動で引き継がれましたが、念のため。）
  • インストールされているGoogle App Engine Launcherの古いバージョンをアンインストールする。これをアンインストールしないと、新バージョンをインストールできませんでした。
  • こちらから最新版をダウンロードして、インストールする。

*1:「プロジェクトID」は、§準備１でデベロッパーコンソールに登録したもの

*2:「public」は今回の例の場合である。公開したいHTMLファイルのパスによって書き換える。

*3:今回の例では「C:\gae\engineapp\public\index.html」