はじめに
未経験からRuby on Rails, AWS, Docker, CircleCI, GitHubを一から学習し、Webアプリを作成してみました。
この記事ではアプリの紹介や実装機能、開発する上での苦労した点をお伝えします。
ポートフォリオをアップデートした際にはこちらの記事も更新していきます。
アプリの概要
エンジニアが作成したポートフォリオを投稿、共有できるSNSアプリです。- エンジニアの為のポートフォリオ共有サイトがない。
- 既存の投稿サイトだとポートフォリオが埋もれてしまう。
これらの問題を解決するために「Portfoliofor」というサービスを開発しました。
URLは下記になります、よろしければ見て下さい！
URL:https://www.portfoliofor.com/
※現在はコストの問題から公開を停止しています。
GitHub:https://github.com/t-komiya2222/Portfolio_for
主な使用イメージ
トップページ(投稿一覧) ユーザーの投稿が一覧表示されます。ログイン状態を問わずポートフォリオの閲覧は可能になっています。
ヘッダー部
ログイン状態に応じて表示内容を変えており、投稿やマイページ機能はログイン時のみとなります。
ポートフォリオ投稿画面
投稿した画像は一覧表示、詳細表示用にリサイズされ、ポートフォリオ投稿時には「投稿する」、「下書き」でステータスを切り替えられます。
ポートフォリオ詳細画面
ポートフォリオの詳細表示、いいね機能(Ajax)やtwitter連携が行えます。
自身で投稿したものなら編集、削除も実施できます。
コメント一覧
ポートフォリオへコメントを投稿できます。
マイページ
投稿したポートフォリオの一覧、フォロー/フォロワー一覧、ユーザー情報の編集、削除が可能です。
機能一覧
- ユーザー関連 - 新規登録、プロフィール編集、削除機能 - ログイン、ログアウト機能-
ソート機能
- いいね数、投稿日順
-
投稿機能(CRUD)
-
下書き機能
-
コメント機能
-
いいね機能
-
画面トップへのスクロール機能
-
フォロー機能
- フォロー中、フォロワー一覧
-
フラッシュメッセージ一覧
- バリデーションチェック、投稿、編集、削除、ログイン、ログアウトにフラッシュメッセージを設定
-
SNS連携機能
- Twitterへの連携機能
-
OGP対応
- URL連携時にOGP画像を表示(※サンプル画像しかないので後日差し替えます...)
使用技術
- フロントエンド - jQuery 3.4.1 - Bootstrap 4.4.1 - HTML / CSS / SCSS-
バックエンド
- ruby 2.7.1
- Ruby on rails 6.0.0
-
インフラ
- CircleCI
- Docker 20.10.8
- Docker-compose 1.29.2
- nginx 1.2.0
- unicorn 5.4.1
- Mysql 5.7
- AWS(ALB, ACM, EC2, IAM, Route53, VPC)
- GitHub
-
使用ツール
- Visual Studio Code
- draw.io
- lucid.app
インフラ構成図
バックエンドはRailsでプログラミングを行い、
フロントエンドはBootstrapでのレイアウト調整、SCSSでの細かいデザイン、配置の調整を行い、動きをつけたいところはjQueryを導入しています。
開発環境にはDocker/docker-composeを用いており、
CircleCIはGitHubのpushを感知し、AWSに自動デプロイするようにしています。
開発環境、本番環境について
開発環境
開発環境ではDocker/Docker-composeを用いて環境の構築、開発を実施し、コンテナは下記を使用しています。
1.アプリケーションコンテナ:Ruby / Rails
2.DBコンテナ:Mysql
本番環境
本番環境ではEC2上にnginx, Unicornを導入し、Webサーバー、アプリケーションサーバーを設定しています。
DBはEC2上にMysqlを構築しており、運用コスト削減の為にこの構成にしています。
SSL証明書について
HTTPS化する為にAWSにてACM(AWS Certificate Manager)を設定しています。SSL証明書を設定する上でロードバランサーの設定が必須となってくるので、ALB(ELB)を導入しています。
本来、ALBを設定する上で冗長構成を取ることが基本ですが「アクセス数がそこまで見込めない」、「コストカット」の面でEC2は1つのみで運用しています。
DB設計
ER図 各テーブルの説明
| テーブル名 | 説明 |
|---|---|
| user | ユーザー情報 |
| relationship | フォロー、フォロワーの情報 |
| portfolio | ポートフォリオの情報 |
| like | ポートフォリオへのいいね情報 |
| comment | ポートフォリオへのコメント情報 |
開発期間
全体2ヶ月以内で開発しています。| 期間 | やったこと |
|---|---|
| 2021年9月1日~10日 | テーマ決め、設計 |
| 2021年9月11日 | Github設定 |
| 2021年9月11日~17日 | Docker環境構築 |
| 2021年9月18日~10月13日 | 実装 |
| 2021年10月14日~21日 | AWS構築 |
| 2021年10月22日~23日 | CircleCI設定、構築 |
CircleCIの実装後はブラッシュアップの為、各部の改修を行なっています。
苦労したところ
開発環境の構築からリリースまでで苦労しなかった工程はありませんでしたが、その中でも記憶に残っている点をまとめます。フロントエンド
- Ajax通信
- どの箇所に実装するべきなのかユーザーが使いやすくするにはどうするべきかという点で実装箇所で悩み、いいね機能の実装のみとしました。
- UI調整
- Bootstrapを用いてのグリッドシステムを用いる形で実施しました。
バックエンド
- DB設計
- DBリレーション設計
- 1対nの関係、テーブル間での関連付け、情報の取得に関してどのように行えば妥当なのかの判断で迷いました。
- 機能追加、修正の際の影響
- 機能追加、修正で既存機能にどのような影響が出るのかを意識しながら実装していく必要があったため、その点で苦労しました。
AWS
- EC2セットアップでのnginx,unicornの設定
- EC2構築時の各種設定のインストールやgem、yarnのバージョンといった設定が噛み合わないことがあり、そのあたりの作業が大変でした。解法としてはサーバーログを確認しながら段階的にデバッグ、修正を繰り返し解決していきました。
- ACMを用いたSSL化の設定
- 独自ドメイン取得からセキュリティの設定等で必要な設定箇所の洗い出しが大変でした。
Docker
- 環境構築
- Dockerファイル、docker-compose.ymlの設定周りが何が必要がわからず技術情報を集めながら理解を進めていました。
CircleCI
- 設定ファイルのconfig.ymlの設定
- インデントの位置がズレるとエラーになる点やCircleCI自体のエラーがわかりずらかった為、悩まされました。
今後の課題
- レスポンシブデザイン - デザイン面での調整 - i18nでの国際化対応の充実 - 機能拡張 - CircleCIのテストコード拡充 - インフラのコード化 - gtag.jsの追加 - Google アナリティクスでのデータ分析 - ユーザー獲得現状では課題が多いですが一つずつ改善していき品質を上げていければと思います。
ここまで読んでいただきありがとうございました！