Google App Engine で静的ウェブサイトをホストする

リージョン ID

REGION_ID は、アプリの作成時に選択したリージョンに基づいて Google が割り当てる省略形のコードです。一部のリージョン ID は、一般的に使用されている国や州のコードと類似しているように見える場合がありますが、このコードは国または州に対応するものではありません。既存のアプリでは省略可能ですが、まもなく、新しいアプリのすべてにおいて App Engine の URL に REGION_ID.r を含めることが必須となる予定です。

移行がスムーズに行われるように、リージョン ID を使用するよう App Engine を徐々に更新しています。Google Cloud プロジェクトがまだ更新されていない場合、アプリにリージョン ID が表示されません。ID は既存のアプリでは省略可能なため、リージョン ID が既存のアプリで使用可能になったときに、URL の更新や他の変更を行う必要はありません。

詳しくは、リージョン ID をご覧ください。

Google App Engine を使用して静的ウェブサイトをホストできます。静的ウェブページには HTML、CSS、JavaScript などのクライアント側の技術を使用できます。App Engine では無料枠が用意されているため、App Engine で静的サイトをホストすると、従来のホスティングプロバイダを利用するよりもコストを削減できます。

App Engine でホストされるサイトは、[my-project-id].uc.r.appspot.com などの REGION_ID.r.appspot.com サブドメインでホストされます。サイトをデプロイした後、App Engine でホストされたウェブサイトに独自のドメイン名をマッピングできます。

始める前に

Google App Engine でウェブサイトをホストするには、その前に次の作業を行う必要があります。

新しい Cloud Console プロジェクトを作成するか、使用する既存プロジェクトのプロジェクト ID を取得します。

プロジェクトページに移動

ヒント: gcloud コマンドラインツールを使用して、既存プロジェクトのプロジェクト ID のリストを取得できます。
Google Cloud SDK をインストールして初期化します。

SDK をダウンロードする

Google App Engine でホストするウェブサイトの作成

プロジェクトの基本構造

このガイドではプロジェクトに次の構造を使用しています。

app.yaml: App Engine アプリケーションの設定を構成します。
www/: HTML、CSS、画像、JavaScript などの静的ファイルのすべてを保存するディレクトリ。
- css/: スタイルシートを保存するディレクトリ。
  - style.css: サイトの外観を書式化する基本的なスタイルシート。
- images/: 画像を保存する省略可能なディレクトリ。
- index.html: ウェブサイトのコンテンツを表示する HTML ファイル。
- js/: JavaScript ファイルを保存する省略可能なディレクトリ。
- その他のアセットディレクトリ。

`app.yaml` ファイルの作成

app.yaml ファイルは、App Engine に URL を静的ファイルにマッピングする方法を指示する構成ファイルです。次のステップでは、ユーザーがウェブサイトを訪問したときに www/index.html を読み込むハンドラを追加します。すべての静的ファイルは www ディレクトリに保存されて、そこから呼び出されることになります。

アプリケーションのルートディレクトリに app.yaml ファイルを作成します。

プロジェクト ID と同じ名前を持つディレクトリを作成します。プロジェクト ID は Console で確認できます。
作成したディレクトリに、app.yaml という名前のファイルを作成します。

app.yaml ファイルを編集し、次のコードをファイルに追加します。

runtime: python27
api_version: 1
threadsafe: true

handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /(.*)
  static_files: www/\1
  upload: www/(.*)

app.yaml ファイルに関するリファレンス情報については、app.yaml リファレンスドキュメントをご覧ください。

`index.html` ファイルの作成

ユーザーがウェブサイトのルートページに移動したときに配信される HTML ファイルを作成します。このファイルを www ディレクトリに保存します。

<html>
  <head>
    <title>Hello, world!</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>
      This is a simple static HTML file that will be served from Google App
      Engine.
    </p>
  </body>
</html>

アプリケーションを App Engine にデプロイする

アプリケーションファイルをデプロイすると、ウェブサイトが App Engine にアップロードされます。アプリをデプロイするには、app.yaml ファイルが保存されているアプリケーションのルートディレクトリから次のコマンドを実行します。

gcloud app deploy

省略可能なフラグ:

gcloud ツールでデフォルトとして初期設定したものに代わる Cloud Console プロジェクト ID を指定するには、--project フラグを指定します。例: --project [YOUR_PROJECT_ID]
-v フラグを含めると、バージョン ID を指定できます。指定しなかった場合は自動的に生成されます。例: -v [YOUR_VERSION_ID]

コマンドラインからアプリをデプロイする方法について詳しくは、Python 2 アプリをデプロイするをご覧ください。

アプリケーションの表示

ブラウザを起動して https://PROJECT_ID.REGION_ID.r.appspot.com でアプリを表示するには、次のコマンドを実行します。

gcloud app browse

次のステップ

カスタムドメインから App Engine でホストされたウェブサイトを配信する。