作ったもの
複数店舗のシフト管理サービス
作った経緯
- 仕事では企画的なことやお客様との調整ごとが多く、開発することから離れつつあった
- 昔、学生時代にバイトしてた頃、シフトが紙媒体だったので、面倒だった
- 既存のシフト管理サービスは有料のものが多かったので、無料でサービス提供できないか試したかった
一番は単純に開発がしたかったのが大きかったですね。
システム構成
構成図
結構、スタンダードな構成かと思います。
言語/ライブラリ
- JavaScript
- React
- Bootstrap
主要なAWSサービス
- Route 53
ドメインのDNSレコードの管理が出来るサービス。
CloudFrontにルーティングするために利用。
お名前ドットコムで取得したドメインを登録。
(AWSでもドメインは取得できますが、お名前ドットコムの方が安い気がします) - Certificate Manager
SSL/TLS証明書を簡単に発行、管理できるサービス。
HTTPS通信を行うために利用。
ボタンをポチポチすれば、勝手にいい感じにやってくれます。 - CloudFront
CDN(Content Delivery Network)サービス。
HTTPS通信とコンテンツの配信のために利用。
OAC(Origin access control)でS3へのアクセスをCloudFrontに制限する。
以前はOAI(Origin access identity)というやり方がありましたが、今はOACでやることが推奨されているようです。 - S3
ストレージサービス。
Reactでビルドしたフロントの資材を配置。
Webサイトとして利用する際は単体ではHTTPS通信が出来ないので、CloudFrontと併用。
静的ウェブサイトホスティングを無効のまま、CloudFrontからの通信を許可するバケットポリシーを定義します。 - Cognito
ユーザーの認証/認可が素早く構築可能なサービス。
ユーザーを作成した際にメールで自動通知が可能です。
API Gatewayの認可として利用。 - API Gateway
APIの作成および諸々の管理が出来るサービス。
lambdaと組み合わせて、APIを構築するために利用。
店舗を管理する管理者と一般ユーザで出来ることが異なるので、認可処理を組み込めます。 - lambda
プログラムを定義しておき、サーバーレスで実行できるサービス。
アプリケーションのメインとなる処理部分の構築で利用。
前回の実行から時間が経つと、待機状態になるため、タイムアウトの設定は考慮する必要があります。 - RDS
データベースのセットアップ、運用、およびスケールを簡単に行うことのできるマネージド型サービス。
シフト関連情報を保持するために利用。
機能
- 店舗管理
- 従業員管理
- シフト管理
- シフト作成
- シフト参照
こだわったところはシフトの描画のところで、マウス操作でシフトの開始、終了時間を変更出来るようにしました。
描画はJavaScriptの「canvas API」を利用しています。
苦労したところ
フロントエンドについては、あまり詳しく無いので、常に調べながら作成してました。
特にデザイン部分は奥が深く、もっと勉強が必要だなと思いました。
終わりに
さすがクラウドは本番環境に反映、公開までがとても早いと感じました。
AWSの各サービスを利用方法はググれれば出てきますし、とても便利な世の中になったなと実感しています。
また、サービスとしてはまだ、改善の余地や機能の拡充はあると思いますので、これから引き続き、作っていこうと思います。