/Yomukatsu

Primary LanguageJavaScript

🐑 無料ブラウザアプリ Yomukatsu! 📖

「あなたの積読を解消します!」をスローガンに掲げた無料ブラウザアプリです。

"読書メンタルマップ術"という手法を用いて、ユーザーの書籍完読に向けたモチベーション維持をサポートします。

URL: https://yomukatsu.com/

top

ゲストユーザー機能もありますので、気軽に利用してみてほしいです:thumbsup:

※ 推奨ブラウザはChrome、Safariになります

解説記事( Qiita )

URL: https://qiita.com/ddpmntcpbr/items/739dbb992b5ffac3fc2f

開発の背景から解説しています。

開発者Twitter

URL: https://twitter.com/ddpmntcpbr

ご用の方はこちらまで！

クラウドアーキテクチャー

image

技術スタック概略(詳細後述)

  • Backend: Rails ( API mode / Rspec / rubocop) + Nginx ( upstream puma-socket )
  • Frontend: React ( create-react-app / Redux / Material-UI / eslint&prettier)
  • Infra: AWS ( ECS Fargate/ ECR / RDS / ALB / Route53 ), Netlify, Docker & docker-compose, Circle CI, Slack Incommig Webhook

実装機能一覧

ユーザー利用機能

  • Twitterアカウントを利用したユーザー登録(OAuthによるSNS認証)
  • ゲストログイン機能
  • Google Books APIを用いた書籍検索機能
  • Google Books、Amazon、楽天ブックスへのリンクボタン配置
  • Twitterシェア機能
    • ハッシュタグ「#yomukatsu」付きTweet
    • Twitter card 表示
  • Twitter card用にリサイズした書籍画像をAWS S3へ保存・管理
  • ローディング画面
  • お問い合わせ機能(Slack Incomming Webhook)
  • Route53 による独自ドメイン + SSL化
  • レスポンシブ対応

非ユーザー利用機能

  • puma-socket 通信による Rails の Nginx 配信
  • Netlify の Pre-rendering 機能活用によるOGP情報の保持（Twitter card 表示用）
  • Docker による開発環境の完全コンテナ化
  • CircleCI による自動 CI/CD パイプライン構築
    • CI: Rspec, rubocop, eslint&prettier
    • CD: AWS ECR ( Rails, Nginx )
  • その他セキュリティ対策(XXS, CSPF等)

技術スタック詳細

Back-end: Rails + Nginx

主要gem

  • devise_token_auth： APIモードでの devise。トークン認証を簡単に実装
  • twitter_omniauth：Twitter認証を簡単に実装
  • active_model_serializer： Rails APIからのレスポンスJSONを制御
  • imageMagic: 画像のリサイズを実行。特に、Twitter card用に書籍画像をリサイズする際に使用
  • aws-fog/carrierwave: リサイズした書籍画像を AWS S3 に保存
  • rspec： デファクトスタンダードになっているRubyテスト用フレームワーク
  • rubocop： Rubyの静的コード解析

Front-end: React

creat-react-app をベースに開発。ホスティングには Netlify を使用。

主要ライブラリ等

  • Redux: Stateの一元管理するフレームワーク。Redux関連ファイルは、reducksパターン則って管理
  • react-helmet: metaタグの挿入によるOGP情報の保持(Twitter card用)
  • Material-UI ： Google が提供する UI コンポーネントライブラリ。
  • eslint & prettier: javascriptに対する静的コード解析。eslint は create-react-appに標準搭載されているものをベースに少しプラグインを追加 & prettier はイチから導入

Infra

Docker/docker-compose

開発環境は、全てDockerコンテナ内で完結。また、AWS ECS(Fargate)へのコンテナデプロイより、開発環境と本番環境の差異を最小化。

AWS(Amazon Web Service)

主にBackend( Rails+Nginx )のデプロイで使用。

※利用サービス

  • ECS (Fargate): コンテナ向けサーバーレスコンピューティングエンジン。この中に Rails と Nginx の Docker イメージを入れて稼働
  • ECR: Rails と Nginx の Docker イメージを保存
  • RDS (MySQL): AWS が用意しているスケーラブルなデータベースエンジン
  • ALB: 負荷分散を担うロードバランシングサービス
  • Route53: サイトの独自ドメイン化に使用
  • ACM: サイトの https 化に使用
  • S3: 静的ホスティングサービス。書籍画像も保存・管理に使用

Netlify

フロントエンド(create-react-app)のホスティングで利用。Pre-rendering 機能を利用することで、通常SPAとなる create-react-app でも、OGP情報の保持(動的な Twitter Card 情報の保持)が可能

CircleCI

自動CI/CDパイプラインの構築に利用。

  • Github へ push した時
  • masterブランチへ merge した時

に走るように設定。

※自動化項目

  • Rspec
  • rubocop
  • eslint&prettier
  • AWS ECR への Image push (masterブランチへ merge した時のみ)
  • AWS ECS のタスク&サービスの更新(masterブランチへ merge した時のみ)