Google App Engine を使用して静的ウェブサイトをホストできます。静的ウェブページには HTML、CSS、JavaScript などのクライアント側の技術を使用できます。App Engine では無料版が用意されているため、App Engine で静的サイトをホストすると、従来のホスティング プロバイダを利用するよりもコストを削減できます。
App Engine でホストされるサイトは、appspot.com などの [my-project-id].appspot.com サブドメインでホストされます。サイトをデプロイした後、App Engine でホストされたウェブサイトに独自のドメイン名をマッピングできます。
はじめに
Google App Engine でウェブサイトをホストするには、その前に次の作業を行う必要があります。
-
新しい GCP Console プロジェクトを作成するか、使用する既存プロジェクトのプロジェクト ID を取得します。
ヒント: gcloud コマンドライン ツールを使用して、既存プロジェクトのプロジェクト ID のリストを取得できます。
-
Google Cloud SDK をインストールして初期化します。
GCP Console プロジェクト ID の一覧表示
コマンドラインから以下を実行します。
gcloud projects list
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
オプション フラグ:
--projectフラグを含めて、GCP Console の代替プロジェクト ID を、gcloudツールでデフォルトとして初期化した ID に指定します。例:--project [YOUR_PROJECT_ID]-vフラグを含めてバージョン ID を指定するか、そうでなければ 1 つ 生成されます。例:-v [YOUR_VERSION_ID]
コマンドラインからアプリをデプロイする方法については Python アプリをデプロイするをご覧ください。
アプリケーションの表示
ブラウザを起動して https://[YOUR_PROJECT_ID].appspot.com でアプリを表示するには、次のコマンドを実行します。
gcloud app browse
次のステップ
カスタム ドメインから App Engine でホストされたウェブサイトを提供します。
