Skip to content
AWSの料金を、日本円でざっくり
JavaScript Vue CSS
Branch: master
Clone or download

README.md

ざっくりAWS

ざっくりAWS

AWS の料金を日本円でざっくり計算できるサイトです。

入力の手間を減らすために、料金への影響が少ない項目は削っているため、手軽に概算を算出できます。

正確な料金は必要ないから適当な入力でざっくり知りたい、みたいなときに便利かもしれません。

https://aws.noplan.cc

License: MIT CircleCI

使い方

# インストール
npm install

# 開発サーバーの起動
npm run dev

# ユニットテスト
npm run test:unit

# E2Eテスト向けに静的ファイルを生成
npm run generate:test

# E2Eテスト
npm run test:e2e

# テストをまとめて
npm run test

# 本番向けに静的ファイルを生成
# E2Eテストに使用した要素のdata-test属性を削除しておく
npm run generate:production

ライブラリ/フレームワーク

このWebサイトは、主にVue.jsでできています。

Vue.js

公開当初からVue.jsを使ってUIを構築しています。
ReactとVue.jsで迷いましたが、HTMLをガシガシ書きたかったので、
テンプレートやスタイルを楽に書けるVue.jsを選びました。

Nuxt.js

最初はVue.js単体で使っていたのですが、Nuxt.jsで静的サイトを生成できることを知って移行しました。

Jest

テストにはJestを使用しています。
計算のロジックのユニットテストがメインです。

Puppeteer

E2EテストのためにPuppeteerを導入しました。
直感的に書けて動作も速いので重宝しています。

インフラ構成

AWSの料金をざっくり計算できるサイトなので、AWSを使っています。

フロントエンド

CloudFront + S3

Nuxt.jsで静的に生成したファイルをS3へホスティングして、手前にCloudFrontを置いています。

バックエンド

API Gateway + Lambda + S3

計算結果を保存するAPIは、 API Gateway + Lambda で構築しています。
データの保存には DynamoDB を使おうと思っていたのですが、キャパシティを考えるのが面倒だったのと、ライフサイクルが便利だったので S3 にJSONをぶち込む形にしました。

運用フロー

運用フロー

計算に使用する為替やAWSの料金は、Lambdaで定期的に取得しています。
毎朝10時にLambdaを起こして価格の更新を行い、CircleCIで静的ファイルを生成してからデプロイする流れです。

価格を取得するLambdaのコードは別のリポジトリで管理しています。
https://github.com/nishinoshake/aws-rough-functions

ご意見・ご要望

追加して欲しいサービスや機能、致命的なバグなどがありましたら、issueにあげていただくか、なんらかの方法でご連絡をお願いいたします。サイト名が「ざっくりAWS」なので、ざっくりじゃなくなってしまう機能追加は難しいですが、できる限り対応いたします。

You can’t perform that action at this time.