![見出し画像](https://assets.st-note.com/production/uploads/images/75807034/rectangle_large_type_2_d0f715193a3f9993be96da25398df5de.png?width=1200)
サーバーサイドGTMをGCPのCloudRunにデプロイする
サーバーサイドGTMの活用は色々と話題に上がっていますね。
ただ、スタートするにあたってはハードルが高いのも事実。
技術的や知識的なハードルもそうですし、「これが使いたいんだけど」のような希望のもので上手くいくか分からないハードルなど。
Googleの公式ではサーバーサイドGTMを動かすサーバーとして、
Google Cloud Platform(GCP)の App Engine を用いた方法が記載されています。
しかし、「GCPじゃなくて、Azureと使いたい」とか「AWSが良い」とか色々あると思います。
Azureの話とかは別記事でも書いていますが、
今回はGCPの中でも『App Engine』じゃなくて『CloudRun』を用いた方法をご紹介できればと思います。
参考
やることは難しくないので、さくっと見ていきましょう。
前提
Google Cloud Platformのアカウントは空いていること。
アカウント作成の方法については説明省きますのでご了承ください。
詳しくはFacebookコンバージョンAPIの記事の方で記載しています。
「新しいプロジェクト」からプロジェクトを作成していきます。
![画像1](https://assets.st-note.com/production/uploads/images/73525079/picture_pc_7a1c7dccf39e07fb62e60aa42ecbef17.png?width=1200)
プロジェクト名は、Google Tag Manager(GTM)側のIDを記載するのが良いと思います。
※なので、先にGTMのサーバー用コンテナのアカウント作成まではやっておきましょう。
![画像2](https://assets.st-note.com/production/uploads/images/73525147/picture_pc_8c140100491bd440b44be925582a0a03.png?width=1200)
まずは、「お支払い設定」を済ませておきます。
![画像4](https://assets.st-note.com/production/uploads/images/73525275/picture_pc_5dece052da365bcfbbcfcf75a0424eeb.png)
詳細は割愛しますが、案内通り進めば問題なく設定できると思います。
クレジットカードを紐付けたり、Google Payとリンクさせたりできます。
Cloud Runの設定
Azureのときと同様に、プレビュー用とタグ設定用の2つをデプロイします。
タグ設定用サーバーは、GTMのプレビューモードで送信されたリクエストをプレビュー用サーバーに自動的にリダイレクトするため、作ったあとにごちゃごちゃ設定する必要はありません。
プレビュー用とタグ設定用で、若干変数設定は異なりますが、基本的に難しいことはないので、さっそく見ていきましょう。
プレビュー用の設定
左のメニューから「Cloud Run」を選択します。
![画像3](https://assets.st-note.com/production/uploads/images/73525238/picture_pc_714ed98b82f33c703221f7b40df9a60c.png)
最初は以下の画面に遷移しますので、「サービスの作成」をクリックします。
![画像5](https://assets.st-note.com/production/uploads/images/73525470/picture_pc_88069bda529cd42b0a3b51fefcadd9e0.png?width=1200)
コンテナイメージのURL:
gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable
サービス名:任意。プレビューとタグ設定分けるため「preview」とかつけておくと便利。
リージョン:asis-northeast1(東京) を選びましょう。
※大阪もあるのですが、大阪の方は、後々のカスタムドメイン設定に対応していないため、東京を選んでおいた方がいいです。
CPUの割り当てと料金、自動スケーリング、ingressはデフォルトで大丈夫です。
自動スケーリングがデフォルトだと怖い場合は、
AppEngineと同じように、最小3、最大6とかに設定すればいいと思います。
正直プレビュー用なので、最小0、最大1でも全然OK。
リクエスト タイムアウトも デフォルトは 300 ですが 60 くらいがおすすめです。
![画像7](https://assets.st-note.com/production/uploads/images/73525704/picture_pc_dfa5e8fd67edfc72d70e01b18f2a8f03.png?width=1200)
認証は「未認証の呼び出しを許可」でOK。
![画像7](https://assets.st-note.com/production/uploads/images/73525895/picture_pc_6bb077432c5130b227909a4c1d05e4ae.png)
「コンテナ、変数とシークレット、接続、セキュリティ」をクリックして、畳んである部分を開きます。
![画像8](https://assets.st-note.com/production/uploads/images/73525954/picture_pc_be5441d7ccb9cd953de1146350d5f781.png)
コンテナのタブは全てデフォルトで問題ないです。
![画像9](https://assets.st-note.com/production/uploads/images/73526029/picture_pc_c37c45c2dc0616e7937e8252fc10518c.png?width=1200)
「変数とシークレット」のタブでは2つの環境変数を設定します。
名前1:RUN_AS_PREVIEW_SERVER
値1:true
名前2:CONTAINER_CONFIG
値2:サーバーサイドGTMの「管理>タグ設定サーバーを設定する>タグ設定サーバーを手動でプロビジョニング」にチェックをして得られる文字列
![画像10](https://assets.st-note.com/production/uploads/images/73734310/picture_pc_bc2c2e28bdd347c8134eaa4b24074682.png?width=1200)
![画像11](https://assets.st-note.com/production/uploads/images/73734332/picture_pc_25965ddd04e1f4182c112a1c17a9d1cd.png)
ここまで入力したら、「作成」をクリック
![画像12](https://assets.st-note.com/production/uploads/images/73734650/picture_pc_b6829fad13f00d5b610f32b4e8298c51.png)
これで、しばらく待てば完了です。
次はタグ設定用のデプロイです。
タグ設定用
プレビュー用とほぼ同じことをします。
Cloud Runのトップページにいきます。
![画像13](https://assets.st-note.com/production/uploads/images/73734914/picture_pc_0315c59fe8e882d516b047cb4ff48d39.png)
「サービスの作成」をクリック
![画像14](https://assets.st-note.com/production/uploads/images/73734929/picture_pc_7f7b24d4351c05edb6b6a5c874ec2224.png)
「コンテナイメージのURL」は以下(プレビュー用と同じ)
gcr.io/cloud-tagging-10302018/gtm-cloud-image:stable
サービス名は「タグ設定用」と分かるように「tagging」とか付けておきましょう。
リージョンは「asia-northeast1(東京)」で。
CPUの割り当てと料金、自動スケーリング、IngressはデフォルトでOK。
自動スケーリングは0とか100が怖ければ、最小2、最大10くらいにしておけば良いかと思います。
リクエスト タイムアウトはプレビュー同様 60 くらいがおすすめです。
![画像17](https://assets.st-note.com/production/uploads/images/73735001/picture_pc_c9f2336adb6ca47e11f628383d942f94.png?width=1200)
認証は、「未認証の呼び出しを許可」でOK。
![画像16](https://assets.st-note.com/production/uploads/images/73735131/picture_pc_9f2171a63f3862a014be398d6412c8fe.png?width=1200)
『コンテナ、変数とシークレット、接続、セキュリティ』を開きます。
コンテナはデフォルトの設定で問題なし。
![画像17](https://assets.st-note.com/production/uploads/images/73735166/picture_pc_0dc734094cfec19ac69f9683ed8bc049.png)
「変数とシークレット」のタブでは、2つ変数を設定します。
1つはプレビュー用のときと同じですが、もう1つは異なる設定をします。
名前1:PREVIEW_SERVER_URL
値1:プレビュー用で設定したサーバーのURL
値1の補足:Cloud Runのトップページには、すでに作成したプレビュー用のサービスがあると思います。これをクリック。
![画像18](https://assets.st-note.com/production/uploads/images/73735309/picture_pc_560ea2d4644293e7033e5f16b271d406.png?width=1200)
すると、上部にURLが記載あると思うので、これをコピーして、値1にペーストします。
![画像19](https://assets.st-note.com/production/uploads/images/73735365/picture_pc_d8f2ac36726f915d21107fc779ee3b9f.png?width=1200)
名前2:CONTAINER_CONFIG
値2:プレビュー用と同じで、サーバーサイドGTMの「管理>タグ設定サーバーを設定する>タグ設定サーバーを手動でプロビジョニング」にチェックをして得られる文字列
ここまで記述したら、作成。
![画像20](https://assets.st-note.com/production/uploads/images/73735456/picture_pc_9f0dc356724411f02fdc9808135e1d75.png)
「サービスを作成しています」が全て緑色の○になるまで待機。
![画像21](https://assets.st-note.com/production/uploads/images/73735528/picture_pc_79396af2d90e52b3375eceaca09e1afb.png?width=1200)
完了したらおしまいです。
次にカスタムドメインを割り当てます。
カスタムドメインの設定
カスタムドメインは「タグ設定用」の方だけにマッピングすればOKです。
最初に記載したように、タグ設定用サーバーは、GTMのプレビューモードで送信されたリクエストをプレビュー用サーバーに自動的にリダイレクトするため、プレビュー用のURLに直接アクセスすることはありません。
また、ここでリージョンを大阪にしていると、カスタムドメインのマッピングができないので注意してください。
※カスタムドメインが利用出来ないリージョンについて詳しくはこちら
https://cloud.google.com/run/docs/mapping-custom-domains#run
Cloud Runのトップページ上部から、「カスタムドメインを管理」をクリック。
![画像22](https://assets.st-note.com/production/uploads/images/73735887/picture_pc_b452f1c1aad2e68f5229f3534837eb52.png?width=1200)
「マッピングを追加」をクリック。
![画像23](https://assets.st-note.com/production/uploads/images/73735910/picture_pc_8222b7efb46e1d04c2ea5bfba15de849.png?width=1200)
「マッピングするサービスを選択」では、「タグ設定用」の方を選びます。(手順通り作成していたら、「tagging」がついている方)
![画像25](https://assets.st-note.com/production/uploads/images/73735970/picture_pc_910ce57e394dae6426fa989096d5787a.png)
「確認済みドメインを選択」では「Verify a new domain...」にします。
ここで、以前にGoogle Cloud Platformのサービスを使用したことがあれば、いくつかドメインの候補が選択出来るかもしれません。
しかし、新たに「Verify a new domain...」してください。
例えば、以下のように、サブドメインを指定してマッピングしようとすると、「CNAME」でしかマッピングできません。
![画像25](https://assets.st-note.com/production/uploads/images/73736103/picture_pc_3739142f65786db8eb6240cc12a402b8.png)
しかし、ITP対策なども考えると「A/AAAAレコード」として追加したいところです。
そのため、サブドメインまで含めて、新規で検証する必要があります。
つまり以下のように、サブドメインまで含んだドメインを新たに入力して進めていきます。
![画像26](https://assets.st-note.com/production/uploads/images/73736219/picture_pc_352a3f3a6e167a5a1171d9af148c701d.png)
ウェブマスターセントラルで所有権の確認が求められるので、手順に沿ってやりましょう。
![画像29](https://assets.st-note.com/production/uploads/images/73736458/picture_pc_db7db324e0065b547bd4486dfb8914b7.png)
「TXTレコード」をDNSの管理画面から追加すればサクッと終わると思います。
![画像28](https://assets.st-note.com/production/uploads/images/73736425/picture_pc_7718809b1e44457b10fde6f5e10e1956.png?width=1200)
完了すると、以下のような画面になるので、一番下の「サブドメインを指定」は空白のままにして、「続行」
![画像29](https://assets.st-note.com/production/uploads/images/73736511/picture_pc_eae8411f650ff55ea8c37661bc563afa.png)
レコードが発行されるので、全てDNS管理画面で追加してあげましょう。
![画像31](https://assets.st-note.com/production/uploads/images/73736576/picture_pc_931caea1efeb0e043034a509453b4268.png)
これでマッピングも完了です。
※DNS設定が反映されるまで時間かかることがあります。基本的には15分くらいですが、最大72時間と公式には記載があります。
GTM側の設定を完了する
あとは、サーバーサイドGTMの、管理>コンテナの設定から
「サーバーコンテナのURL」を、今マッピングしたカスタムドメインのURLにしてあげれば、使えるようになります。
![画像31](https://assets.st-note.com/production/uploads/images/73736750/picture_pc_af3e34b43b95422fd8bd4d73b76743df.png?width=1200)
実際、プレビュー画面を開いてみて、URLが設定したURLになっていて、かつ画面にエラーが出なければ、問題なく稼働しています。
![画像32](https://assets.st-note.com/production/uploads/images/73736810/picture_pc_a109a8a2a99adb484309696e1b11b681.png?width=1200)
以上になります。
Bye, Bye.
広告運用に関して詳しくお話を聞きたいという企業様がいらっしゃいましたら、こちらからお問い合わせをお願い致します。
もし、私たちの会社で働く事に少しでも興味を持っていただけたら、ぜひ応募フォームよりご連絡ください。