App Engine での静的ウェブサイトのホスティング

リージョン ID

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

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

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 でホストされたウェブサイトに独自のドメイン名をマッピングできます。

始める前に

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

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

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

ヒント: gcloud コマンドラインツールを使用して、既存プロジェクトのプロジェクト ID のリストを取得できます。
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 ファイルを作成します。

プロジェクト ID と同じ名前を持つディレクトリを作成します。プロジェクト ID は Console で確認できます。
作成したディレクトリに、app.yaml という名前のファイルを作成します。
app.yaml ファイルを編集し、ウェブサイト要件に基づいてハンドラ要素を追加します。たとえば、Python ランタイム用の app.yaml ファイルは、次のように作成できます。
```
runtime: python39

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]

コマンドラインからアプリをデプロイする方法については、アプリケーションのデプロイをご覧ください。

アプリケーションの表示

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

gcloud app browse

次のステップ

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