【個人開発】Rails｜Nuxt.js｜Docker｜AWS を使用しアプリケーションを制作しました

はじめに

こんにちは！
本記事を閲覧いただき、ありがとうございます！
個人開発で 「ビールでつながるコミュニティアプリケーション（BEERNECT）」 を制作しましたので紹介します！

本記事では、アプリの制作過程や機能等を紹介していきます。

目次

1. アプリケーションについて
2. アプリケーションに使用した技術
3. 主な機能
4. 制作を終えて
5. 今後について
6. 関連リンク
7. 最後に

アプリケーションについて

アプリケーション概要

制作したアプリケーションがこちらです。
※パソコン、スマートフォンどちらでも利用できます。
BEERNECT

当アプリケーションはクラフトビールと人との繋がりに特化したアプリケーションです。
飲みたいクラフトビールをスタイル別で検索したり、旅行先にどんなクラフトビールがあるのか検索できるようになっています。

開発背景

私の親類は大のビール党でオーソドックスなビールはもちろん、期間限定で発売されるもの、クラフトビールをよく飲みます。併せて旅行も好きで旅先でのクラフトビールを買うのをすごく楽しみにしています。
そうしたときに旅先にどんなクラフトビールがあるのかわかっていれば、更に買う楽しみが増えるとよく口にしていました。
そこで、全国のクラフトビールを網羅したコミュニティサイトがあればビールを選ぶ楽しみを持ちながら人と交流できると考えました。
以上のことからクラフトビールに特化したコミュニティアプリケーションの制作に至りました。

アプリケーションに使用した技術

各バージョン

• フロントエンド
  • Nuxt.js 2.15.8
    • Vuexストアでステート管理しています。
    • 未ログイン状態でアクセスしてほしくないページ（マイページ等）へのアクセス対策にはmiddlewareを活用することで自動的にリダイレクトするようにしました。
  • Vuetify（UIフレームワーク）
  • ESLint/Prettier（コード解析ツール）
  • Firebase Authentication
    • 個人情報（ログインパスワード）はFirebase Authenticationに保存する仕組みにし、外部APIでログイン / ログアウト機能を実装しました。
• バックエンド
  • Ruby 2.7.3
  • Ruby on Rails 6.1.4（APIモード）
    • APIサーバーとして利用し、フロントエンドからのリクエストに対してJSONデータを返しています。
  • PostgreSQL
    • 個人情報（ログインパスワード）はFirebase Authenticationで外部に保存しています。
  • Rubocop（コード解析ツール）
  • RSpec（テスト）
• インフラ / 開発環境
  • Docker / docker-compose
  • AWS（ECR, ECS, VPC, S3, Route53, ALB, RDS, ACM, SSM）
  • CircleCI（CI）

インフラ構成図

インフラ全体像をまとめたものがこちらです。RDSにはPostgreSQLを採用し、ユーザーパスワード/画像を除いたデータを保管。画像データはS3に保管しています。

ER図

一貫性のあるテーブル名称を意識しました。

ポートフォリオURL

・URL → https://beernect.com
・GitHub → https://github.com/boy-com777/BEERNECT
・ゲストログイン機能がりますので、簡単にログインできます。

主な機能

• 基本機能
  • 新規会員登録 / ログイン機能
  • ゲストログイン機能
  • ユーザーマイページ表示（感想投稿一覧 / フォロー表示 / フォロワー表示 / 飲んだクラフトビール登録）
  • クラフトビール詳細閲覧
  • 検索機能（スタイル別検索 / 地方別検索）
• ログイン後機能
  • 感想投稿いいね機能
  • 感想投稿 / 削除
  • 飲んだクラフトビール登録機能
  • ユーザーフォロー機能
  • ユーザー登録情報変更（アイコン画像 / プロフィール）
  • ユーザー削除

以下は、パソコン画面での紹介になります。

【スタイル別検索機能】

スタイル別にクラフトビールを検索したいときに使用します。

【地方別検索機能】

旅行先でどんなクラフトビールがあるのか検索したいときに使用します。

【アカウント登録機能】

アカウント登録にはバリデーションを設けて誤った入力、空欄があると登録ボタンを表示させない仕様にしています。

制作を終えて

ポートフォリオのアップデートは今後も進めますが、一旦区切りがついたのでホッとしています。
制作中に意識したことや苦労したことのポイントをまとめると下記のようになります。

チーム開発（実務）を意識した開発

現場での開発作業を差奥底してGit-flowモデルに沿った開発を行いました。
commitメッセージやプルリクエストのタイトルは 誰が見ても概要を把握できる ようにし、メッセージについては 具体的な実装内容 を意識していました。

開発過程での苦労した点

• フロントエンドとバックエンドを分けた開発環境の構築

  開発初期段階から躓きましたが、実装事例をひたすらググり開発環境を無事立ち上げることができました。

• 親コンポーネント − 子コンポーネントのデータ受け渡し

  propsやemitの概念理解に苦労しました。都度、公式ドキュメントや参考記事を読みながらコンソールにログを出力させ状態を把握しながらデバッグしました。

• Vuex

  ログイン状態の判別や投稿内容等のデータ保管にVuexを利用しました。コンポーネントからstoreに各データを格納し、ログインユーザーに関わるボタンの表示/非表示やデータの非同期通信を実装するところに苦労しました。公式ドキュメントを読みながらデバッグしましたが、途中躓いてしまった部分はメンターさんに質問し、実装そのもののやり方を聞くのではなく「こういう実装をしたが、ここが上手く行かず、ここをデバッグすればこういう流れを想定したのですが、、、」という具合な説明をするようにして自走力を高めました。

• ECS Fargateでのインフラ構築とデプロイ

  実装事例をもとに構築を進めましたが、一筋縄では行かないことが多く都度エラー内容と対応した技術記事をググって構築及びデプロイをしました。エラーはCloudWatchを利用してどこに問題が起きているかを常に把握するようにしました。また、ECS Execを併せて利用してデプロイしたコンテナ内での動作確認でエラー解決に繋がりました。

苦労したことをポイントで網羅しましたが、やはり特に厳しかったのはECS Fargateでのインフラ構築とデプロイです。
途中何度も躓き諦めそうになりましたが、メンターさんへ質問したり、技術記事をひたすらにググってなんとか乗り切ることができました。メンターさんには最後まで懇切丁寧に対応いただき感謝しています。いいメンターさんと出会うことができました。改めてありがとうございます。

今後について

課題

• コードのリファクタリング
• さらなるセキュリティ面の向上

追加実装したい内容

• 投稿した感想に対するコメント機能
• クラフトビール検索時に表示されるレビュー機能
• レビュー点数毎のソート機能
• CD導入による自動デプロイ
• Terraform導入によるインフラのコード管理

関連リンク

・GitHub：https://github.com/boy-com777/BEERNECT

最後に

ポートフォリオを制作するにあたりお世話になった資料です。
何度も見返し制作しました。ありがとうございました！

媒体	資料	コメント
Web	Udemy	Nuxt.js/Ruby on Rails/Dockerの環境構築を参考にさせていただきました
Web	Udemy	Dockerの基本的な使い方を学習
Web	Techpit	SPA開発の流れを掴みました
書籍	Amazon Web Services 基礎からのネットワーク&サーバー構築	AWSの基礎を学習
書籍	AWSコンテナ設計・構築［本格］入門	コンテナ設計について詳細に書かれており雰囲気を掴むことができました