Nezu Tech

【ECサイト】React × Node.js × AWSで構築したECサイト”Cottonia”

—

by

Nezu
, , , , , , , ,

今回作成したのは、私が個人で設計・開発したECサイト 「Cottonia」です。Cottoniaは、オリジナルTシャツを販売するECサイトでありながら、モダンなフロントエンド技術とクラウド環境を活用したフルスタック構成を意識して設計しました。この記事では、Cottoniaの使い方、技術的な構成、そして開発上の工夫や学びについて詳しく紹介します。

サイト概要

「Cottonia」は、シンプルで直感的に操作できるECサイトです。ユーザーが商品を選び、カートに追加し、購入まで完結できる仕組みを備えています。フロントエンドとバックエンドを完全に分離したSPA構成を採用しており、快適な操作性を実現しています。

GitHubリポジトリ

コードはこちらで公開しています。DBの接続情報やStripeの秘密鍵情報などは公開できないため、一部コードを変更しています。

使い方(購入フロー)

1.トップページにアクセス

Cottonia にアクセスすると、Cottoniaのトップページに移ります。ここで画面構成について少し触れたいと思います。

ヘッダー部分

  • Cottonia：クリックするとトップページに移ります。
  • カート：クリックすると「カートパネル」が開きます。購入予定のアイテムをリスト形式で表示し、「購入手続き」、アイテムの増減などを行うことができます。
  • ログイン：AWS Cognitoを使ってログインします。アカウントを持っていない場合もこちらのボタン押下で作成することができます。

メイン部分

  • メイン：商品一覧や個別の商品紹介などを行います。上の画像では商品一覧を表示しています。

2.商品一覧から商品を選択

気になる商品をクリックすると、詳細ページに移ります。価格や商品説明、レビュー、配送情報等を確認することができます。

3.詳細ページを確認

詳細ページでは商品説明、レビュー、配送情報などを確認することができます。これらは該当のタブをクリックすることで見ることができます。また、詳細ページでは選択した商品に適した関連商品も確認することができます

  • 商品情報：商品についての詳しい内容を確認できます
  • レビュー：購入者のレビューを見ることができます
  • 配送情報：配送に関する詳しい情報を見ることができます。
  • 関連商品：該当の商品に関連するアイテムが表示されます。関連商品にある商品をクリックすることで、その商品の詳細ページに素早く切り替えることができます。

4.商品をカートに追加

サイズ、数量を選択して「カートに追加」ボタンをクリックするとカートパネルにアイテムが追加されます。このとき、右下に「カートに追加しました」というスナックバーが表示され、「カート」の右上にアイテム総数を表すアイコンがつきます。

5.カートを確認

カートパネルを開き、先程追加したアイテムがあることを確認します。商品を購入するにはログインが必須です。ヘッダーにある「ログイン」または未ログイン時の場合に限り、カートパネルにある「購入手続きへ」ボタンを押下することでログイン画面に移ります。

6.サイトにログインする

AWS Cognitoを使ってログインします。新規登録を行う場合は”Create an account”で新規ユーザー作成を行います。今回は事前に用意したデモユーザーを用いてログインします。下記ユーザーでログインすることができます。

  • Username：demo_user
  • Password：DemoUser#1

7.商品購入手続き

ログインに成功すると、「ログイン」ボタンが「ログアウト」ボタンに変わります。実際にデモ購入を行っていきます。カートパネルから「購入手続きへ」を押下します。

8.決済手続き

Stripeを用いてデモ決済を行っていきます。テスト決済のため実際にお金が発生することはありません。下記情報を用いて決済します。

  • カード情報：4242 4242 4242 4242
  • MM(月)/YY(年)：01/30
  • セキュリティーコード：123
  • カード名義：demo_user
  • 国または地域：日本

「支払う」ボタン押下で決済処理に移ります。

9.決済確認

決済に成功すると成功ページに移り、失敗すると失敗ページに移ります。

「トップに戻る」ボタンを押下することで、トップページに戻ることができます。

10.ログアウトする

決済が完了したら、ログアウトします。「ログアウト」ボタンを押すことでログアウトすることができます。また、1時間経過すると自動でログアウトされます。

技術構成

レイヤー技術
フロントエンドReact, TypeScript, Tailwind CSS, React Router
バックエンドNode.js (Express)
データベースMariaDB（AWS EC2上）
認証・認可AWS Cognito
決済Stripe API
インフラAWS EC2 + Nginx（バックエンド）
さくらのレンタルサーバー（フロント）
セキュリティHTTPS（CertbotによるSSL）

設計と実装の工夫

1.フロントエンド：SPA構成とUXの最適化

  • React Routerを活用し、ページリロードの少ないシームレスな操作を実現。
  • TypeScriptによって型安全性を担保し、予期せぬバグを防止。
  • Tailwind CSSでデザインを統一し、開発スピードを大幅に向上。

2.バックエンド：RESTfulなAPI設計

  • /api/products、/api/users のように役割ごとにエンドポイントを分離。
  • ExpressでAPIをシンプルかつ拡張しやすい形に実装。
  • MariaDBを用いて、保守性とパフォーマンスのバランスを考慮。

3.認証とセキュリティ

  • AWS Cognitoで認証を一元化し、JWTトークンでログイン状態を管理。
  • Stripe決済はサーバーサイドで安全に処理し、個人情報は保持しない構成。
  • NginxによるリバースプロキシでAPIへの不正アクセスを制限。

4.デプロイと運用

  • バックエンドはAWS EC2上で常時稼働。
  • Certbotを用いて自動的にSSL証明書を更新。
  • フロントエンドはさくらのレンタルサーバーでホスティングし、コストを削減。

学びと今後の展望

この開発を通して、下記のことを学びました。

  • フロントとバックエンドを明確に分離した設計の重要性
  • AWSサービス（Cognito, EC2）の実践的な利用方法
  • Stripeによる実践的な決済方法
  • セキュリティを考慮したECサイトの構築手法

今後は以下の改善を予定しています。

ユーザー向け

  • 購入履歴の閲覧機能の追加
  • レビュー投稿機能の追加

サイト運営者向け

  • 管理者用ダッシュボードの作成
  • 商品検索機能や在庫管理機能の追加
  • CloudFrontやS3を利用した配信高速化
  • サイトをサブドメインで運営