Help us understand the problem. What is going on with this article?

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

概要

StackEditのmermaidを更新してみたの続き。
localhostで起動しているオレオレStackEditは同期機能や投稿機能が使えない。
とりあえずGoogle Driveの同期機能を使えるようにしてみた。

なぜ同期できない?

StackEditのREADMEをみてみると、、、

# 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で建てます。

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

割愛

1. プロジェクト作成

プロジェクト選択 > 新しいプロジェクト
スクリーンショット 2020-02-13 20.36.32.png
「StackEdit」プロジェクトを作成
スクリーンショット 2020-02-13 20.35.01.png

2. ContainerRegistryにイメージ登録

Container Registry > イメージ
スクリーンショット 2020-02-13 20.38.49.png

「Container Registry APIを有効化」
スクリーンショット 2020-02-13 20.49.34.png

レジストリにイメージを pushに従ってDockerイメージをpush
※dockerが使える環境で実行

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ページにイメージが現れる
スクリーンショット 2020-02-13 21.03.40.png

3. Cloud Runでデプロイ

「CLOUD RUNの使用を開始する」
スクリーンショット 2020-02-13 21.04.59.png

「+」
スクリーンショット 2020-02-13 21.06.02.png

以下の内容で作成

  • Container Registryに登録したイメージを選択
  • Cloud Runのリージョンは「Tokyo」に
  • サービス名は「stackedit」
  • 未承認の呼び出しを許可 スクリーンショット 2020-02-13 21.07.35.png

URLが表示される
スクリーンショット 2020-02-13 21.11.34.png

見れた! :tada:

スクリーンショット 2020-02-13 21.12.52.png

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

4. OAuth同意画面設定

APIとサービス > OAuth同意画面
スクリーンショット 2020-02-13 21.15.28.png

UserTypeは「外部」を選択 > 作成
スクリーンショット 2020-02-13 21.15.53.png

アプリケーション名は「stackedit-vienai8d」とした
スクリーンショット 2020-02-13 21.19.38.png

CloudRunで発行されたドメインを承認済みドメインに追加
スクリーンショット 2020-02-13 21.25.27.png

5. APIキー作成

APIとサービス > 認証情報
スクリーンショット 2020-02-13 21.15.28.png

まずは「APIキー」を作成
スクリーンショット 2020-02-13 21.22.26.png

6. クライアントID作成

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

  • ウェブアプリケーションを選ぶ
  • 承認済みのJavaScript生成元にCloudRunで生成されたURLを指定
  • 承認済みのリダイレクトURLは、CloudRunで生成されたURLの末尾にoauth2/callbackをつける→ソースコードで確認

スクリーンショット 2020-02-13 21.34.13.png

7. Cloud Run 更新

Cloud Runページに移動し、stackeditを選択
スクリーンショット 2020-02-13 21.36.16.png

「新しいバージョンをデプロイ」
スクリーンショット 2020-02-13 21.37.51.png

環境変数 > 変数を追加

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

スクリーンショット 2020-02-13 21.39.03.png

デプロイ後、「Sign with Google」を試す
スクリーンショット 2020-02-13 22.44.50.png

OAuth同意画面に飛ばされるので、ログインしてもろもろ許可。
スクリーンショット 2020-02-13 22.50.10.png

同期がはじまらない。
ブラウザでログをみるとPeopleAPIが有効になっていない模様。
次のステップでライブラリを許可していく。
スクリーンショット 2020-02-13 22.51.19.png

8. ライブラリの有効化

APIとサービス > ライブラリ
スクリーンショット 2020-02-13 22.54.50.png

GooglePeopleAPIを検索→「有効化にする」
スクリーンショット 2020-02-13 22.56.17.png

Google Drive APIを検索→「有効化にする」
スクリーンショット 2020-02-13 23.00.01.png

GoogleDriveと同期できた :tada:
スクリーンショット 2020-02-13 23.00.46.png

おまけ

Chromeアプリとしてインストールできるようにもなっていた :sunglasses:
スクリーンショット 2020-02-13 23.07.00.png

最後に

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした