入門: 静的コンテンツの配信

Google App Engine スタンダード環境から HTML ファイル、CSS、画像などの静的コンテンツを安全に配信する方法について説明します。

始める前に

  1. 開発環境を構成し、App Engine プロジェクトを作成します。

  2. ウェブサイトにカスタム ドメイン名を使用する場合は、プロジェクトにカスタム ドメインを追加します。

ウェブページを配信する

App Engine では、HTML ページなどの静的コンテンツや画像などのメディアを配信できます。静的コンテンツは、JSP やサーブレットとして実行されないコンテンツです。

次の例は、ウェルカム メッセージを表示する基本的な HTML ページです。

<!DOCTYPE html>
<html>
  <head>
    <title>The App Engine Blog</title>
  </head>
  <body>
    <h1>Welcome to the App Engine Blog</h1>
    <p>This is being served by App Engine!</p>
  </body>
</html>

静的ファイルの配置場所

静的に配信するファイルは、アプリの webapp ディレクトリ内に置きます。フォルダも使用できますが、すべてのファイルパスと URI は webapp ディレクトリからの相対パスになります。

静的ファイルの場所を選択したら、その場所を appengine-web.xml ファイル内の <static-files> 要素で定義する必要があります。

次の例は基本的な appengine-web.xml の構成で、これにより、webapp ディレクトリ内のすべての HTML ファイルが静的ファイルとして扱われます。

<appengine-web-app xmlns="http://appengine.google.com/ns/1.0">
  <threadsafe>true</threadsafe>
  <runtime>java8</runtime>
  <static-files>
    <include path="/**.html" >
    </include>
  </static-files>
</appengine-web-app>

複数の <include path> 要素を使用して、異なるディレクトリやファイルタイプを設定することもできます。前の例を変更してみましょう。

<static-files>
  <include path="/**.html" >
  </include>
  <include path="/images/**.jpg" >
  </include>
</static-files>

webapp/images/ ディレクトリにある .jpg 拡張子のファイルはすべて静的ファイルとして扱われます。

上の例では、webapp/images ディレクトリから logo.jpg を表示する場合は、<img> タグに参照元 URI <img src="/images/logo.jpg"> を設定します。

すべての静的コンテンツに HTTPS を適用する

App Engine ではコンテンツの配信に HTTP または HTTPS を使用できますが、HTTPS を使用してください。保護された URL を設定するには、プロジェクトの web.xml に <security-constraint> 要素を追加する必要があります。サンプル <security-constraint> をここに示します。

<security-constraint>
    <web-resource-collection>
        <web-resource-name>blog</web-resource-name>
        <url-pattern>/*</url-pattern>
    </web-resource-collection>
    <user-data-constraint>
        <transport-guarantee>CONFIDENTIAL</transport-guarantee>
    </user-data-constraint>
</security-constraint>

<transport-guarantee>CONFIDENTIAL</transport-guarantee> を使用すると、すべてのリクエストが静的コンテンツの HTTPS URI に自動的にリダイレクトされます。

App Engine へのデプロイ

Maven を使用して App Engine にアプリをデプロイします。

プロジェクトのルート ディレクトリに移動し、次のように入力します。

mvn package appengine:deploy -Dapp.deploy.projectId=PROJECT_ID

PROJECT_ID は、Google Cloud プロジェクトの ID に置き換えます。pom.xml ファイルですでにプロジェクト ID を指定している場合は、実行するコマンドに -Dapp.deploy.projectId プロパティを含める必要はありません。

Maven によってアプリがデプロイされた後、次のように入力すると、新しいアプリでウェブブラウザのタブが自動的に開きます。

gcloud app browse

次のステップ

静的ファイルを使用して、App Engine から画像、CSS、静的 HTML コンテンツを配信する方法を学習しました。知識を広げるために、HTML フォームでユーザーデータを処理する方法を学習しましょう。

前へ
開発環境の設定
次へ
HTML フォームデータの処理