Cloud Run + Cloud DNS + Artifact Registry でホームページを公開する

概要

下記の構成でGoogle Cloudを構築してホームページを公開しました。
今回の記事ではDocker imageの内容(ホームページの作成方法)やお名前ドットコムでのドメイン取得はは省略します。

Google Cloud : Cloud Run + Cloud DNS + Artifact Registry
ドメイン : お名前ドットコム（レンタルサーバーは借りない）
Docker image: ReactReact Router7), TypeScript, Tailwind CSS, shadcn/ui
ローカルPC : Windows

方法

お名前ドットコムでドメインを取得

お名前ドットコムでドメイン取得します。
ドメインを取得するだけなら無料で取得できます。
難しくなかったので詳細は割愛します。

Cloud DNSの設定

お名前ドットコムで取得したドメインをCloud DNSで管理するように設定します。

下記からゾーンを作成します

ゾーン名は英単語、DNS名はexample.comなどお名前ドットコムで取得したドメイン、説明は好きなように入力して、作成をクリックします。

入力したら下記画面から種類がNSのレコードをクリックします

4つのデータが表示されるのでメモしておきます。

お名前ドットコムの下記メニューからネームサーバーDNSをクリックします

使用するドメイン名を選択して、その他サービスタブから先ほどメモしたCloud DNSの4つのデータを入力します。

これで一旦完了です。

Artifact Registry

ローカルでDockerイメージを作成して、Artifact Registryにアップロードします。

下記からリポジトリ作成をクリックします。

好きなように名前を決めます。
形式はDocker、モードは標準を選択します。
ロケーションタイプはリージョンを選択して好きなリージョンを指定します。

暗号化と不変のイメージタグはデフォルトの選択肢のままにします

クリーアップポリシーはアーティファクトを削除を選択してください。

その後、クリーアップポリシーを追加から下記2つのポリシーを追加することで最新バージョン2つのDockerイメージを保持するように設定します。
クリーアップポリシーの名前は好きなように指定してください。

脆弱性のスキャンは好きな方を選択してください。
スキャンする場合は料金が発生します。

以上の設定をして作成ボタンをクリックすれば、リポジトリが作成されます。

作成したリポジトリをクリックして、設定の手順をクリックすると下記が表示されます。
表示されている手順通り認証を行ってください。
既にローカルPCにgcloudがインストール済みである場合は、「Dockerを構成する」で表示されているコマンドを実行するだけでOKです（たぶん）。

DockerDesktopを起動してください。
ローカルPCのDockerfileが存在するディレクトリで下記コマンドにより、Dockerイメージを作成します。

docker build -t asia-northeast1-docker.pkg.dev/{プロジェクトID}/{リポジトリ名}/{イメージ名} .

プロジェクトIDは添付画像の赤四角、リポジトリ名は黒四角が該当します。

下記コマンドして作成したイメージをプッシュします。

docker push asia-northeast1-docker.pkg.dev/{プロジェクトID}/{リポジトリ名}/{イメージ名}

Artifact Registryにプッシュされていることを確認します。

Cloud Runの作成

Cloud Runを開いてサービスの作成をクリックします

「既存のコンテナ イメージから 1 つのリビジョンをデプロイする」を選択します。
コンテナイメージのURLでは選択をクリックして、先ほどArtifact Registryで作成したイメージを選択します。

構成のサービス名とリージョンが自動適用されるため、好きなように修正します。
認証は誰でもアクセス出来うようにするため未認証の呼び出しを許可をクリックします。
課金はリクエストベースにしておきます。

サービスのスケーリングは自動スケーリングを選択して、インスタンスの最小数を0にします。
Ingressでは全てを選択します。

コンテナ、ボリューム、ネットワーキング、セキュリティを開いてコンテナポートを編集します。
私が用意したDockerイメージはポート3000で起動するアプリケーションであるため、3000を指定します。

サービスアカウントから新しいサービスアカウントの作成をクリックして、サービスアカウントを作成して設定します。

料金が発生するため、コンテナタブの起動時のCPUブーストはOFFにしておきます。

変数とシークレットから必要な環境変数を追加します。

作成ボタンをクリックして、しばらくしたら下記画像のようにすべて完了になることを確認します。
URLをコピーして開くとアプリケーションが起動できていることを確認できます。

Cloud Runとドメインの紐づけ

Cloud Runの画面からカスタムドメインを選択をクリックします。

マッピングを追加をクリックします。

マッピングするサービスを選択から先ほど作成したCloud Runサービスを選択して、Cloud Runのドメインマッピングをクリックします。

検証するベースドメインに自分のドメインを選択して続行をクリックしてください。

下記からSearch Consoleをクリックします。
このCloud Runのタブを閉じないでください。

ドメインを選択して自分のドメインを入力して、続行をクリックします。

下記画像のTXTレコードをメモしておきます。

Google Search Consoleの画面を閉じずにCloud DNSの下記画面を開いて、レコードセットの標準を追加をクリックします。

DNS名は変更せずにリソースレコードのタイプをTXTに変更します。
TXTデータに先ほどGoogle Search ConsoleでメモしたTXTレコードを貼り付けます。
作成をクリックします。

先ほどのGoogle Search Consolの画面に戻って確認をクリックします。
これで検証が完了します。

Cloud Runの画面に戻って続行をクリックして、下記画像のようにAレコードとAAAAレコードのデータが複数表示されます。

DNSレコードは操作からも確認できます。

Cloud DNSの画面に戻って標準を追加しますをクリックして、先ほどのAレコードとAAAAレコードを追加します。

しばらくしたら自分のドメインにアクセスすると、Dockerイメージで作成したアプリケーションが表示されます。
私の場合は1日経過したらアクセスできるようになりました。

余談

Google Cloudは同等のRESTなど各サービスの設定がコード化されていますが、GUI上での操作説明が少ないため本記事を記載しました。
2024/2/22以降ではコンソールのGUIがアップデートされて、本記事が使い物にならないかもしれませんが、誰かの役に立ってくれると嬉しいです。