はじめに
最近は生成AIのおかげで開発スピードがかなり早くなった気がします。
ただし、あくまでスタートダッシュこそ早いものの、それを長期的にメンテナンスするとなるとデグレがすんごいことになると言う話もちらほら聞くので、適度にリファクタリングも生成AIに指示しなければと思ってきました。
そんなことはさておき、生成AIでせっかくサイトを作ってみたなら公開してみたくないですか？コード生成はAIが自動であれこれやってくれるものの、インフラの設定は自分でやる必要があります。エージェントにCLIで操作させる方法もあると思いますが、今回は自分の勉強もかねてGUIでポチポチやります。
用意するもの
以下の4つを使いました。
- 公開してみたいWEBサイト
- 軽めのWEBサイトで試してみることを強くお勧めします
- GCPのアカウント登録
- Google AdSenceのアカウント登録
- お名前ドットコムのアカウント登録
- ユーザーIDがてきとうな数字列にて作成されるので、ユーザーIDを忘れないように注意してください
- （メールアドレスにユーザーIDが送られるので、そちらを保存しておくと良いと思います）
- 課金や個人情報を扱うWEBサイトの場合は、本記事では責任を取りかねます
- セキュリティ要件に関しては、本記事では取り扱わないです
やることの流れ
- GitHubとGCPの連携（CI/CDの設定）
- どこかでクレカの設定が必要だった記憶..（僕はすでに登録してたので、フェーズを忘れました）
- お名前ドットコムで、任意のドメイン名を取得する
- 取得したドメイン名をGCP側に登録する
- Google AdSenceで広告審査を通す
1. GitHubとGCPの連携（CI/CDの設定）
必要なソースコードをGitHubの任意のブランチにpushしている前提です（mainブランチにpushしたとして進めます）。
1-1. GCPのプロジェクト作成
GCPにログインします。
以下の順番で、新しいプロジェクトを作成します。
次に、任意のプロジェクト名でプロジェクトを作成します。
今回は「my-app」というプロジェクト名を作成しました。また、組織の設定は特にせずに、「組織なし」のまま進めます。
1-2. Cloud Runの設定
プロジェクトが作成できたら、次はCloud Runを設定します。
画面左上のハンバーガーメニューをクリックして、Cloud Runのサービスにアクセスします。
次に、GitHubとの連携を行います。そのために、「リポジトリを接続」をクリック。
今回、Dockerは使わないやり方で進めますが、Dockerを使う場合も手順は同じです。
Dockerを使う方は、②の手順で左側を選択してください。今回は生成AIにコードを書かせただけで、Docker環境は一切構築していませんので、真ん中を選択しています。
③の手順で、GitHubとの連携をする必要があります。利用するGitHubアカウントでログインする必要があるので、ログインしてGCPとの連携を許可してください。
④はデフォルトで^main$と正規表現になっているはずです。mainブランチ以外でデプロイしたいブランチ名を設定している場合は、変える必要があります。
⑤ではDockerを使用しないためBuildPacksを使用します。今回はReactベースでWEBサイトを作っており、親ディレクトリにReactの必要なパッケージなどが全て揃っています。そのため、「ビルドコンテキストのディレクトリ」はデフォルトのまま/で大丈夫です。つまり、ローカル環境でWEBサイトを起動させているディレクトリを指定すれば良いだけです。他の設定もデフォルトのままで、空白です。
⑬の手順ですが、今回はDockerも使わなければ、他のGCPサービス（GCSやBigQueryなど）と連携することもないので、一切設定していません。デフォルトのままです。
その他の手順も、デフォルトのままで進めています。
1-3. デプロイ
Cloud Runの設定が完了すれば自動的にデプロイ待ちの状態になるので、数分間待機です。
デプロイが完了すれば、①のURLにアクセスできます。これで、WEBサイトが一般公開されました！
また、デプロイ周りの設定を見直したい場合は、②の「リポジトリの設定を編集」をクリックします。先ほど設定したGitHubとの連携やデプロイのタイミングなどを設定できます。
これで、GCP（=Cloud Run）を使ったWEBサイトの一般公開が完了です。
ただし、自動で作成されたURLを見てみると、Cloud Runで作ったんだろうな感があります。正直、これで全然問題ないと思いますが、1つだけ致命点があります。それは、Google AdSenceに対応していないという点です。
Google AdSenceの細かい仕組みは把握していないのですが、URLが原因のようです。Cloud RunによってデプロイされたURLは、末尾が.run.appのようになっており、Google AdSenceがこれを弾いてしまいます。また、パス（=/）が挟まるのもダメなようです（詳細は調べてみてください）。
すなわち、広告をつけたいのにCloud RunでデプロイしたURLでは広告をつけられません。そのために、次はお名前ドットコムを利用してドメインを取得します。
2. お名前ドットコムでドメイン名を取得する
お名前ドットコムにアクセスします。ここで、自身が使用したいドメイン名を検索します。名詞1単語とかだと重複によって使用できないことが多いです。
「example123456789」であればドメイン名が空いていました（一例です）。今回は.comにてドメイン名を取得したいので、.comにチェックをして「次へ進む」をクリック。
ドメインの用途を選択する必要があります。
今回はCloud Runでサーバーをすでに用意しているので、「すでにサーバーをお持ちの方はこちら」をクリックします。
余談ですが、僕はこのとき間違えて「ブログ・ホームページ」を選択してしまいました。それでも問題ないんですが、自動的にお名前ドットコム側でレンタルサーバーが設置されて、運用を始めてくれます。初月以降は月額で2400円くらい課金が発生するので注意してください。それに気づいてすぐにレンタルサーバーの解約を申請しました。セーフ。
あとは、ログイン（またはアカウント作成）してドメインを取得するだけです。僕の場合、オプションは全て無しにしたので0円でドメイン名を購入することができました。
3. ドメイン名とGCPを連携する
お名前ドットコムで取得したドメイン名に関して、お名前ドットコム側とGCP側でそれぞれ設定をします。
3-1. GCPでDNSゾーンを作成する
画面左上のハンバーガーメニューをクリックします。
左側のメニューから「ネットワークサービス」を探します。
僕の場合、最初は表示されていなかったので、Google Cloudアイコンをクリックして探しました。
Google Cloudアイコンをクリックして、GCPのトップ画面に遷移しました。
画面下部の「すべてのプロダクトを表示」をクリックして、一覧を表示します。
ずらっと並ぶ中で「ネットワークサービス」を探します。
この「ネットワークサービス」を使って、DNS周りの設定を実施します。何回か行き来するので、この時点でピン留めしています。こちらをクリックします。
ネットワークサービスの画面が表示されます。
表示された画面上で、「ゾーンを作成」します。
任意のゾーン名とDNS名を作成します。このとき、DNS名はお名前ドットコムで取得したドメイン名にします。例えば、「example123456789.com」を取得した場合は、DNS名にも「example123456789.com」を入力します。
DNSゾーンの作成を何かしら間違えたとしても、作り直せば良いだけなので問題ないです。
DNSゾーンを作成すると、自動で作成したDNSゾーンの画面に遷移します。
作成したDNSゾーンには、「SOA」と「NS」が初期状態で作成されているので、そのうちの「NS」の方をクリックします。
そこで表示される4つのデータを、お名前ドットコム側にネームサーバーとして設定します。
3-2. お名前ドットコムでネームサーバーを設定する
お名前ドットコムのTOP画面です。
（ああ。間違えて契約したレンタルサーバーの跡が残っている..。恥ずかしい..）
TOP画面の左側から、「ネームサーバー設定」をクリックします。
ネームサーバー画面です。
取得したドメイン名のネームサーバーに対して、先ほど控えておいたDNSゾーンのデータを入力して、確認→OKします。
お名前ドットコムでの作業は以上になります。以降はGCPで作業を進めます。
3-3. ドメイン名をマッピングする
Cloud Runのサービス画面です。
Cloud Run上でデプロイしたアプリケーション名を選択します。④の手順では、特に確認済みのドメインがなければデフォルトのままの「Verify a new domain」です。また、⑤の手順にて、お名前ドットコムで取得したドメイン名を入力します。
次に、DNSレコードを更新する必要があります。
「Search Consoleで確認」をクリック。
Search Console画面が、別ページで開くはずです。
ドメイン名を入力し続行すると、ドメイン所有権の確認というポップアップが表示されます。ここでTXTレコードをコピーします。
行ったり来たりしていますが、再びGCPのネットワークサービスの画面を表示します。
ネットワークサービスの画面上から、先ほど作成したDNSゾーンのレコードセットに「標準を追加します」。
先ほどコピーしたTXTレコードは以下で設定します。
DNS名はサブドメインなどを設定していない場合は、空で問題ないです。
また、リソースレコードのタイプはTXTを選択し、先ほどコピーしたTXTデータを貼り付けて「作成」します。
あとはSearch Console画面に戻って、ポップアップ画面右下の「確認」ボタンをクリックして、所有権の証明が完了するのを待ちます。僕の場合は5分くらい待つと完了しましたが、長い場合もあるようです。
Search Console画面に移動する前のCloud Runの画面に戻ります。
⑱は、先ほどまでは「Verify a new domain」になっていますが、所有権の証明が完了することで取得したドメイン名を選択できるようになります。
また、サブドメインの設定も実施することができます。とりあえず今回は「www」としています。
マッピングを追加したら、以下の画面が表示されます。
※通常は、ドメイン名の左隣のアイコンが読み込みマークになったままですが、あとから上のスクショ撮ったので完了になっています
マッピングしたドメインの操作の三点アイコンをクリックして、「DNSレコード」をクリックします。
そこで表示されるDNSレコードをコピーしておきます。
またまたネットワークサービスの画面に移動します。
Cloud DNSから作成したDNSゾーンをクリックし、「標準を追加します」。
先ほどは、Search Console画面で表示されたTXTレコードを追加しましたが、今回は先ほどコピーしたDNSレコードを追加します。ただし、今回はサブドメインを含めてDNS名を指定する必要があります。
また、㉖の「リソースレコードのタイプ」もTXTではなくCNAMEを選択し、コピーしたDNSレコードを貼り付けて作成します。
これにて、自身が取得したドメイン名でWEBサイトが公開出来ました！
URLを手打ちするなり、ドメインマッピングのURLをクリックしてみて、WEBサイトが表示されるはずです。
4. Google AdSenceに審査してもらう
さて。URLの末尾が「.com」になったことで、やっとGoogle AdSenceによる広告をつける作業に着手できます。
まずは、Google AdSenceのホームページからログインします。
僕の場合はすでに設定をしてしまっているのですが、上のような画面が表示されると思います。
まずは、画面中央のうち、左側の「お支払い」を設定します。これは案内のままに設定します。
次に、中央の「広告」に関する「チェック」を実施します。
すると、広告設定のプレビュー画面が表示されます。
画面上部にURLを入力する箇所があるので、今回作成したURLを入力します。このとき、サブドメインを設定した場合はそれも込みで入力します。
すると、広告を表示する位置を自動的に設定してくれます。お好みに合わせて、画面右側のパネルでカスタムできます。僕はデフォルトのままで、「サイトに適用」をクリックしました。
あとは、広告審査をしばらく待つだけです。
広告審査落ちた
はい。曜日も関係してるのか不明ですが、僕の場合は12hくらいで審査結果が表示されました。落ちました。
コンテンツが不十分らしいです。具体的にどこが不十分とかは当然教えてくれないので、どうにかこうにかするしかないというわけですね。
これからコンテンツを充足させていきます。
おわりに
最近、少しずつ生成AIを使った開発に慣れてきた気がします。また、自分のこれまでの経験や知見を持って、生成されたコードを見ると改修したくなる点がそれなりに見つかるので、決してこれまでのエンジニアリングは無駄になってないと感じてきています。
とりあえず時間があるタイミングで、しっかりとGoogle AdSenceの広告審査をパスしたいです。頑張ります。