3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

クレジットカードの明細を検索できるサービスをモダンな技術セットで作ってみた

Posted at

個人開発したアプリの紹介記事です。

どんなアプリか?

皆さん、毎月クレジットカードの明細は確認していますか?

クレジットカードを使うとき、見慣れない明細を見たとき不安になりませんか?

クレジットの明細を投稿・閲覧できるサイトをGolangとAWSを用いて作成しました。

技術セット

今回は、S3の静的ホスティング機能を使いました。また、独自ドメインを取得して、Cloudfrontを使うことで、hptts通信でアクセスできるようにしました。
ホスティングしているのは、htmlファイルですが、デザインはtailwindCssを使い、jsフレームワークにalpine.jsを使いました。
バックエンドには、lambdaとgolangを用い、DBとしてDynamoDBを採用しました。

自分としては、lambdaのハンズオンを少しやったことがある程度で、golangとDynamoDBは初めて触りました。
それほど難しい操作は実装していませんが、それでも難しかったです。

技術的に苦労したことや発見など

今回、S3の静的ホスティング機能を使うため、フロント側のコードを1つのファイルにまとめる必要がありました。そのため、別のコンテンツ(ページ)に遷移するために、新しくファイルを作成することはできません(つまり、俗にいうペライチになる)

※もしかしたら、aタグのリンク先に、S3に配置した別ページのURLを設定しておけば、複数ページのWebサイトを作成することが出来るかもしれません。

ペライチなので、同じURL内で、モーダルなどをうまく活用しながら、投稿フォームや投稿詳細情報などを切り替えて表示していかなくてはいけません。また、CSSやJSの記述も、そのindex.htmlファイル内で行う必要があります。

また、alpine.jsやtailwindなどのパッケージについては、CDNで取得しています。本家のサイトにもありますが、本番環境での構築でCDNを使うことは非推奨です。npmやyarnなどのパッケージマネージャーを使いたい場合は、S3ホスティングはあきらめた方が良いです。

どうしてDynamoDBを使ったのか?
一つ目は私自身の勉強のためです。NoSQLデータベースを勉強したかったからです。スキーマレスであることやコマンド発行の仕方が独特でした。
エイリアスを使って、プレースホルダーで変数をSQLに埋め込む仕組みには馴染み深かったです。

もう一つは、予算の問題です。なるべく低予算で作りたいと思いました。AWSにはありがたいことに、様々なリソースの無料枠があります。MySQLなども使えるRDSも、1年間の無料枠がありますが、コスト的に使いずらいです。一番小さいdb.t3.microでも3,000円ほどかかります。1年後、月々3,000円も支払うのはきついです。1年以内に

このサービスは、ユーザーに投稿してもらうコンテンツの質と量が重要です。いきなりバズることはあり得ないので、少しずつユーザーを増やし、投稿してもらうことが重要です。
そのため、なるべく低価格で運用できることを第一に考えました。

技術セット

CloudFront,S3,ApiGateway,Lambda,DyanmoDB

クレジット明細アプリ.drawio.png

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?