More than 3 years have passed since last update.

Ruby on Rails,AWS, Docker, CircleCIでポートフォリオを作成してみた

Last updated at 2021-01-28Posted at 2021-01-27

#初めに
今回はRuby on Railsをメインに、AWS,Docker,CircleCIなど近年人気の高まっているインフラ技術を使用してポートフォリオを作成してみました。
本記事では、実装した機能や苦労した点、参考にした記事などを紹介していきたいと思います。
皆様のポートフォリオ作りに少しでもお役に立てれば幸いです。
今後、ポートフォリオをアップデートした際にはこちらの記事も随時アップデートしていきます。（2021年1月26日時点）

#アプリの概要
レシピと料理に使った材料の投稿ができるアプリです。
レシピに乗っているあの材料はどこで手に入るんだろう？？
料理初心者の誰もが感じる疑問を解消すべく、レシピ投稿機能のほか、料理に使用した材料の購入場所を投稿できるアプリを製作しました。

URLは下記になります、よかったら見て行ってください！
URL: https://www.cooknavi.xyz/
（レスポンシブデザインにも対応しておりますので、スマートフォンからの閲覧も可能です！）

GitHub: https://github.com/yutatsune/cooknavi

###主な使用イメージ

トップページからゲストログイン（閲覧用）をクリック
「レシピを見てみる」または「材料を探してみる」をクリックし、一覧画面へ遷移します

ログインが完了したら、レシピまたは材料の一覧画面の右下から新規投稿ができます
必要な項目を入力して、投稿するをクリック

材料投稿画面にて、郵便番号を入力すると自動で住所が入力されます

材料投稿画面で入力した住所の経度・緯度を自動で取得して、GoogleMapに表示されます

投稿詳細画面でいいねをすることができます

#使用技術

フロントエンド
- jQuery 1.12.4
- HTML/CSS/Haml/Sass
バックエンド
- ruby 2.6.5
- Ruby on Rails 6.0.0
- Google Maps API
インフラ
- CircleCI
- Docker 19.03.13/docker-compose 1.27.4
- nginx 1.12.2
- mysql 5.7.31
- AWS ( EC2, ALB, ACM, RDS, Route53, VPC, IAM )
その他使用ツール
- Visual Studio Code
- draw.io

#インフラ構成図

VPCの構築、EC2へのデプロイ、RDSの導入、ELBの設定、ドメイン取得からのRoute53の設定、ACMでのSSL証明書の取得など基本的な部分は導入できました
今後は、S3や自動デプロイを導入していきたいです！

#機能一覧

機能	概要
ユーザー管理機能	新規登録・ログイン・ログアウトできます
簡単ログイン機能	トップ画面のゲストログイン（閲覧用）をクリックすることで、簡単にログインできます
投稿機能	レシピまたは材料を画像を5枚までつけて投稿できます
投稿詳細表示機能	各投稿画面が詳細ページで見ることができます
投稿編集・削除機能	投稿者本人のみ投稿編集・削除できます
ユーザー一覧表示機能	登録したユーザーの一覧を見ることができます
ユーザー情報編集機能	ログイン中のユーザーでアカウント本人であればプロフィール編集できます
フォロー機能	ユーザー一覧画面から各ユーザーのフォローできます
フォロー一覧表示機能	フォローしているまたはフォローされているユーザーを見ることができます
いいね機能	投稿詳細ページからいいねすることできます
いいね一覧機能	いいねした投稿の一覧を見ることができます
コメント機能	投稿詳細ページから非同期通信でコメントできます
住所自動入力機能	材料投稿画面にて、郵便番号を入力するだけで住所が自動で入力されます
マップ表示機能	材料投稿画面で入力した住所の経度・緯度を自動で取得し、マップで表示することができます
レスポンシブデザイン	スマートフォン向けの表示に対応

###工夫した点
とにかく、単なるレシピ投稿アプリにならないように下記を頑張って実装しました！

料理に使った材料の投稿機能
住所自動入力機能
GoogleMapsAPI連携

レシピを投稿したユーザーが、使った材料をどこで買ったかも投稿できるようにしました
通販でいいんじゃ。。。というツッコミはなしでお願いします笑
実際にお店で色々見たりする楽しみだってありますから！

今後、新しい機能を思いついたら実装してみたいとおもいます

#DB設計

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

テーブル名	説明
users	登録ユーザー情報
relationships	フォロー・フォロワーのユーザー情報
recipes	レシピの投稿情報
images	レシピの投稿画像情報
comments	投稿レシピへのコメント情報
recipe_likes	投稿レシピへのいいね情報
materials	材料の投稿情報
material_images	材料の投稿画像情報
material_comments	投稿材料へのコメント情報
material_likes	投稿材料へのいいね情報

#苦労した点
###フロントエンド

デザインについて

まず、デザインをどうすれば良いかで悩みました！
最終的には、フルスクリーンレイアウトやタイル型レイアウト等に落ち着きました

JavaScript(jQuely)全般

スライドメニューやGoogleMapの表示などが大変でした！
これからも勉強を続けて、もっとカッコよく実装できるようになりたいです

###バックエンド

いいね・フォロー機能のアソシエーション

投稿機能など、初めのうちに学習した機能とは違い、アソシエーションの組み方が独特でした
しかし、一度理解してしまえばあとはスムーズに実装できました

GoogleMapsAPI連携

これがとにかく苦労しました
GoogleMapが表示されない、JavaScriptがRubyの値を参照するにはどうするかなど課題がありました
これは、gonというgemを使うことによって解決できました！
最終的に実装できて本当によかったです！

RSpecによるテスト

意外と盲点だったのがこちら
書き方が独特で新たに覚えなければいけないことが多いです
こちらは現在進行中で更新中です！

###AWS

EC2インスタンス内の環境構築

Rails6以降はYarnが必須であることがわかっていなくて、プリコンパイルのところで2日くらい詰まりました。。。
皆さんはお気をつけを！

RDS設定

環境構築が終わった後にいざ試しに登録してみるとエラーが。。。
原因は日本語が登録できない設定になっていたことでした
これを直すには、パラメーターグループの設定を変更すれば解決するはずです
【AWS】RDSで作成したMySQLのDBに日本語が保存できないを解決 | Rails on Docker

###Docker

環境構築

Dockerはやはりこれに尽きると思います。
dockerファイルの記載やdocker-compose.ymlの設定など覚えることがたくさんありました
あと、Rails6以降はYarnとwebpackerのインストールが必須となります
【Rails6】Docker+Rails6+puma+nginx+mysql【環境構築＊初心者必見】

###CircleCI

導入とyml設定

まず、GitHubとの連携の仕方がよく分からなくて苦戦しました
原因はymlファイルをgitのmasterにプッシュしてないからでした。。。
【CircleCI】CircleCI 2.0からはじめる個人での簡単なCI導入方法 - githubとの連携まで
今ではなんとか自動テストまでは導入できました
今後は自動デプロイも試していきたいです

#参考にした学習教材・記事
とにかく参考になりそうなものは色々と試していきました！
ここでは使ってみてよかったものを紹介していきます
###UI/UX