Google Cloud Storageへのアップロード手順
Google Cloud Storageをアップロード先とし、独自ドメインで静的ページにアクセスできる事を目標とします。
大まかに以下の手順で設定できます。
- お名前.com等のレジストラでドメインを取得する。
- Google Cloud DNSでゾーン作成する。
- レジストラでNSレコードを設定する。
- Google Search Console で新規サイトを登録する。
- レジストラ側のDNSレコードに、TXTでセキュリティトークンを追加してサイト作成を完了させる。
- Google Cloud StorageでCNAMEを登録する。
- GCSでドメイン名(www.study-hugo.com)のバケットを生成する。
- 画面またはgsutilでビルドしたファイルをアップロードする。
- ウェブの設定でメインページをindex.htmlを設定する。
- アップロードしたファイル・フォルダを公開に設定する。
- 完了!
では一つづつ見ていきましょう。
お名前.com等のレジストラでドメインを取得する
今回この例では「お名前.com」を使用するものとします。
手順という程の手順は無いので、適当に各自取得しましょう。
Google Cloud DNSでゾーン作成する
Google Developer Console にアクセスします。
googleの大半の作業をここから行います。
最初にプロジェクトを作成する必要があります。ここで入力するプロジェクトは、サイト名等を入力しておきます。
左サイドナビの「Cloud DNS」クリックします。続いて「ゾーンを作成」ボタンをクリックします。
ゾーンを作成すると、以下のようにNSレコードが表示されます。
この4行のNSレコードをレジストラ(お名前.com等)に設定する必要があります。
レジストラでNSレコードを設定する
お名前.comでの例となります。
Google Search Console で新規サイトを登録する
GCSのバケットはドメインと直結しており、サイトの所有権が無いと作成できません。Google Search Console(旧ウェブマスターツール)にレジストラで登録したドメインを元にサイトを作成します。
Google Search Consoleにアクセスします。
「プロパティを追加」をクリックし、レジストラで取得したドメインをFQDNで入力してサイトを追加します。すると、以下のように所有権の確認ウィザードが表示され、TXTレコード用のセキュリティトークンが表示されます。
このセキュリティートークンをレジストラにTXTレコードで設定します。
レジストラ側のDNSレコードに、TXTでセキュリティトークンを追加してサイト作成を完了させる
TTLが3600秒なので、最大60分間にTXTレコードが反映されます。早く確認したい場合はTTLを一時的に短くして、後で正常な数値に直しても大丈夫です。
これでGoogle Search Consoleはサイトの所有権を確認できます。
Google Search Consoleにアクセスし、先ほどの所有権の確認ボタンをクリックし、サイト作成を完了します。
Google Cloud StorageでCNAMEを登録する
Cloud DNSにGCSのCNAMEレコードを登録します。
登録するCNAMEは「c.storage.googleapis.com」です。
GCSでドメイン名(www.study-hugo.com)のバケットを生成する
Google Developer Centerに戻り、左サイドナビから Storage -> ブラウザと選択し、「バケットを作成」ボタンをクリックします。
バケット名はFQDNと一致しないといけないルールがあります。
ストレージクラスは任意に選択して下さい。価格・可用性がそれぞれ異なります。
場所は任意に選択しますが、基本的に自国に最も近い箇所を選択します。遠いリージョンを選択すると通信が遅くなる可能性があります。
画面またはgsutilでビルドしたファイルをアップロードする
最初のうちは画面からファイルをアップロードします。慣れてきたらgsutilというコマンドラインツールで自動化しましょう。
まずは動作確認のため、index.htmlを適当にアップロードしてみましょう。
初期設定ではアップロードしたファイルは外部に非公開状態なので、まだURLアクセスできません。
ウェブの設定でメインページをindex.htmlを設定する
例えば http://localhost/ とアクセスした時に index.html を表示する、等の設定をしておきます。ここではメインページと404のhtmlを設定しておきます。
アップロードしたファイル・フォルダを公開に設定する
最後に、index.htmlの「公開リンク」チェックボックスにチェックを付けると、外部に公開されます。
完了!
これで取得した独自ドメインでアクセス可能になりました!ブラウザからアクセスしてみて下さい!