Google Cloud Storage でサクッとティザーサイトを公開する

Google Cloud Storage を使って簡単に静的 Web サイトを公開する方法

Kunihiko Kido
VELTRA Engineering
8 min readDec 12, 2018

--

Photo by Angel Origgi

VELTRA のクニです。久しぶりの投稿です。

ここ1年で、ざっくり4つのサービスをリリースしてきました。

  • 問い合わせ自動ラベリングシステム(社内システム向け)
  • 過去問い合わせレコメンドシステム(社内システム向け)
  • サポートサイト(https://support.veltra.com/jp/support/)
  • 旅メディア(https://emo.travel)

これら全て Google Cloud Platform (以下 GCP)を使っています。

そして、今回新たに 5つ目のサービスを近日リリースします。リリースに先立ってティザーサイトを公開しました。

急にティザーサイトを公開することになったのですが、これも GCP を使ってサクッと環境構築してサクッと公開できました。便利な世の中ですね。

今回は、GCP を使った静的 Web サイトの構築についてお話ししたいと思います。

ティザーサイトを公開する環境の要件

単に静的な Web サイトを公開できれば良いのですが、環境周りで言えば以下の3つ条件を満たす必要があります。

  • カスタムドメインで公開できること
  • HTTPS でアクセス可能なこと
  • HTTP のアクセスは HTTPS へリダイレクトする

最近は Chrome ブラウザを使っていると、暗号化されていないサイトは警告が表示されてしまうなど、静的な Web サイト公開であっても会社のブランディングやイメージのことを考えると、HTTPS は必須ですよね。

ティザーサイトを公開する環境

ティザーサイトのアーキテクチャーは以下のような構成になりました。対象のドメインは Amazon Route 53 で管理しているため DNS サーバーは、別システムとなっています。

シンプルですね。ロードバランサーをクライアント側に配置しているのは、HTTPS でアクセス可能にするためです。Google Cloud Storage は、カスタムドメイン向けのSSL証明書の設定ができません。そのため、このような構成になっています。Google のロードバランサーを使う代わりに、Cloudflare を使った事例もあるようですね。

構成はシンプルですが、サービスの制限や仕様を知ってないと、構築するステップが分かりづらいと感じました。

システム構築の流れ

主な構築の流れは以下のステップです。

  1. Google Cloud Storage の設定
  2. ロードバランサーの設定
  3. DNS の設定

Google Cloud Storage の設定

Google Cloud Storage の主な設定は、HTML を配置するためのバケットを作成して、ウェブサイトの設定、アクセス権限の設定が必要です。

「ウェブサイトの設定」が可能なバケットは、公開するドメイン名と同じ名前で作成する必要があります。さらにバケット名は GCP 全体で一意な名前となるため、そのドメイン所有者以外が勝手にドメイン名のバケットを作成できないように、制限されています。

ドメイン名を持つバケットを作成できるユーザー

  • ドメインまたは親ドメインの確認済みの所有者。
  • ドメインまたは親ドメインの確認済みのサイト所有者。

例えば、 colorier.veltra.com と言う名前のバケットを作成するには、colorier.veltra.com または、veltra.com ドメインの確認済みの所有者であることが必要です。

ドメインの所有権の確認

どうやって、そのドメインの所有者であることを証明するのかと言うと、Google Search Console を使用します。以下のページを参考にしてください。

ティザーサイトは新しい商品またはサービスのための告知ページです。そもそもサイトがありません。そのため、実際に所有権があることを証明するプロセスでは、「ドメイン名プロバイダ」を経由して確認する方法で確認します。この方法は、DNS TXT レコードまたは CNAME レコードを対象の所有のドメインに設定する確認方法です。

ドメインの所有権さえ確認できればあとは簡単です。以下のページを参考にバケットを作成して設定しましょう。

ロードバランサの設定

次に、HTTPS で Web サイトをホスティングするため、ロードバランサーを設定します。

ロードバランサーの設定で迷うことはほとんどないと思いますが、以下注意点です。

  • IPアドレスにエフェメラルは使用しない。
  • SSL 証明書は、DNSが設定されてから作成される。

エフェメラルで割り当てられたIP アドレスは変わる可能性があります。HTTP / HTTPS それぞれエフェメラルで作成すると別々の IP アドレスになってしまいます。予約された IP アドレスを設定するようにしましょう。

ロードバランサーを設定すると、IP アドレスが割り当てられ、 HTTP ではアクセス可能になります。HTTPS はカスタムドメインが割り当てられるまで SSLの証明書が作成されず、アクセスできません。そのため、ロードバランサーを経由して Cloud Storage へのアクセス確認は一旦 HTTP で行いました。

DSN の設定

ロードバランサーには、固定のIPアドレスが割り当てられるので、それを指定して、DNS の設定をしましょう。DSN が浸透し、しばらくすると SSL 証明書も自動で作成され、HTTPS での疎通確認もできるようになります。

さいごに

今回、ティザーサイト公開前にアクセス制限しておきたいと言う要望もあったのですが、時間がなくて調べきれていません。Cloud HTTPS ロードバランサーを使うと、AppEngine 同様 Identity-Aware Proxy(IAP)を使ってアクセス制限できるらしいです。IAP は Google のアカウント認証を簡単に適用できる仕組みです。これを使えば、例えば会社の人だけ見られるプライベートなサイトが簡単に構築できます。この辺りについては別途ブログにするか、どなたか詳しい人教えてください。

--

--