gRPC-Webを利用してAnonymous HatenaBookMark をリリースした

1分で読めます

何か新しいことを学びたいということで作ってみました。何かプロダクトを出すよりも、新しいことを学ぶ意識の方が強いです。プロダクトについては後日のブログで書くことにして、このブログではtechに焦点を当てたいと思います。といっても、gRPC-Web + React + Node.js + TypeScriptでシンプルなチャットサービスを作る にほとんど書いてあるので、それ以外のインフラこととかを書いていきます。他サイトのリンクが多いです。

プロダクトは、こちら

Update on July 25, 2020

「作ってみました」じゃなくて「リリースしました」と言おう を読んで、リリースしたにタイトルを変更した。

Overall

概略です。はじめてづくしで久々にフロントエンドからバックエンドまで書いてます。

infra: gke + cloud storage + cloud dns 
backend: golang + grpc + envoy
frontend: react + typescript + bulma
misc: gitlab ci

architect

Price

5000円 / month くらいで運用してます。値段を下げたい。GKEとCloud storage の前段に、ロードバランサがあって、monthly で \$16 くらいで、$ 16 * 2がロードバランサの値段です。残りがGKEの値段です。高いので値段を下げたいです。

Infra

GCP使ってterraform化してます。backendのK8sは、gkeを最小構成で利用しています。Let’s encryptを使って証明書を作って後述のenvoyにconfigに設定しています。frontendは、cloud storageに置いてて、publicで見れる状態にしてます。cloud storage側の証明書は、google のmanaged 証明書を利用しています。 Configuring Google Cloud CDN with Terraform を参考にして作っていますが、beta機能を使っているので少し心配です。 費用が下げたいので、could storage使うんじゃなくて、static fileを go のバイナリに入れらいかなーって考えてます。

EnvoyがgRPC-Web proxy

肝だと思ったのは、gRPC-Web proxyに何を利用するかで、一般的にenvoyが利用されてるみたいなので、envoy使いました。設定も簡単で、envoy.grpc_web フィルターを使って設定していくだけです。詳しくは、Getting Edgy: Understanding gRPC and gRPC Web と envoy の gRPC proxy に関する便利機能 をみてください。 この設定のEnvoyをdeployment で動かして、ロードバランサーのupsteamに設定するだけです。

backend

困ったことは、特になし。感想を書く。そろそろgolangを使えるようになりたいというのと、前職が内部的にgRPCをgolangで書いてたのをみてたので、golangで書こうと思った。golangもgRPCもよくわかってなかったので、よくわかるgRPC と 改訂2版 みんなのGo言語 を参考にしながら実装した。要件は、HTTPでデータを受け取りgRPCで返すというシンプルものだったので、golang + vscodeの組み合わせで、サクサクかけた。あとは、k8Sにのっけるだけでおしまい。 ただ、logとかstatsは何もしてないので、検討する必要ある。パッケージの構成も改善しなきゃいけない。

frontend

react + typescript で書くのを決めた。grpc-web の typescript module は、まだan experimental feature であるので、潜在的な問題があるかもしれない。遭遇した一つは、protocで生成したファイルがeslintでエラーになるという問題があった。/*eslint-disabled */ を preappendすることで、暫定対応とした。Failed to compile. ‘proto’ is not defined (also ‘COMPILED’) が Fixedになってるので、もう修正済みかもしれない。まだ確かめてない。
自分がJSを最後に書いたのは、coffeescriptだったり、jQueryだったり、Gruntだったりのころだったので、新鮮だった。reactのtutorialを二回やったあとに書いたので、時間が思ったよりかかった。

感想

全てに型があるので、すごくやりやすかった。デファクトになっていくんじゃないかなと思った。以下のURLの動画は、gRPC kotlinだけど未来感があった。

試していきたいこと

  • (backend) cache
  • (backend) A server-side streaming RPC
  • (infra) gitops using argocd
  • (infra) service mesh using kuma
  • (infra) automation deploy
  • (infra) Metrics using prometheus?
  • (infra) load testing using k6?
  • (frontend) build single binary into golang binary
  • (frontend) react native for web
  • (frontend) better user interface

最後に

仕事探してるので、興味もってくれたら連絡くださいー 🙇‍♂️ 🙇‍♂️ 🙇‍♂️ 🙇‍♂️ 🙇‍♂️ 🙇‍♂️
仕事じゃなくても。。。gitlabのcodeは見せることはできるので。