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

リージョン ID

REGION_ID は、アプリの作成時に選択したリージョンに基づいて Google が割り当てる省略形のコードです。一部のリージョン ID は、一般的に使用されている国や州のコードと類似しているように見える場合がありますが、このコードは国または州に対応するものではありません。2020 年 2 月以降に作成されたアプリの場合、REGION_ID.r が App Engine の URL に含まれています。この日付より前に作成されたアプリの場合、URL のリージョン ID は省略可能です。

詳しくは、リージョン 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 でウェブサイトをホストするには、その前に次の作業を行う必要があります。

  1. 新しい Google Cloud コンソール プロジェクトを作成するか、使用する既存プロジェクトのプロジェクト ID を取得します。

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

  2. Google Cloud CLI をインストールして初期化します。

    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 ファイルを作成します。

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

  3. 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 CLI でデフォルトとして初期化したものに代わる Google Cloud コンソール プロジェクト 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 でホストされたウェブサイトを配信する。