静的コンテンツの配信

アプリケーション オペレーションの結果として変更されることがない、HTML ページ、CSS ファイル、画像などの静的コンテンツを安全に配信する方法を説明します。シンプルで静的な HTML ウェブサイトは、App Engine の無料枠を利用して無料で実行できることがよくあります。

このページとサンプルは、ユーザーが投稿をアップロードできる簡単なブログ アプリケーションの学習用サンプルを拡張したものの一部です。Go プログラミング言語と基本的なウェブ開発に精通している方を対象として説明します。最初から開始するには、Go を使用したアプリのビルドをご覧ください。

料金

このチュートリアルの実行に伴う費用はありません。このサンプルアプリを実行するだけであれば、無料の割り当てを超過することはありません。

始める前に

Go を使用したアプリのビルドから開始した場合、このセクションはスキップしてください。それ以外の場合は、次の操作を行います。

  1. プロジェクトとアプリケーションの設定の「始める前に」に記載されている作業を行います。

  2. この例では、プロジェクトとアプリケーションの設定の最終成果物である gophers-1 サンプルにコードを追加します。

    gophers-1 とその依存関係をローカルマシンにダウンロードします。

    go get -u -d github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1/...
    
  3. gophers-1 ディレクトリに移動します。

    cd $GOPATH/src/github.com/GoogleCloudPlatform/golang-samples/appengine/gophers/gophers-1
    

アプリケーションを構造化する

このサンプル プロジェクトの構造は次のとおりです。

  • go-app/: プロジェクトのルート ディレクトリ。

    • app.yaml: App Engine アプリケーションの構成設定。
    • main.go: アプリケーション コード。
    • index.html: ホームページを表示するための静的 HTML ファイル。
    • static/: 静的ファイルを格納するディレクトリ。
      • style.css: HTML ファイルの外観をフォーマットするスタイルシート。
      • gcp-gopher.svg: Gopher 画像。

静的ファイルを設定する

  1. プロジェクトのルート ディレクトリに index.html ファイルを作成し、次の行を追加します。

    <!doctype html>
    <html>
    <head>
      <title>The Gopher Network</title>
      <link rel="stylesheet" type="text/css" href="/static/style.css">
    </head>
    <body>
    
    <h1>The Gopher Network</h1>
    
    <img id="logo" src="/static/gcp-gopher.svg" width="100">
    </body>
    </html>
    

  2. プロジェクトのルート ディレクトリに static という名前のフォルダを作成します。

    mkdir static
    
  3. gcp-gopher.svg 画像リンクを右クリックして [名前を付けてリンク先を保存] を選択し、画像を static ディレクトリにダウンロードします。

  4. プロジェクトの static ディレクトリに style.css を作成して index.html の外観を変更し、次のスタイル設定を追加します。

    body {
      font-family: Arial, sans-serif;
      color: blue;
    }
    

テンプレートと静的ファイルを配信する

画像や CSS など変更のないコンテンツについては、静的ファイルを配信するほうが効率的です。

静的ファイル用のハンドラを作成し、そのコンテンツを配信します。

  1. 前に作成した app.yaml ファイルでは、静的ファイルを含むディレクトリが指定されています。app.yaml のハンドラ セクションで、- url: /.* という行の上に次の行を追加します。

    # If the path is empty, show static index.html file
    - url: /
      static_files: index.html
      upload: index.html
    
    # Otherwise, find file in static directory
    - url: /static
      static_dir: static

    これで、handlers セクションでは URL に対して 3 つのハンドラが定義されます。App Engine が URL /static に対するリクエストを受け取ると、static ディレクトリにあるファイルにパスの残りの部分がマッピングされます。適切なファイルが見つかると、そのファイルのコンテンツがクライアントに返されます。

    URL マッピングと、app.yaml で指定できるその他のオプションの詳細については、app.yaml リファレンス ドキュメントをご覧ください。

  2. これで index.html からコンテンツが配信されるようになったため、main.go に含まれる次の各行は必要ありません。これらを削除してください。

    • "fmt"(インポートのリスト内)
    • fmt.Fprint(w, "The Gopher Network: This is being hosted by App Engine.")indexHandler 関数内)

アプリケーションをローカルで実行する

Cloud SDK に含まれているローカル開発用サーバー(dev_appserver.py)でアプリケーションを実行し、テストします。

  1. 次のコマンドを使用して、アプリケーションの app.yaml が配置されているプロジェクトのルート ディレクトリから、ローカルの開発用サーバーを起動します。

    dev_appserver.py app.yaml
    

    ローカルの開発用サーバーが起動し、ポート 8080 でリクエストをリッスンします。問題が発生する場合は、ここをクリックしてください。

  2. ウェブブラウザで http://localhost:8080/ にアクセスしてアプリを表示します。

    完成版

ローカル開発サーバー(dev_appserver.py)の実行

ローカルの開発用サーバーを実行するには、ディレクトリをフルパスで指定して dev_appserver.py を実行するか、PATH 環境変数に dev_appserver.py を追加します。

  • 元の App Engine SDK をインストールした場合、ツールは次の場所に配置されています。

    [PATH_TO_APP_ENGINE_SDK]/dev_appserver.py
    
  • Google Cloud SDK をインストールした場合、ツールは次の場所に配置されています。

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/bin/dev_appserver.py
    

    ヒント: Google Cloud SDK ツールを PATH 環境変数に追加し、シェルでコマンドの補完を有効にするには、次のコマンドを実行します。

    [PATH_TO_CLOUD_SDK]/google-cloud-sdk/install.sh
    

ポート番号の変更方法など、ローカルの開発用サーバーの実行について詳しくは、ローカルの開発用サーバーのリファレンスをご覧ください。

コードを変更する

ローカルの開発用サーバーはプロジェクト ファイルの変更を監視しており、コードに変更が加えられると、アプリケーションを再コンパイルして再起動します。

  1. では試してみましょう。開発用サーバーを起動したまま、index.html を編集して、「The Gopher Network」を別の語句に変更してみます。

  2. http://localhost:8080/ を再読み込みして変更を確認します。

アプリケーションをデプロイする

app.yaml が配置されているプロジェクトのルート ディレクトリから以下のコマンドを実行して、App Engine にアプリケーションをデプロイします。

gcloud app deploy

アプリケーションを表示する

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

gcloud app browse

次のステップ

これで、ウェブ フロントエンドが Go バックエンドと対話するアプリケーションを構築できました。

次に、HTTP POST を使用する基本的なフォームを作成して、ユーザーが送信したコンテンツを HTML テンプレートに表示する方法を紹介します。

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

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

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