はじめに
今回ポートフォリオとして、自宅の食品や日用品を管理できるような在庫管理アプリを作りました。
以下の技術を使って作成しました。
この記事では各技術の選定理由についてまとめていこうと思います。
使用技術
フロントエンド：HTML5、CSS、Tailwindcss2.2.15、Livewire
バックエンド：PHP7.4.15、Laravel8.34.0、Jetstream1.0
インフラ：Docker20.10.2、nginx1.18、MySQL8.0.23/phpMyAdmin、AWS EC2 ALB S3 RDS
デプロイ：GitHubActions（CI/CD） Deployer
技術選定理由
フロントエンド
フロントエンドは主にTailwindcss（テイルウィンドシーエスエス）を使って実装しました。
TailwindcssはCSSのフレームワークです。
以下のような理由から技術選定。
・ユーティリティファースト
→CSSは使わずにTailwindCSSが提供しているクラスのみを使用して実装する考え方で、クラスを追加するだけで定義できるため、コードの量が少なくなる。
・便利で汎用的なクラスがたくさん用意されている
・既存のクラスを直接HTMLに書き込むことで要素のスタイルなどを実装できる
以下の記事に作成されたクラス一覧等が載っています。
バックエンド
バックエンドはLaravel8（Jetstream、Livewire）で実装。
以下のような理由から技術選定。
・元々PHPを学習していた為、そのままPHPのフレームワークを学習した方が学習コストが少なく済む
・丁度Laravel8が新しくリリースされたばかりだった為、新しい技術にチャレンジできるチャンスだった
・MySQLなどデータベースとの連携が簡単
・MVCモデルの採用
→処理をModel（データ処理）View（画面表示）Controller（全体制御、MとVの架け橋）の3つに分別し、機能ごとに開発する手法。
処理の内容とそれを書く場所が明確になり、開発の実務経験が浅い方でも学びやすく扱いやすい開発が行える。
インフラ
開発環境はDocker、デプロイ先のサーバはAWSのEC2を使用。
以下のような理由から技術選定。
「Docker」
・他の仮想マシンと比較して軽量で速い為、作業が効率的
→開発環境に変更が生じた場合、コンテナのイメージは軽量なので時間をかけずにダウンロードが可能。
・コード化されたファイルで構築されてる為、容易に同じ環境が作れる
→ミドルウェアのインストールや各種環境設定をコードで管理できるため、同じ環境で本番環境をつくることができる。
毎度一から仮想マシンを構築しなくて済む
これにより、開発環境では動いたが本番環境ではうまくいかないといった環境によるリスクを軽減できる。
「AWS EC2」
・仮想サーバの構築が容易
・コンソールから簡単にスペックの変更やアップデートが行える
・無料枠で利用できる
・サーバーの複製が可能
→AMIを作成しておけば、そのAMIから同じ仕様のEC2インスタンスを作成できる。
「RDS」
RDSはMySQLを構築するために使用しました。
・サーバの準備が不要で構築後すぐにデータベースの利用が可能
→通常データベースを利用する際はサーバを準備し、データベースのライセンスをインストールする必要がある。
・MySQLは複数のテーブルの結合がしやすい
・処理速度も速く、使いやすい
「S3」
S3は画像ファイルのアップロードに使用しました。
・無料枠がある
・EC2との連携が可能
・セキュリティ的に優れている。
→所有者ユーザーのみがアクセス可能。
自動テスト/デプロイ
CI/CD（自動テスト/デプロイ）パイプラインはGitHubActionsで構築。
以下のような理由から技術選定。
・GitHubにそのまま統合できることから導入が簡単
・publicリポジトリだと無料で利用可能