GCPでオレオレStackEditを建ててみた

# 概要
[StackEditのmermaidを更新してみた](https://qiita.com/vienai8d/items/7be052e80e70b806d310)の続き。
localhostで起動しているオレオレStackEditは同期機能や投稿機能が使えない。
とりあえずGoogle Driveの同期機能を使えるようにしてみた。

# なぜ同期できない？
[StackEditのREADME](https://github.com/benweet/stackedit)をみてみると、、、

```bash
# Deploy StackEdit chart to your cluster
helm install --name stackedit stackedit/stackedit \
  --set dropboxAppKey=$DROPBOX_API_KEY \
  --set dropboxAppKeyFull=$DROPBOX_FULL_ACCESS_API_KEY \
  --set googleClientId=$GOOGLE_CLIENT_ID \
  --set googleApiKey=$GOOGLE_API_KEY \
  --set githubClientId=$GITHUB_CLIENT_ID \
  --set githubClientSecret=$GITHUB_CLIENT_SECRET \
  --set wordpressClientId=\"$WORDPRESS_CLIENT_ID\" \
  --set wordpressSecret=$WORDPRESS_CLIENT_SECRET
```

なんとか_CLIENT_IDが各サービスごとにあるので、
同期や投稿を仲介するアプリケーションアカウント的なものを設定する必要がある。
おそらく、API KEYはコールバックを設定するので外部公開しないといけないさそう。

**GCPでStackEdit建ててみるか！（唐突）**

# デプロイ手順

[Cloud Run](https://cloud.google.com/run)で建てます。

## 0. GCP利用登録・Cloud SDKセットアップ 

割愛

## 1. プロジェクト作成
プロジェクト選択 > 新しいプロジェクト
<img width="659" alt="スクリーンショット 2020-02-13 20.36.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/9b157f46-900c-99a3-3283-8e93b4cd93e1.png">
「StackEdit」プロジェクトを作成
<img width="524" alt="スクリーンショット 2020-02-13 20.35.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/ead5ff56-1014-4424-7fa9-814bb61402e8.png">

## 2. ContainerRegistryにイメージ登録

Container Registry > イメージ
<img width="393" alt="スクリーンショット 2020-02-13 20.38.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/4ad4e30e-54a2-8ca2-1576-715b57f87891.png">

「Container Registry APIを有効化」
<img width="430" alt="スクリーンショット 2020-02-13 20.49.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/8a09c62a-c48c-9b76-e79f-d727e4f04c8b.png">

[レジストリにイメージを push](https://cloud.google.com/container-registry/docs/pushing-and-pulling?_ga=2.128290956.-1458674211.1581323708&hl=ja)に従ってDockerイメージをpush
※dockerが使える環境で実行

```bash
HOSTNAME=asia.gcr.io  # アジアでイメージをホスト
PROJECT_ID=stackedit  # プロジェクトID
IMAGE=stackedit       # イメージ名
TAG=${HOSTNAME}/${PROJECT_ID}/${IMAGE}
git clone -b update-mermaid https://github.com/vienai8d/stackedit.git
cd stackedit
docker build . -t ${TAG}
docker push ${TAG}
```

pushに成功するとContainerRegistryページにイメージが現れる
<img width="398" alt="スクリーンショット 2020-02-13 21.03.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/aabd390d-cf63-770e-cd25-18ea41c009e5.png">


## 3. Cloud Runでデプロイ
「CLOUD RUNの使用を開始する」
<img width="639" alt="スクリーンショット 2020-02-13 21.04.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/f75d7d53-3e30-12f8-5751-2bf8b5a2bed4.png">

「＋」
<img width="401" alt="スクリーンショット 2020-02-13 21.06.02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/3d146de6-638a-f6ec-2690-89b4eb839f3c.png">

以下の内容で作成

- Container Registryに登録したイメージを選択
- Cloud Runのリージョンは「Tokyo」に
- サービス名は「stackedit」
- 未承認の呼び出しを許可
<img width="537" alt="スクリーンショット 2020-02-13 21.07.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/ed4a50c5-2106-b9a4-7ac3-f3e4ead023ef.png">

URLが表示される
<img width="685" alt="スクリーンショット 2020-02-13 21.11.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/4dda0cce-3801-f96e-bb09-ac656bc27aa9.png">

見れた！ :tada: 

<img width="707" alt="スクリーンショット 2020-02-13 21.12.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/1f385633-e1a3-aa63-2e1f-37ed82bed482.png">


ここからさらに、同期機能・投稿機能を有効にするための設定を行う。

## 4. OAuth同意画面設定
APIとサービス > OAuth同意画面
<img width="486" alt="スクリーンショット 2020-02-13 21.15.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/cdbc8240-f431-7aa5-334f-f7182d988ac7.png">

UserTypeは「外部」を選択 > 作成
<img width="537" alt="スクリーンショット 2020-02-13 21.15.53.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/0ee4eec6-595a-8e1f-aa4c-4692774fe567.png">

アプリケーション名は「stackedit-vienai8d」とした
<img width="482" alt="スクリーンショット 2020-02-13 21.19.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/6ef7905b-43c7-fbd2-74a4-9d84a7cedcc3.png">

CloudRunで発行されたドメインを承認済みドメインに追加
<img width="456" alt="スクリーンショット 2020-02-13 21.25.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/cbe51d8e-fbce-61ac-89d7-0ff5b2c1aa4d.png">



## 5. APIキー作成

APIとサービス > 認証情報
<img width="486" alt="スクリーンショット 2020-02-13 21.15.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/0285b9d1-a73d-3854-07b9-3b976efd337b.png">

まずは「APIキー」を作成
<img width="893" alt="スクリーンショット 2020-02-13 21.22.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/6d7c00ef-46f5-3551-002b-a6d7bddb4c63.png">

## 6. クライアントID作成
次は「OAuthクライアントID」を作成

- ウェブアプリケーションを選ぶ
- 承認済みのJavaScript生成元にCloudRunで生成されたURLを指定
- 承認済みのリダイレクトURLは、CloudRunで生成されたURLの末尾に`oauth2/callback`をつける→[ソースコードで確認](https://github.com/benweet/stackedit/blob/07d824faca0f823b9d573980144f02be3708cbeb/src/data/constants.js#L6)

<img width="627" alt="スクリーンショット 2020-02-13 21.34.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/4fc3b9e8-b2af-6c2b-e762-58aa3e65d4ac.png">


## 7. Cloud Run 更新
Cloud Runページに移動し、stackeditを選択
<img width="384" alt="スクリーンショット 2020-02-13 21.36.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/15c46f6a-00c5-f04e-668b-8c2caa278030.png">

「新しいバージョンをデプロイ」
<img width="662" alt="スクリーンショット 2020-02-13 21.37.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/d1a549aa-0842-83fb-ac88-1d519bc777c6.png">

環境変数 > 変数を追加

- GOOGLE_CLIENT_IDとGOOGLE_API_KEYを追加してデプロイ
- xxxを適当な文字列に変えること
- DropBoxやGitHub連携したい場合は同じ要領で変数を追加する

<img width="520" alt="スクリーンショット 2020-02-13 21.39.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/ddb67a62-a17a-0133-dbad-06039c9f93a6.png">


デプロイ後、「Sign with Google」を試す
<img width="417" alt="スクリーンショット 2020-02-13 22.44.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/ff5063a2-3d53-1da6-8223-522040eb5b35.png">

OAuth同意画面に飛ばされるので、ログインしてもろもろ許可。
<img width="492" alt="スクリーンショット 2020-02-13 22.50.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/fb23711d-544a-5702-aa22-52976f5e4f27.png">

同期がはじまらない。
ブラウザでログをみるとPeopleAPIが有効になっていない模様。
次のステップでライブラリを許可していく。
<img width="643" alt="スクリーンショット 2020-02-13 22.51.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/c6c98865-6e14-bcb9-5970-d3f3f607d3d3.png">


## 8. ライブラリの有効化
APIとサービス > ライブラリ
<img width="473" alt="スクリーンショット 2020-02-13 22.54.50.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/da821990-8a7e-eec7-5dab-169673939f37.png">

GooglePeopleAPIを検索→「有効化にする」
<img width="535" alt="スクリーンショット 2020-02-13 22.56.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/7a212ee5-9cd7-1214-bef6-867755ff95f7.png">

Google Drive APIを検索→「有効化にする」
<img width="559" alt="スクリーンショット 2020-02-13 23.00.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/5e569b27-d7d2-5638-8993-dcffcdc5d715.png">

GoogleDriveと同期できた :tada: 
<img width="334" alt="スクリーンショット 2020-02-13 23.00.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/91cf64cf-241f-1eb9-58fd-6afe854dc853.png">


# おまけ

Chromeアプリとしてインストールできるようにもなっていた :sunglasses: 
<img width="697" alt="スクリーンショット 2020-02-13 23.07.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/32410/8518b563-e7b8-96bd-90b5-eef591aea60a.png">


# 最後に
実は初めてGCPを使ったが案外簡単にデプロイできた。
Cloud Run楽すぎる。