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

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

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

はじめに

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

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

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

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

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

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

    runtime: php55
    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

オプション フラグ:

  • --project フラグを含めて、GCP Console の代替プロジェクト ID を、gcloud ツールでデフォルトとして初期化した ID に指定します。例: --project [YOUR_PROJECT_ID]
  • -v フラグを含めてバージョン ID を指定するか、そうでなければ 1 つ 生成されます。例: -v [YOUR_VERSION_ID]

コマンドラインからのアプリのデプロイの詳細は、PHP アプリをデプロイするをご覧ください。

アプリケーションの表示

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

gcloud app browse

次のステップ

カスタム ドメインから App Engine でホストされたウェブサイトを提供します。

このページは役立ちましたか?評価をお願いいたします。

フィードバックを送信...

PHP の App Engine スタンダード環境