Cloud ShellでCloud Runを操作するチュートリアルをやってみた

Google Cloudには、Cloud Shellというオンライン環境で動作するエディターがあります（AWSで言うとCloud9が同様のサービスになると思います）

オンライン環境のエディターについては前々からどのくらい使えるのか興味がありましたので、Google Cloudで用意されているチュートリアルをやってみました。
ついでにCloud Runの強力さを体験するために、チュートリアルはCloud Runでやってみます。

---
### Cloud Shellを起動し、チュートリアルを開始する
以下ページの「OPEN IN GOOGLE CLOUD SHELL」という青いボタンを押すと、Cloud Shellが立ち上がり、チュートリアルがスタートします。

https://cloud.google.com/shell/docs/cloud-run?hl=ja

※ブラウザはChromeで、Googleにログインした状態で始めるとスムーズだと思います。

※途中で、Cloud Runのデプロイ先のプロジェクトを聞かれるので、先にGoogle Cloudのプロジェクトを作成しておくと良いです。

※「Cloud Run API」は有料なので、支払い情報が無いアカウントだと途中でエラーになります。

![スクリーンショット 2021-09-25 11.54.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/e538c359-d40e-054e-2a9d-0f86ea6ce78f.png)

言語選択のオプションがあるので、今回はNode.jsを選択してみました。
選択すると、これから始めるチュートリアルの内容が出ます。

<img width="300" alt="11.55.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/04694206-2aba-0052-8cf0-b46b74b687e3.png">
内容の下の方にある、開始ボタンをクリックします。

<img width="400" alt="11_56_38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/12077062-69e8-3898-c13e-c1951ec4a55b.png">
指示の通りに、左下の方にある、「Cloud Code」をクリックします。

<img width="400" alt="11_56_５９.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/1f69c3ee-78a6-fc32-0653-d481173ce569.png">
すると、上の方にメニューが出てきますので、「New Application」を選択します。

<img width="600" alt="11_57_19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/e03fa057-d275-e8bd-5ed5-39e6ff111b07.png">
サンプルアプリケーションの種類を問われますので、「Cloud Run applicarion」を選択します。

<img width="400" alt="11_57_30" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/aaed02ab-9385-de1c-f125-e0b0ea007f1e.png">
テンプレート選択のメニューが出ますので、「Node.js:Cloud Run」を選択します。

<img width="400" alt="11_58_05" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/8e6c0a88-a764-54cf-7d9d-d237a76e445f.png">
アプリケーションの保存先（クラウド上です）を聞かれますので、選択し、「Create New Application」を押下します。今回はユーザーディレクトリ直下に作っています。

![スクリーンショット 2021-09-25 11.58.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/0d930b57-88e5-89c6-6429-d8b41293f6ad.png)
すると、HELLO-WORLD-1というテンプレートアプリケーションが作られます。
この状態で、既にデプロイ可能になっています。
早速デプロイしてみましょうと言われるので、デプロイしてみます。

---
### デプロイする

<img width="400" alt="11_59_50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/6f3ecec9-62a2-54b5-4caf-97b38da48dad.png">
左下の方にある、「Cloud Code」をクリックします。

<img width="400" alt="12_00_03" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/34711a53-fe41-c3fe-79ff-ef5294993c3b.png">
上の方にメニューが出てきますので、「Deploy to Cloud Run」を選択します。

<img width="600" alt="12_00_４２" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/a3453792-3afe-8e3c-bc94-2eba035cccb4.png">
このようなポップアップウインドウが出てきますので、承認します。

<img width="600" alt="12_03_50" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/9cdb1fa6-e45a-9429-0c38-36cd740f020a.png">
プロジェクトの一覧が出てくるので、デプロイ先のプロジェクトを選択します。

<img width="600" alt="12.04.38" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/64827519-47a9-3f61-6281-b897208130e8.png">
「Enable API」のボタンを押下して、Cloud Run APIを有効にします。
注意：「Cloud Run API」は有料なので、支払い情報が無いアカウントだとここでエラーになります。

<img width="600" alt="12.05.37" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/74c6e51f-ed2b-c38a-6cf7-96f053ae433f.png">
<img width="600" alt="12.06.35" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/42508d17-04cb-2f6c-87b7-b96537c3c802.png">
設定画面が出てきますので、ここでリージョンや名前などを設定して、スクロールすると一番下にある「Deploy」ボタンを押下します。

<img width="600" alt="12_09_38" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/667ebbd5-0c0e-a93d-1c11-b3af5096d764.png">
しばし待つと、デプロイが完了し、URLが表示されます。

![スクリーンショット 2021-09-25 12.10.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/dfa9b3cc-6124-47b8-be96-daa670fe2582.png)
デプロイが正常に完了し、Cloud Runが機能していることが分かります。

---
### 内容を変えて再度デプロイしてみる

コードを修正して、再度デプロイしてみます。
![スクリーンショット_2021-09-25_12_13_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/e1543a6a-09a0-c410-81eb-cf6175a0545a.png)
index.html.hbsの「It's running!」というタイトルを「It's redeployed!」に変更します。

あとは上記手順に習い、左下の方にある、「Cloud Code」をクリック、上の方にメニューが出てきますので、「Deploy to Cloud Run」を選択すると、設定画面が出てきますので、「Deploy」ボタンを押下します。

![スクリーンショット 2021-09-25 12.16.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/d0bccadd-dcf2-0d12-493c-518b00b5920b.png)
変更出来ていますね。

---
### ログの確認
チュートリアルの最後に、アクセスログを確認する手順がありますので、やってみます。
<img width="400" alt="12_17_18" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/31f28992-0a32-cb2c-555a-27ec8cd43e73.png">
Cloud Sellの矢印のついたアイコンをクリックします。
すると上記画面になるので、対象サービスを右クリックします。
すると、メニューが出てきますので、「View Logs」を選択します。

![スクリーンショット 2021-09-25 12.17.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2788/a3c0119b-0f8d-d68a-c305-38a9c71eb840.png)
LogのViewerが立ち上がります。
先程のページにアクセスして、ログの表示を更新すると、ログが追加されていくことがわかります。

---
### 感想
お気づきかと思いますが、今回最初から最後まで、Webブラウザしか起動していません。
にも関わらず、コンテナをCloud Runで起動し、内容を変更して再デプロイという体験が出来ました。
Cloud Shellはかなり強力なオンラインエディターで、iPadやChrome Bookなどの端末での開発もかなり高いレベルで可能だと思いました。
今後こういう、クラウド上のGUI開発環境で開発するような世の中になっていきそうですね。