More than 3 years have passed since last update.

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

Posted at 2020-01-15

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

要件

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

実現手順

事前準備

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

ここから説明します

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

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

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

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

参考にしたサイト

静的ウェブサイトのホスティング | Cloud Storage | Google Cloud
https 対応した手順ではないので、注意が必要
https 対応する場合は、ロードバランサを立てるため、バケット名がドメインと一致していなくても問題ない

Google でドメインを取得して GCP で静的ホスティングその1 - Qiita
上の参考サイト同様 https 対応していないが、補足情報として役に立った

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

ロケーションタイプは、想定されるアクセス元が日本だったため、 Region
ロケーションは、 asia-northeast1 (東京)
とした

ストレージクラスは Standard
アクセス制限はきめ細かい管理
とした

参考：

静的 IP アドレスの取得

VPCネットワーク -> 外部IPアドレスから予約可能
グローバルアドレスとして予約

参考：

静的外部 IP アドレスの予約 | Compute Engine ドキュメント | Google Cloud

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 -> 「送信元の追加」

参考：

GCP managed SSL(β版)を利用したhttpsサーバ構築 - Qiita

バックエンドの設定

バックエンドバケットの作成
「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 に対し「役割」を「ストレージ」->「ストレージオブジェクト閲覧者」を付与し、保存

参考：

データの一般公開 | Cloud Storage | Google Cloud

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

index.html と 404.html をアップロード
バケットの設定から「ウェブサイトの構成を編集」にて該当の html をマッピングする

参考：

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

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

事前準備

G Suite アカウントの作成

サービス | G Suite

必要な情報

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

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

G Suite アカウント作成時に、ドメインも取得できるので、取得する
参考：
Google パートナーからのドメインの購入 - G Suite 管理者ヘルプ

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up