初めに
今回は Docker, CircleCI, AWS, Vue.js など、人気の高まっているフレームワークやインフラ技術を一から学んで、比較的ハイレベルなポートフォリオ(Webアプリ)を作成した時のことに関してまとめてみました！
ちなみに、こちらのアプリ作成時期や体験談は一年ほど前の話になりますが、
今だからこそわかる部分もあるのでその辺も含めてまとめていければと思います。
特に『実務経験がない方』や『これからエンジニア就職・転職していきたい！』という方に対して、何かしらご参考になれば幸いです！
目次
- アプリの概要
- 使用技術
- インフラ構成図
- 機能一覧
- DB設計
- 技術選定の基準
- 機能実装で意識したこと
- 開発にあたって苦労したこと
- (その他)各機能実装の際に参考にした記事や教材
- アプリ開発にあたって苦労した点、
アプリの概要
今回作成したものは、
バックエンドは Laravel
フロントエンドに Vue.js
インフラに AWS(EC2)
といった構成のアプリです。
内容としては、
『食べログをテーマをしたSNSアプリ』ですが、実際はモダンな技術を勉強する際のアウトプットを兼ねたポートフォリオ制作といった感じです。
※ アクティブユーザー数は1人、つまり自身のみです💦
URLはこちら↓
※現在公開停止中
アプリのURL：https://www.laravelvueport.link/login
GitHubのURL：
動画(Instagram)：
外部公開停止理由として、AWSの1年限定無料枠が切れたために、元は毎月200円程度だったサービス料が9000円に跳ね上がったためです。初学者の皆さんは無料枠が切れた際に気をつけていただければと思います。
使用画面のイメージ
トップページ
写真詳細(コメント機能付き)
ログイン、初回登録画面
開発環境、本番環境について
開発環境にDocker / docker-composeを使用しており、以下の3つの用途のコンテナを使用しています。
また、本番環境はAWSで環境構築していく形で進めました。
- Webサーバーのコンテナ： Nginx
- アプリケーションのコンテナ： PHP / Laravel / Vue.js
- DBのコンテナ： MySQL
参考リンク：
使用技術
-
フロントエンド
- Vue.js 2.6.14
- JavaScript
- HTML / CSS
-
バックエンド
- PHP 7.4.1(→ 8.0.16 Now)
- Laravel 6.20.26(→ 9.17.0 Now)
- PHPUnit 9.5.16
-
インフラ
- CircleCi
- Docker 20.10.12 / docker-compose 2.2.3
- nginx 1.18
- mysql 5.7.31 / PHPMyAdmin
- AWS( EC2, ALB, ACM, S3, RDS, Route53, VPC, EIP, IAM )
作り終わった後、
余力があったので個人開発レベルでのバージョンアップも行いました。
サーバーサイドのロジックはPHP/Laravelでプログラミングし、
フロントエンドはVue.js(JavaScript)のみで実装しました。
開発環境にDocker/docker-composeを使用し、
CI/CDパイプラインに関しては、CircleCIで自動テスト・ビルド・デプロイを全て実現するようにしています。
インフラ構成図
draw.io で ER図 を作成しました。
初学者にも扱いやすいのでおすすめです！✨
参考書籍：
自身はこれに加えて、
こちらの教材を分からない部分を集中的に参考にさせていただきました。
(注: Rubyの記事です)
参考リンク：
デメリットとして、限られた時間の中でこんなに手を出すは相当難しいです💦
ただ、『一度学ぶと今後長期的にインフラ領域が大体どんな感じなのかを分かった上で実務での作業ができる』という大きなメリットもあるので、個人的にはやった価値は相当あったかなという印象です。
S3バケットへのアップロード
以下の２つの用途のために使用しました。
-
開発環境(MacBook)、本番環境(AWSのEC2上)でアップロードした画像データを格納
-
保守の観点でできる限り、DBやサーバー、S3等をAWS上で完結させたかった。
-
AWSの勉強に際してのアウトプット目的
Laravelの基本的な知識があれば、Vue.js初心者でも「Vue + Laravel + AWS（S3のみ）」のアプリケーションを作成できる教材です。
Slackへの通知設定
デプロイ関連の処理でSlackアカウントに通知が飛んでくるようにしています。
機能一覧
-
一般ユーザー登録関連
- アカウント新規登録
- ログイン、ログアウト機能
-
ページネーション機能
-
写真ダウンロード/機能(FileReader API、 FormData API を使用)
-
ユーザー写真投稿(AWS S3 バケット、FileReader API、 FormData API を使用)
-
コメント機能
-
エラーハンドリング機能(Vue.js / Ajax(axios))
-
いいね機能(Vue.js / Ajax(axios))
機能を実装する際に学習したこと
- アクセサ
- 正規表現
DB設計
ER図
各テーブルについて
| テーブル名 | 説明 |
|---|---|
| users | ユーザー情報 |
| photos | 登録した写真情報（12桁のランダムな値をidとして管理） |
| comments | コメント情報 |
| likes | いいね機能に関する情報 |
技術選定の基準
バックエンド
『学習教材が豊富』なこと、個人開発だけでなく今後業務で使うとなった場合にも『長期的に使用していけるかどうか』、の二点を主に基準としました。 まず『学習教材の豊富さ』についてですが、学習教材が豊富なバックエンドの言語はPHP,Ruby。このうち長期的に使用していけるかどうかについて考えた際にGitHubのフレームワークのスター数、Googleトレンド等を参照するとこの条件に最も当てはまるのは、バックエンド言語だとPHPであり、現在（2022年3月）Laravel-11がリリースされるのが確定していることも含めて、PHPのフレームワークにLaravelを使うことを決めました。尚、バージョンについてですが、アプリ開発を始めた日（2021年12月24日頃）のLTS(Long Term Support)はLaravel6であり、Laravel6の情報量もかなり多いことからLaravel6 でのアプリ開発をしていきました。
フロントエンド
ページ表示速度を早くするために、 Vue.js、React のどちらかを使うことにしましたが、『学習教材が豊富』 なことと、学習コストを考慮して Vue.js を選びました。 Laravelの公式でもVue.jsの方を採用している事も基準の１つでした。 またVue.js を使うにあたって、Ajaxによる非同期通信では、Laravelのpackage.jsonに標準で記載されているaxios(JavaScriptの外部ライブラリ)を使用しました。
インフラ
インフラをどうするか考える際に、以下の記事を参考にしました
https://capeyes.hatenablog.com/entry/2015/04/26/091150
一部記事の内容を引用すると、あるサイトの表示速度について次のようになったとのこと
- Heroku トップページのリロードでだいたい2.2秒
- AWS × 東京リージョン トップページのリロードで1秒未満
このことからページ表示速度を早くするためにも、Herokuではなく、AWS でアプリをデプロイすることに決定しました
機能実装で意識したこと
これを読んでいる方も、一度はページのローディングだったり登録処理で時間かかってイライラした経験ってあるんじゃないでしょうか？自身で作成するアップりでは絶対に時間かかってイライラさせたくない！という思いが強く、処理にかかる時間を大幅に短縮するためにも SPAでの実装(今回は Vue.js)で実装を進め、ページネーション以外の機能を全てAjax(axios)による非同期通信で行いました。
具体的には
- 写真のアップロード
- コメント送信機能
- 写真のダウンロード機能
などをAjax(axios)による非同期通信で行いました。
それだけでなく、当時無料サーバーとして人気を誇っていたHerokuではなくて、AWSの『日本リージョン』でのインフラ環境構築構築を行いました。
そのおかげもあって、Vue.js特有の初回ロードが遅くなってしまう影響があるにも関わらず、初期ページのロード時間を0.8秒に終えることに成功しました。
スピードインサイト
スピードインサイトでのパフォーマンス計測画像
開発にあたって苦労したこと
そもそも個人サービス(という枠組みに入れていいのかわかりませんが、) を作成するのは初めての事で、今まではプロゲートやドットインストールをやった後、テックピットでSNS風、Laravelアプリを作成していたレベルからの取り組みでした。
そのため、ここまで作り上げるのは相当苦労しました。
※実際、実務経験がもうすぐ一年となりますが、実務未経験でよくこんなの作れたな〜感は多少あります💦
具体的にここで苦労したみたいなピンポイントでの箇所はありませんが、
インフラ関連が難しかったと記憶してます。
インフラ構成図に載っているものはほとんどこのためだけに0=>1で勉強したもので、
- AWS( EC2, ALB, ACM, S3, RDS, Route53, VPC, EIP, IAM ),
- Docker(Qiitaを参考に環境構築)
- CircleCI
- Vue.js,
- Ajax(axios)、
- PHPUnit
- ...
と言う割と膨大な量の勉強をする必要があったことかなと振り返って思います。
特に有益だった記事
王道の教材
※自身の場合、未経験の際にはUdemyを使用していませんでした。
勝俣健太さんのおすすめ教材
0からDocker を始める際に使用
↓ 第3章までがポートフォリオ作成に関連する部分
書籍一覧
Vue.js を０から始める際に使用
改訂2版 わかばちゃんと学ぶ Git使い方入門
〈GitHub、SourceTree、コマンド操作対応〉
これが今まで見てきた技術書で一番好きです！
これ一冊で実務にも困らない程度のGit 力がつきます。
一言で言うと『わかりやすい！』
たとえばこんな感じです
※Web版もあります(無料)
Qiitaの記事
ポートフォリオだったり、記事の内容だったりかなり勉強になります。
インフラ
Vue.js ✖︎ Laravel
終わりに
ここまで読んでいただき誠にありがとうございます！(^^)
特に『実務未経験』の方のポートフォリオ制作にあたって、少しでも参考になれば幸いです！
今回は以上です。
その他写真
