Cloud Storageを使ったカスタムドメインでHTTPSのSPA環境を構築する #gcp
この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
こんにちは、中村です。Cloud Storageを使ってカスタムドメインでHTTPSのSPA環境を構築します。今回はRoute53で管理しているドメイン、SSLはGoogleマネージドのSSL証明書を利用します。
Search Consoleでドメインの所有権確認
この操作はGCPと同じGoogleアカウントで行ってください
静的ウェブサイトのホスティングにあたりドメイン名を持つバケットを作成しますのでまずは利用するドメインの所有権確認を行います。Google Search ConsoleでDNSレコードでの所有権の確認の指示を元に実施します。ドメインでドメイン名を入力し続行をクリックします。
表示されるTXTレコードを利用するドメインのDNSプロバイダにて登録し確認をクリックします。
確認トークンが見つからない場合はエラーが表示されます。後ほど確認しましょう。
成功すると下記のインフォメーションが表示されます。
Cloud Storageバケットの作成
Storageにアクセスし、バケットを作成をクリックしてください。バケット名を先ほど所有権を確認したドメイン名で作成します。その他の設定は下記にしてください。
| Key | Value |
|---|---|
| データの保存場所 | Region asia-northeast1（東京） |
| データのデフォルトのストレージクラス | Standard |
| オブジェクトへのアクセスを制御する方法 | きめ細かい管理 |
作成が完了したら一覧に戻り、バケット設定でウェブサイトの構成を編集をクリックしてインデックスページサフィックス・エラーページにindex.htmlと入力し保存をクリックします。
バケットの詳細にアクセスして権限タブでメンバーを追加をクリックし、下記の情報を入力し保存をクリックします。
| Key | Value |
|---|---|
| 新しいメンバー | allUsers |
| ロール | ストレージオブジェクト閲覧者 |
Cloud Load Balancingの作成
負荷分散にアクセスし、ロードバランサーの作成をクリックします。負荷分散の種類が表示されるので、HTTP(S)負荷分散の設定を開始をクリックします。
インターネットから自分のVMへをチェックし続行をクリックしロードバランサー名を入力します。次にバックエンドの設定をクリックし、バックエンドバケットを作成する。先ほど作成したGCSバケットを参照しCloud CDNを有効にするにチェックを入れて作成をクリックします。
フロントエンドの設定をクリックし、プロトコルをHTTPSを選択します。IPアドレスはIPアドレスの作成をクリックし静的IPアドレス名を入力し保存します。またHTTPSなのでポートは443を選択します。
証明書は新しい証明書の作成をクリックし、作成モードをGoogle管理の証明書を作成するを選択・利用するドメインを入力して作成をクリックします。
確認と完了をクリックして作成するロードバランサーの設定を確認し、作成をクリックします。作成されたIPアドレスでDNSレコードを作成します、またGoogleマネージドSSL証明書のためにCAA DNSレコードを作成します。
- your_domain. CAA
0 issue “letsencrypt.org” - your_domain. CAA
0 issue “pki.goog”
Google マネージド証明書のプロビジョニングには最長で 60 分かかります。またロードバランサーで使用できるまでは、追加で30分ほどかかる可能性があるので待ちながら次のステップに進みましょう。この後利用するCloud ShellでSSL証明書のステータスを確認できます。
$ gcloud beta compute ssl-certificates list --global
Cloud Shellでサンプルアプリの作成
Cloud Shellでサンプルアプリを作成します。ヘッダーのプロンプトアイコンをクリックしてCloud Shellを起動します。
npxコマンドが利用できますのでReactアプリを作成します。
$ npx create-react-app sample-app && sample-app $ yarn start
Cloud Shell内で起動したアプリケーションにアクセスするには、ウェブでプレビューをクリックし、ポートを変更のプルダウンから3000を選択します。別タブにてローカルホストのアプリを確認できます。エディタを開くをクリックして、src/App.jsを編集・保存します。先ほど立ち上がった別タブのアプリにも変更がされているはずです。
$ cat src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1>Hello World from Cloud Shell editor...!</h1>
</header>
</div>
);
}
export default App;
変更が確認できたらControl + cでサーバーを停止し、ビルドコマンドを実行します。
$ yarn build
これでbuildディレクトリができたはずです。次はこのディレクトリ内のファイルをCloud Storageにアップロードします。
gsutilでデプロイ
サンプルアプリを作成したCloud Shellで下記のgsutilコマンドを実行しデプロイ作業をします。gsutilは、コマンドラインからCloud Storageを操作することができるpythonアプリケーションです。
$ ls -la total 532 drwxr-xr-x 6 xxxxx xxxxx 4096 May 4 22:34 . drwxr-xr-x 12 xxxxx xxxxx 4096 May 4 22:31 .. drwxr-xr-x 3 xxxxx xxxxx 4096 May 4 22:34 build -rw-r--r-- 1 xxxxx xxxxx 310 May 4 21:40 .gitignore drwxr-xr-x 1028 xxxxx xxxxx 36864 May 4 21:40 node_modules -rw-r--r-- 1 xxxxx xxxxx 746 May 4 21:40 package.json drwxr-xr-x 2 xxxxx xxxxx 4096 May 4 21:40 public -rw-r--r-- 1 xxxxx xxxxx 2884 May 4 21:40 README.md drwxr-xr-x 2 xxxxx xxxxx 4096 May 4 21:40 src -rw-r--r-- 1 xxxxx xxxxx 468872 May 4 21:40 yarn.lock $ cd build $ gsutil cp -r . gs://xxxxxxxxxxx/ : : : Operation completed over 19 objects/478.4 KiB.
これで準備はOKです。https://${domain_name}/でアクセスできるか確認してみてください。
まとめ
Cloud Storage・Cloud Load Balancing・Cloud Shellを使ってカスタムドメインでHTTPSのSPA環境を構築できました。AWSの場合は、Amplify ConsoleやCloudfront・S3・ACMで上記の機能が実現することが多く、GCPで行う場合にステップ数が多く感じられました。しかしCloud Shellを使ってみて、簡単かつブラウザで全て完結できるのは良い点だなと思いました。
