search
LoginSignup
2

posted at

updated at

Rails + PostgreSQLでアプリを開発

記事の概要

私が作成したアプリ開発の解説です。
作った背景、機能、苦労した点、工夫したところ、今後の課題をまとめました。

実際に作成したサイトやソースコードは下記のリンクからご覧いただけます。
github https://github.com/rotosiri-zu/pcparts

作った背景

私は趣味で自作PCを作成しており、他のユーザーがどんなパーツを使っているのか興味がありました。そこで、自作PCを作成しているユーザー同士が、パーツの投稿をし合うSNSを作ることで、パーツ選びに対する関心を深めたり、購入時の参考にできると思い制作しました。

また、現職を退職し、Web系開発企業のバックエンドエンジニアになろうと考えていたので、
このアプリを転職活動のポートフォリオとすることに決めました。

機能説明のタイトルの横に使用しているgemを記載しております。

  • フロントエンド

  • jQuery 4.4.0

  • Vue.js 2.6.12

  • HTML/SCSS/bootstrap4

  • バックエンド

  • Ruby 2.6.6

  • Ruby on Rails 5.2.4.3

  • インフラ

  • CircleCI

  • Docker 3.3.3/docker-compose 1.29.1

  • PostgreSQL 13.2/pgadmin4

  • Amazon Web Services(EC2, S3, VPC, Route 53, ACM, ALB, IAM, RDS)

  • バージョン管理

  • github

サーバーサイドのロジックはruby/railsでプログラミングし、
フロントエンドの細かいデザインはScssで整え、動きを付けたい時はVue.jsやjQueryで実装しました。
開発環境にDocker/docker-composeを使用し、
CI/CDパイプラインに関しては、CircleCIで自動テスト・ビルドを行い、
Capistranoを用いて自動デプロイを実現するようにしています。

開発環境について

開発環境はDocker/docker-composeを使用しており、以下の4つの用途のコンテナを使用しています。

1.Webサーバーのコンテナ: Nginx
2.アプリケーションのコンテナ: Ruby/Rails/vue.js
3.DBのコンテナ: PostgreSQL
4.DB管理用のコンテナ: pgadmin4

DB設計

Database.png

####各テーブルについて

テーブル名 説明
users 登録ユーザー情報
posts 商品投稿の情報
categories 商品カテゴリーの情報
comments 商品の評価、コメント情報

AWS構成図

AWS.png

主な機能

ログイン・ログアウト機能(devise)

登録したユーザーやゲストログインでログインできます。ホーム画面からもゲストログインでログインすることができます。

circleanimationmuvie

投稿機能

会員登録することで自由に投稿することができます。
入力に誤りがあれば、投稿はされずエラ-メッセージが表示されます。

2020-10-2619 42 59

詳細画面

投稿した商品の詳細画面です。

スクリーンショット 2020-12-17 21.07.20.png

マイページ機能

ユーザーが投稿したアイテム一覧を確認することができます。

224a16330e9b45b78577fffe23533062

商品名検索機能(ransack)

投稿時に記入したタイトル名で検索できます。

d32d3f013b5898f6588425a0f95a3f51

カテゴリー検索機能(ancestry)

投稿時に選択肢したカテゴリーで検索できます。

1b3fedbfed2ba3dca6fd34f10a117d3f

口コミ投稿機能

PCパーツの感想を投稿できます。
入力に誤りがあれば、投稿はされずエラ-メッセージが表示されます。
jQueryで★による評価機能

2020-10-2720 33 12

アイテム更新・削除機能

投稿したアイテムを更新・削除ができます。

2020-10-2620 18 54

口コミ更新・削除機能

投稿した口コミを更新・削除ができます。

2020-10-2620 24 43

単体・統合テスト(RSpec, Capybara, factory_bot_rails)

モーダルウィンドウ(vue.js)

星評価機能(jQuery Raty)

ページネーション機能(kaminari)

画像アップロード(Amazon Web Services S3バケット, carrierwave)

N+1(goldiloader)

初期データ(seed_fu)

パンくずリスト(gretel)

CircleCI と Capistrano を用いた CI/CD 機能

苦労した点

開発からデプロイまで、どの工程でももれなくエラーで苦戦しました。
苦戦したところををまとめます。

####フロントエンドで苦労したこと

  • Railsに組み込んだvue.jsがページ遷移をすると読み込まれなくなる現象に遭遇しました。
  • Railsにvue.jsを組み込みモーダルウィンドウの機能作成後、ページ遷移をするとモーダルウィンドウの機能欄が消えてしまう。ページ更新をすると機能欄が表示される。そのような不具合に見舞われ、いったいなにが原因分からなかったので素直にメンターに質問し回答を頂いたところ原因はturbolinkの問題でした。その際qiitaの記事を教えていだ抱いたので共有いたします。

バックエンドでの苦労

  • 新規投稿でCategoryのセレクトボックス追加機能実装時"NoMethodError"の"undefined methodmap' for nil:NilClass`"のエラーに遭遇しました。

スクリーンショット 2021-06-14 1.48.23.png

####原因

ビューのセレクトボックスにCategory_idの情報を引っ張ってくる記載が抜けていたので記載し情報を引っ張ってくるようにしたらエラーが消えました。

####AWSでの苦労

  • Capistranoを用いて自動デプロイしたときにERROR linked file /var/www/アプリ名/shared/config/master.key does not exist on ElasticIP」のエラーがでました。

  • 原因はmaster.keyがないためデプロイに失敗しました。

  • googleで検索し1次ソース記事を参考にmaster.keyをサーバー側に追加し,再度実行したところデプロイに成功しました。

工夫した点

・RSpecで単体テスト、テーブルのバリデーションのテストを実行しました。
・RSpecで総合テストのcrud 処理のテストを実行しました。
・vue.jsでモータルウィンドウを作成し機能説明の項目を追加しました。

なぜRuby on Railsの言語を選んだのか

Ruby on Railsを選んだ理由は初心者が入りやすく参考にする記事やコミニティが多いことからRuby on Railsを選択しました。

今後の課題

参考文献

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2