LoginSignup
12
13

More than 3 years have passed since last update.

@maejimayuto(maejimayuto)

G Suite と GCP Cloud Storage だけで静的サイトを https 独自ドメインで公開

Posted at

静的ウェブサイトのホスティングをしたいんだ！！

要件

  • ドメイン example.com を取得する
  • https://example.com にアクセスできるようにする
  • 静的サイトは Google Cloud Storage に保存したい

実現手順

事前準備

  • G Suite のアカウント作成
  • G Suite にて example.com のドメイン取得
  • 作成した G Suite のアカウントにて GCP のプロジェクト作成

ここから説明します

  1. GCS (Google Cloud Storage) のバケット作成
  2. 静的 IP アドレスの取得
  3. DNS に A レコードの追加
  4. ロードバランサの作成（合わせて Google Managed Certificates の作成）
  5. コンテンツのアップロード＆外部公開
  6. インデックスページとエラーページの設定

環境のざっくりとした全体像

上からリクエストの順をイメージしています

  1. ドメインへのアクセス
    • 繋げてくれているのは：DNSのAレコード
  2. IP アドレス
    • 繋げてくれているのは：GCPの設定(ロードバランサの作成で設定する)
  3. ロードバランサ＆証明書
    • 繋げてくれているのは：GCPの設定＆Let’s Encrypt による認証(ロードバランサの作成で設定する)
  4. GCS のコンテンツ

参考にしたサイト

最新版 Google Cloud Storage + L7LB で独自ドメインで静的サイトホスティング SSLもイケます - 続 カッコの付け方

このサイトが今回の手順とほぼ同じ

静的ウェブサイトのホスティング  |  Cloud Storage  |  Google Cloud

https 対応した手順ではないので、注意が必要

https 対応する場合は、ロードバランサを立てるため、バケット名がドメインと一致していなくても問題ない

Google でドメインを取得して GCP で静的ホスティングその1 - Qiita

上の参考サイト同様 https 対応していないが、補足情報として役に立った

GCS (Google Cloud Storage) のバケット作成

ロケーション タイプは、想定されるアクセス元が日本だったため、 Region

ロケーションは、 asia-northeast1 (東京)

とした

ストレージ クラスは Standard

アクセス制限は きめ細かい管理

とした

参考：

静的 IP アドレスの取得

VPCネットワーク -> 外部IPアドレス から予約可能

グローバルアドレスとして予約

参考：

DNS に A レコードの追加

ホーム – Google Domains

作成した G Suite のアカウントでログインし、 DNS のページの「カスタム リソース レコード」で A レコードの追加

NAME                  TYPE     DATA
@(何も入力しない)       A        xxx.xxx.xxx.xxx(先ほど取得した IP アドレス)

www.exapmle.com にもアクセスできるようにしたい場合は下記も追加する

NAME                  TYPE     DATA
www                   A        xxx.xxx.xxx.xxx(先ほど取得した IP アドレス)

この時点で、 http://example.com と http://example.com にアクセスできるようになる

私の環境では、 S3 の設定 XML が表示された

A レコードの浸透には少し時間(感覚的には數十分)がかかる

参考：

ロードバランサの作成（合わせて Google Managed Certificates の作成）

ネットワークサービス -> Cloud CDN -> 「送信元の追加」

参考：

バックエンドの設定

バックエンドバケットの作成

「Cloud Storage バケット」で、作成したバケットを選択し、参照する

ホストとパスのルール

特に設定なし

フロントエンドの設定

HTTPとHTTPS共に作成する

IPアドレスはエフェメラルではなく、先ほど取得したIPアドレスにする

HTTPSでは、証明書を作成する

www.example.com のアクセスも https 対応したい場合、2つ証明書が必要となる

ちょいハマった

10 - 30 分ほどで、証明書は ACTIVE になるみたいなので、もし ACTIVE にならない場合は、エラーコードから原因を探る

参考：

コンテンツのアップロード＆外部公開

サンプルファイルのアップロード

Hello.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>

    <body>
        Hello World！
    </body>
</html>

をバケットのルートに配置する

配置したファイルを外部公開する

バケットの「権限」タブから「メンバーを追加」

allUsers に対し「役割」を「ストレージ」->「ストレージ オブジェクト閲覧者」を付与し、保存

参考：

インデックスページとエラーページの設定

index.html と 404.html をアップロード

バケットの設定から「ウェブサイトの構成を編集」にて該当の html をマッピングする

参考：

書くまでもないかもだが、後続のためメモしたので、記載

事前準備

G Suite アカウントの作成

サービス | G Suite

必要な情報

  • アカウント管理者の姓
  • アカウント管理者の名
  • 現在のメールアドレス
  • 郵便番号
  • 住所
  • 電話番号
  • パスワード
  • 本人確認のための電話番号
  • クレジットカード

G Suite にて example.com のドメイン取得

G Suite アカウント作成時に、ドメインも取得できるので、取得する

参考：
Google パートナーからのドメインの購入 - G Suite 管理者 ヘルプ

作成した G Suite のアカウントにて GCP のプロジェクト作成

  1. 作成した G Suite のアカウントにて、 Google Cloud Platform にアクセスする
  2. 無料試用を開始するために、クレジットカードを登録する
  3. My First Project が作成されるので、プロジェクト名を適切なプロジェクト名に変更する（新しいプロジェクトを作成してもOKだが、使わない My First Project は削除した方が気持ち良さそう）
12
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
13