前書き
就職活動用のポートフォリオをDocker,CircleCI,AWS（ECS)を用いてWebアプリケーションを作成しました。
バックエンドにRuby on Railsを用いました。
今回は作成したポートフォリオの機能、参考記事などを紹介したいと思います。
概要と作成背景
今回作成したアプリはスイーツのデリバリーに特化したECサイトです。
- ケーキ屋のアルバイト経験からお店の業務改善をしたい
- 手軽にお店のスイーツを食べたい
- 店舗で販売しているようなスイーツを配達するサービスが存在しない（自分調べ）
上記の理由により飲食店にもユーザーにもメリットのあるサービスを作成しようと思いました。
アプリのURL: http://sweetsdeli.com
GitHubのURL: https://github.com/sekine617/sweetsdeli
画面イメージ紹介
トップページ
新着商品、人気商品などを表示
人気商品はユーザーの購入履歴から購入数が多い商品を表示しています。
商品一覧ページ
こちらではカテゴリー検索、商品名検索などができます。
商品詳細ページ
こちらでは商品をカートに入れる、お気に入り登録、商品のレビュー投稿などができます。
マイページ
マイページではプロフィール編集、お気に入り、購入履歴、投稿したレビューを閲覧できます。
ショッピングカート
こちらではカートに入れた商品の確認、個数の変更、カートから削除などができます。
購入画面
カートに入れた商品から合計金額を確認し、クレジットカードによる決済が可能です。実際に決済する場合はpay.jpのてすとカードを使用してください。
このようにカード情報の入力フォームがモーダルウィンドウで出てきます。
使用言語
- フロントエンド
- jQuery
- HTML
- CSS/Sass
- Bootstrap
- バックエンド
- Ruby on Rails
- Ruby
- PAY.JP(外部API)
- インフラ
- Docker/docker-compose
- CircleCI
- nginx
- mysql
- AWS(ECS, ALB, S3, RDS, Route53, ECR, VPC, IAM)
インフラ構成図
開発環境
機能一覧
- ユーザー関連（devise)
- 登録機能
- プロフィール編集機能
- ログイン・ログアウト機能
- 決済機能(PAY.JP API)
- 人気商品表示機能
- タグ機能
- 商品登録機能
- 画像アップロード機能(AWS S3バケット, carrierwave）
- お気に入り機能（非同期処理, jQuery）
- フラッシュメッセージ表示機能
- レビュー投稿機能
- カート関連
- カート登録機能
- カート編集機能
- 住所自動入力機能(jQuery)
- 商品名検索機能
- カテゴリー検索機能
- ページネーション機能(kaminari)
データベース設計
テーブル説明
| テーブル名 | 説明 |
|---|---|
| users | ユーザー情報 |
| orders | 注文管理（受け取り日時など） |
| orders_products | 注文商品管理 |
| products | 商品情報 |
| reviews | 商品に対するレビューを管理 |
| likes | 商品へのお気に入り情報 |
| address | ユーザーの住所 |
| cart_items | cartsとproductsの中間テーブル |
| shops | ショップ情報 |
| carts | カート追加した商品情報一時的に保存 |
| product_tag_relations | productsとtagsの中間テーブル |
| tags | 商品のカテゴリ情報 |
ポイントはproductsテーブルのquantity_per_dayで、1日の提供数を指定し注文数が１日の提供数を上回らないようにしました。
また注文時に受け取り日時を指定し、各店舗ごと、日にちごとに管理が可能です。
苦労した点
CircleCIでAWSへの自動デプロイ
CircleCIを用いて開発環境のDockerイメージをECRにpushし、ECSのタスク定義を更新してデプロイをしましたが、config.ymlの設定でのエラーに悩まされました。
またAWSの各設定にもかなり悩まされ、インフラの知識がないことで時間が結構かかりました。
credentials.ymlでのpay.jpなどのアクセスキー管理でなかなかうまく行かずインデントの重要性がよくわかりました。
参考記事
Railsでのテストを参考にしました。
【Rails】はじめてのRSpec！テストコードを書こう！
deviseのログイン機能を参考にしました
【Rails】ログイン機能を実装する