Rails+PostgreSQL+Docker+AWSで作成したポートフォリオの概要
記事の概要
この記事では、私が作成したポートフォリオの解説をします。
コンテンツ投稿、管理、その他の営業に利用できるサービス機能をつけた、お店の個人ホームページです。
管理者のみ、コンテンツのCRUD機能やその他の機能が使える仕様にしています。
一般閲覧者は、コンテンツの閲覧のみです。
ポートフォリオ本体です。実際に運用しているため、こちらのソース公開や機能を利用することは開発者しかできません。↓
公開用のコピーアプリがこちら。投稿機能が体験できます。ソースも公開しております。↓↓
https://github.com/Ryo10Leo/post_sample_app
自己紹介
岩田 凌(いわたりょう) 1994/05/07生
2019年4月からIT関連の勉強をはじめ、2019年10月から本格的にプログラミングの学習を開始。
取得資格
基本情報技術者試験合格/ Javaプログラミング能力検定二級/ Java SE Programer Ⅰ/ 三級Webデザイン技能士/ 日商簿記検定二級/ 英検二級
学習言語、インフラ関連
Ruby, Ruby on Rails, HTML, CSS, Javascript, AWS, Docker
背景
私の実家で母が美容室を経営しており、独立20周年を迎えようとしています。
それを迎えるに当たって、私はプログラミング初心者ながら今学習していることで「実用的な貢献」ができないかと思っていました。
ヒアリングにより以下のような要望がありました。
- 20周年を迎えるにあたり、改めて自身の美容室の活動やサービスを様々な方に知っていただきたい。
- 美容の専門的な知識を使って、お客様のお役に立つような美容関連の商品を紹介したい。
- 自身のスタイリング写真を見ていただきたい、かつアルバム(資産?)として残したい。
以上のことを踏まえ、美容室の公式ホームページがまだないことから、
コンテンツ投稿、管理機能、その他営業に利用できる機能を備えた公式HPを作成することとなりました。
また、Web系の開発企業のエンジニアになろうと考えていたので、このアプリケーションを転職活動用のポートフォリオとすることにしました。
今回は、作業の一部(写真関係)を駆け出しのエンジニア初学者仲間、SNSで写真活動を行っている方、一般のモデルなどに協力をお願いしています。(協力者の紹介は後述)
皆と連携することで本格的なHPを作成する一つのプロジェクトとして活動しました。
目的
スペック
言語
Ruby 2.6.3
データベース
PostgreSQL 9.2.24
Webサーバ
Nginx 1.16.1
フレームワーク
Ruby on Rails 5.1.6
開発環境
Docker 19.03.5
docker-compose 1.25.2
バージョン管理
Git 2.21.0
本番環境
AWS(VPC, EC2, ALB, Elastic IP, Route53, Cloud Front, S3)
機能一覧 (一部抜粋)
- ログイン機能(Remember me機能付)
ログインすることで「ブログ」,「スタイル」,「商品」の各ページで投稿、編集、削除機能が利用できます。
- 写真などコンテンツ投稿機能(Ajax通信, 画像アップロード先 S3)
ログインすることでコンテンツの投稿ができます。
- 投稿編集機能(Ajax通信)
既存の投稿コンテンツのキャプションなどが編集できます。
- 投稿削除機能
コンテンツの削除。
- 記事投稿機能(Ajax通信, Ckeditor, 画像アップロード先 S3)
記事には、「タイトル」「内容(画像付)」「カテゴリ」が追加できます。「日付」は投稿時間から動的にフォーマットが変換され表示されます。
投稿順に表示されます。
サイドバーに最新記事5件のタイトルを動的表示(個別記事閲覧可)。
本体ポートフォリオの HOMEページでは、最新三件の記事を動的表示。
解説記事↓
ryo10leo.hatenablog.com
- 記事カテゴリー付機能(UI Tag it)
記事にはカテゴリーが追加できます。
カテゴリ別の閲覧が可能です。
サイドバーには記事で使われているカテゴリだけを表示。
使われていないカテゴリーは記事更新時にデータベースか自動削除されます。
管理者のスマホのカレンダーアプリに休日や予約などを追加することで、自動でホームページの営業カレンダーに追加した予定が同期します。
- ページネーション機能(Will_Pagenate)
コンテンツのページネーション機能です。
開発手順
1.要件定義
作成する主な機能
- 管理者ログイン機能
- コンテンツ(記事, スタイル, 商品 )CRUD機能
- コンテンツ一覧表示機能
- 営業スケジュールカレンダー更新機能
必要となるもの
- 「ユーザー (今回は一件のみ)」「記事」「スタイル」「商品」の情報を保存するためのデータベース
- データベースの内容を表示する「動的なビュー」
- 「投稿」「編集」「削除」画面
- 動的な営業カレンダーを表示するための、「ライブラリ」と「 API」
2.環境選定
アプリケーション
言語は学習中の「Ruby」とし、フレームワークは「Ruby on Rails」としました。
フロントエンドはこだわりが強かったので、Bootstrapは使っていません。
検索した美容室さんのサイトやCSSデザインの記事などを参考に、HTMLとCSSをほば手書きで作成しました。
アプリの動きは「JavaScript」で動作させ、「jQuery」などのライブラリも使っています。
開発環境
最初の方はローカル環境で開発していたのですが、途中で「docker」と「docker-compose」の仮想環境に切り替えました。
何やら現場ではよく使われていて、開発効率を上げるものだと教わったので勉強だと思って導入しました。
今後デプロイ時にコンテナを起動する構成にしていくつもりです。
インフラ
本番環境では「AWS」。EC2やRoute53などを使います。
Webサーバーには資料の多い「Nginx」を使用します。結果的にRailsの「Puma」との連携が容易にできたため。
データベースは「PostgreSQL」を選択。(MySQLを使ったことがないので...)
3. データベース設計
使用ソフト cocoo
基本情報技術者を勉強していたおかげで、データベースやSQLの基礎知識は多少ありました。
そのためアプリの機能でどんな情報を保存するか、どんな関連付けを行うと良いかを構想するのはそこまで難しくなかったです。
あとはアプリ作成時のフレームワークでどのようなコードを書いたり、コマンドを打てば、
設計通りに構築できるのか、ビューで取得したいデータを抽出できるのか。
それらを意識することで学びながら構築はできました。
4.ワイヤーフレーム(プロトタイプ)の作成
デザインのイメージがありましたが、いきなりコーディングすると作業効率が悪いと思ったので、「cacoo」というブラウザツールを使うことで「ワイヤーフレーム」を作成し、フロントエンドの作業も円滑に行えるようにしました。
これを行って最もよかった点としては、
「プロトタイプ」があることで、クライアントからデザインの感想をいただき、要望や変更を円滑に反映することができたことです。
5.コーディング
Git管理
コードは「Git」で管理し、こまめに「GitHub」にプッシュしてバージョン管理を行いました。
Gitの扱いに慣れてきたら機能ごとにブランチを切って作業し、Masterブランチにマージするなど、実践を意識したコーディング練習も行いました。
フロントエンド
序盤はワイヤーフレームの内容に沿って、「HTML」「CSS」を利用したコーディングを行いました。
静的なページができたら 「JavaScript」で動きをつけ、視覚的に楽しめるように意識しました。
バックエンドは並行して行っていなかったので、バックエンドの作業に入る際は少し冗長的なコードが多かったと思います。(データベースから抽出やRailsのヘルパーが使えないので仕方ないことなのですが、、、)
バックエンド
Railsプロジェクトを立ち上げ、フロントエンドの作業で完成したビュー(.html)を一つずつ動的なページ(html.erb)に変更していきました。
今回のポートフォリオの主な動的ページは「News」「Style」「Product」「Login」です。
大まかな作業手順としては、
- 「データベース作成(バリデーション付与)」
- 「コントローラーの作成」
- 「ルーティング設定」
- 「Gem」や「ヘルパーメソッド」を適宜追加。
- 「冗長的なビューのコードの削除」です。
取り掛かった順番ですが、
- 「Style」「Product」は画像と文字列のデータを動的表示するだけで、さほど難しくないので序盤に、、、
- 「News」は記事内容に「リッチテキストエディタ」を導入しており、「カテゴリー機能」など複雑なデータベース関連の処理を用いるため中盤に、、、
- 「Login」では「セッション」や「クッキー」などの概念を理解することが難しく、実装に慎重になる必要があったため終盤
となりました。
※ページ作成順 レベル低「Style」→「Product」→「News」→「Login」高
ここまででログインした管理者のみがコンテンツを投稿できるシステムが完成しました。
営業カレンダー
「Google API」と「Full Calendar」の同期後、
各種カレンダーの見た目や動的な表示の設定などは、Javascript,CSSに書き込んで編集。
6.デプロイ
本番環境にはAWSを用いており、全体の構成図は以下の通りです。↓
「EC2インスタンス」を立ち上げ、「Elastic IP」でグローバルIPを固定。
お名前.comでドメインを購入し、「Route53」独自ドメインの設定。
インターネットからの通信は、管理者が投稿送信の際に情報が盗聴、改ざんされないように「ALB」を噛ませることで、HTTPS通信で暗号しています。
画像コンテンツの保存には「S3」を使用して、「Cloud Front」で配信を高速化しています。
EC2内で構成した環境は以下の通りです↓
構成はWeb3層構成です。
Webサーバー層には、「Nginx」
Webブラウザからのアクセス要求を処理する層を示します。必要に応じて、Webアプリケーション層へリクエストを要求します
アプリケーションサーバー層には、「Puma」「Rails」
Webサーバから受けたリクエストをもとに、バックエンドで動作するRubyなどを実行したり、データベースへのアクセスを行ない、処理を行ないます。
データベース層には、「PostgreSQL」
入力したデータや、アプリケーションで参照するデータを保管する役割を持ちます。
今回のデプロイではWeb3層構成を構築する際、EC2にSSHでログインし、必要なソフトウェアをインストールして適宜設定をした流れです。
ryo10leo.hatenablog.com
今後の改善点、追加実装について
フロントエンド
- トップページにアクセスしたときに、おしゃれなローディング画面を作りたいと思います。
- 投稿の送信時間がかかるとき「送信中」だとわかるloading.gifをつけたいです。
投稿コンテンツが増えたときの対策
- 「管理画面」を作ってコンテンツの検索をできるようにして、CRUD機能がより簡単にできるようにする。
構築したインフラ環境の改善
- 一つのEC2インスタンス内にWeb3層構成を構築したので、ベストプラクティスではないと思います。「RDS」を追加してデータベースを切り離すか、または「docker」と「docker-compose」を使ってコンテナで運用するのか、様々なデプロイ方法を検討して取り入れたいと思います。
インフラの障害の対策
データベースのバックアップを定期的にできる仕組みを勉強し、コンテンツデータの紛失を防ぐ。
「追記」 データベースのバックアップを定期的に行う仕組みを作成してみました。↓
EC2で構築したPostgreSQLデータベースを定期的にバックアップ。ローカルにもバックアップファイルをコピーする - りょ〜Blog
ポートフォリオ作成の協力者様をご紹介
今回はホームページ作成ということで、そこに掲載する「写真」も重要なテーマになっております。
そこで写真撮影や編集に関わっていただいた方達をご紹介します。
『写真撮影』 奥出航介(おくでこうすけ)様
独特なセンスが自分の中のポートフォリオのイメージとマッチしているため、今回ご依頼させていただきました。
彼はSNSを中心に写真活動を行っております。
コンセプトは「日常の中で揺れ動いた瞬間」
現在のTwitterフォロワー数は3000人近く。
Twitterアカウント↓
おくで (@photo_okina) | Twitter
『写真編集』 阿部翔次郎(あべしょうじろう)様
私と同じ駆け出しエンジニア仲間です。デザインやフロントエンドを中心に勉強されています。
Photoshopの技術を習得されていたため、今回写真の編集に携わっていただきました。
主な編集は「ぼかし加工」「背景の入れ替え」などです。
ご依頼からの「イメージ共有」「納品」が早く、大変助かりました。
阿部様のポートフォリオサイト↓
For employment 阿部翔次郎
ご紹介したお二人とその他協力していただけたモデルの方々のおかげもあり、当初イメージしていた通りのものが出来上がりました。
大変ありがとうございました!
ポートフォリオに関する実装技術の解説記事(一部抜粋)
多すぎるHTML文... renderメソッドですっきり表示して管理しやすくする。 - りょ〜Blog
htmlタグを削除や表示文字数制限してHPのTOPニュースなどで記事内容の概要を表示する - りょ〜Blog
記事の最初のimgタグを取得してサムネイル画像に使う - りょ〜Blog
created_atのフォーマットを変更して記事の日付に使う - りょ〜Blog
HTML,CSS 美容室HPでよく見かけるメニュー表作成 - りょ〜Blog
rails 基本的なログインシステム Part1 - りょ〜Blog
carrierwaveで画像投稿できるようにする - りょ〜Blog
自作railsアプリをデプロイする Part1 VPC作成編 - りょ〜Blog
その他の解説は追って書いていきます。
参考文献
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか
Docker + Rails + Puma + Nginx + Postgres - ITNEXT
(デプロイ編①)世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで
【jQuery】アコーディオンメニュー 上下にスライドして開閉するメニュー | ティブる!