[Advent Calendar 2021][Day25]アドベントカレンダーのWebアプリ開発のまとめ

はじめに

Advent Calendar 2021のDay25。 24日までアドベントカレンダーのWebアプリ開発をしてきました。 今回は、まとめです。

まとめ

KPTで振り返りしていきます。

企画方針を確認

Advent Calendar 2021の企画方針。

  • 最近のイケてる技術を使ってみる
  • 動作するソースコードを公開する
  • 25日全ての記事を書いていく
    • 記事の内容が短くても

Keep

  • 25日全ての記事を書いた

    • こういうイベントがないと、自発的に記事を書く機会がないので、よかったです。

  • nuxt3 + hasura + firebase auth + go(hasura action) + CloudRunは良い構成だった。

    • 大抵のアプリはこれで作れる。

  • urqlがNiceなので使っていきたい

    • 今回初めて使いましたが、apolloよりシンプルに使えた感じです。
    • Nuxt3でも動きますし、自動生成にも対応しているので開発者体験としてはかなり良かったです。
    • 今回はCache機構は使いませんでしたが、選択肢としてCache機構があるのは良いです。高トラフィックになると効いてきます。

  • gqlgencがNiceなので使っていきたい。

    • 他のGoのGraphqlClientと比べて一番良かったです。
    • 自動生成されるコードがキレイです。

  • CloudRun最高に便利なのでこれからも使っていきたい。

    • 当初はGoogleAppengineを使おうとしていましたが、CloudRunに変更しました。
    • CloudRunは、Dockerイメージが動かせて、従量課金なのですぐに使い始められますし、柔軟性があります。
    • Dockerさえ動かせられれば、あまり副作用なく使えるので、最高だと思います。
    • 新しいフィーチャでCPU is always allocated が追加されてHasuraのような立ち上がりに少し時間がかかる部分では、良い選択肢だと思います。リクエストによらずバックグラウンドで動作させたいワークロードも動かせるようになるので、選択肢の幅が増えてかなり使いやすくなっています。万能だなと思っています。

Probrem

  • 全体的に雑なつくり・・。

    • これは、想定通りというか、実験的要素が強いと最初からわかっていたので、試行錯誤することは多かったです。
    • とくにNuxt3（Vue3も）は、公開されてからまだあまり触れていなかったので、今回を機に知ることが出来てよかったのと、コードはかなり雑だなと反省しています。

  • Hasura <-> GoAppの相互依存。 相互依存しているので分離したほうが良いですね。

  • Nuxt3の静的ファイル生成ができない。

    • フロントエンドのアーキテクチャを選ぶなら、まず最初に上がるのがJAM Stackで、静的ファイルを配置するようにしたいのですが、Nuxt3ではまだ対応できていないので今後に期待です。

  • CloudRunのセキュリティ

    • CloudRunのシークレット情報は、環境変数ではなくシークレットを使ったほうが良いでしょう。
    • CloudSQLへの接続は、VPCアクセスにしたほうが、より安全ですね。
    • また、CloudRunの通信は、内部通信のみを許可するようにしたほうが安全でしょう。
    • フロントにLoadBalancerを配置してそこからの通信のみを許可するにすれば、CloudRunに直接アクセスされることを防ぐことができます。また、LoadBalancerにCloudArmorなどを配置すれば、Ingressのセキュリティを一元的に管理できると思います。

Try

  • Nuxt3

    • composable

      • 今回は、使いこなせなかったです。urqlの通信部分とかfirebaseの部分は、今回の規模では再利用する部分が少ないので、Pageにそのまま実装しました。しかし、Composableで再利用可能なコンポーネントとして実装していくのが良いでしょう。

    • middleware

      • Nuxt2で提供されていた、Middlewareの機能がなくなったので、認証で保護されるページなどはどうやって作るか悩みました。今回はそのようなページはありませんでしたが。Pluginにかけば、大抵のことはできちゃうのですが、肥大化していくのでNuxt2のようにページごとにMiddlewareを適用するようにしたほうが良さそうです。Composableを使えばできそうな気がする。

  • 相互依存をPubsubなどのメッセージシステムをつかって分離する。

    • Hasura ActionやEventをPubsubで別のk8sクラスタなどに飛ばすこともできるので、かなり柔軟性があがります。
    • 一方、メッセージを冪等に扱うなどシステムとしては複雑度が高くなりますが、大規模システムでもフロントエンドとバックエンドを分離することができて、バックエンドの自由度が高いので、良い選択肢だと思います。

  • 来年のアドベントカレンダーも完走する。

ドキュメント

途中からシステム構成など変わってしまったので、最新の構成でドキュメントを修正しました。

ざっくりした構成図

architecture

ざっくりとしたER図

er-diagram

レポジトリ

今回の成果物のレポジトリ。

https://github.com/cloudandbuild/Advent-Calendar-2021