TODOのwebアプリを作ってみた話

主にクライアントアプリの運用保守をしていた自分が、別のチームでwebアプリを作っていくことになったので、事前準備としてTODOアプリを作成した流れとその感想を書いてみました。

アプリはVite+Vue+TypeScript+golangという構成で作りました。

やったこと

1. dockerでローカルにPostgreSQLを構築
2. frontをVue+TypeScript+Quasar+Viteで作成
3. backendをgolangで作成(ORMはGORM)
4. 1〜3の構成でローカルで動かす
5. docker化
6. GCP構築
7. Terraform化

ローカル構築（1〜４）

前のチームでPythonでのwebアプリ開発に携わっていましたが、主に仕様調整と設計を行なっていたためwebアプリを自分で作ってみるというのは初でした。
扱う言語も全て初めてだったので、まずはUdemyの講座を受講して基本的なところをザッと確認して、作ってみて詰まった時は、チーム内の方に教えてもらいながら進めていきました。
お恥ずかしながら相談するのが苦手でそこもフォローしてもらったりもしました。

今までは修正などが多かったので、元があるものを加工することが多かったのですが、今回は0からの構築だったので、自分が何が苦手なのか改めて見えてきました。

ViteとQuasarは未だ深いところは理解できていませんが、サクッと環境を作ってそれなりの見栄えがするアプリを作ってみるという体験ができて、扱っていて楽しかったです。

dockerもちゃんと触るのは初めてでしたが、この時点ではDB構築のみでしたし、関連したドキュメントが多かったので特に苦労せずさくっと作れました。

GORMでは結構詰まったりしましたが、それは別の記事にしています。
『GORMでテーブル名やカラム名指定するのに苦戦した話』

Docker化（5）

ここからはエラーを出してドキュメントを調べて修正していくという作業の繰り返しでした。
ローカルを指定する場合にはどうやって記述するのかとか、環境変数に設定しておかなければいけないものとか色々ありました。
また、タイポによるエラーが結構多かったんですが、プログラムを書く時と違いエラーが直接的でなかったりするため、そのミスに気づかず結構時間を食いました。

トラブル例

backendのimage作成をする際に以下のエラーが発生しました。

failed to load cache key: pull access denied, repository does not exist or may require authorization: server message: insufficient_scope: authorization failed

これは以下の環境変数を設定することで解消しました。

export DOCKER_BUILDKIT=0
export COMPOSE_DOCKER_CLI_BUILD=0

また、別コンテナのDBにアクセスしようとしてエラーになりましたがこれは
ホスト名を”localhost”にしていたからで”host.docker.internal”とすることで解消しました。

GCP構築(6)

backendをCloud Runで、
frontをGCSで、
DBをCloud SQLで構築しました。

DBはドキュメントを見ながらサクッとできましたし、backendをのせること自体はdocker化していたので難なく行えました。
割と詰まったのはfrontをGCSにのせるところでした。

のせること自体はただビルドしたファイルをアップするだけですが、ルーティングなどの設定で少し詰まりました。

この辺りはチームで経験のある方がいらっしゃったので、教えてもらいながらクリアしていきました。

トラブル例

ここは本当にしょうもないミスですが、ずっとローカルで作っていたので、APIリクエストをセキュアにするのを忘れていたということがありました。単純に"http"としていたのを”https”にすることで解消しました。

また、これはトラブルというよりGCPの知識ですが、URLで”index.html”を省略する方法が分からずにいました。
公式のドキュメントがあるんですが、当初見つけられずにいました。

手順は公式ドキュメントをご参照ください。
推奨: 特殊ページを割り当てる

Terraform化(7)

ここもdocker化同様。かつそれ以上にエラーとのにらめっこでした。

頭がごちゃごちゃしすぎて、チームメンバーのアドバイスで一度terraformで「hello world」を表示してみるというところまで落としてやってみました。

それは問題なくできたので、バージョンなどではなくやはり個別の項目の設定だとわかりましたが、単純化したことで流れが見え始めました。

それでもGCPのコンソールでポチポチと構築していく時にはあまり意識せずとも設定されていくところを、terraformではキチンと明示して設定しなければいけなかったり、またまたタイポだったりのエラーに悩まされたりしました。

同僚が別記事にしているこちらの方法(『既に作成されているクラウドサービスのインフラをコード化する』)を使って、正常に稼働する状態と比較したりしてなんとかアプリが起動できる状態になり完成しました。

トラブル例

terraformのサービスアカウントの権限が不足しているということがありました。
これにより、GCPの各サービスに必要な権限をつけようとしてもエラーになるという状態になっていました。これは必要な権限(今回はオーナー)をつけてあげることで解消しました。

また、GCSのファイルにアクセスできないという問題もありました。
これは”contet-type”を指定していなかったんですが、指定するようにしたら解消しました。

終わりに

簡単な修正を除けばコーディング自体が久しぶりだったこともあり、かなり時間がかかってしまいました。快くこの時間を持たせていただけたことに感謝してます。
この経験を生かして、今後何か新しい技術が出てきたらサクッと試してみるなんてことがプライベートでもできるかなと思ってます。

世の中にTODOを作ってみたという投稿が沢山ありますが、backendとfrontの相互間のアプリケーションの動き全体を網羅的に学ぶのにいいからというのがやってみて良くわかりました。
試しに何か作ってみたいけど何作ればいいか分からないという方は是非TODOアプリを作ってみてはいかがでしょうか。