基本的欲求診断システム

システムエンジニアとして仕事をしながら、心理学を10年以上学んでおり、現在は講師業などもしています。その関係で、2年前から心理テストを作成してリリースしています。

無料で3分ほどで結果が出るのでぜひ気軽に使ってみてください。

その裏側

さて、このシステムなんですが裏側は長年使い慣れたPHP & Laravelをベースにして構築しました。詳細な構成は以下の通りです。

シンプルといえばシンプルです😅

AWSのLightsail上に最小構成でLAMP環境を構築してLaravelをインストールしています。フロントはLaravel-vueプラグインをComposerでインストールし、画面からLaravelのControllerへはREST API経由で通信をする構成にしていました。

この構成だと以下の課題があります。

同一サーバにDBもフロントエンドも一緒になっているため、完全にモノリシックな構成になっている

特にDBのメンテナンスなど運用負荷が高くなります（サーバコストは$3.5と安いんですけどね・・・）。

疎結合な構成へ変えてみた

今回、以下のような構成に変更してみました。

ポイントは以下の通りです

Laravelからフロントエンドを完全に分離してVue.js3で再構成
データベースをマネージドサービスであるLightsailDBに移動
フロントエンドはAmplifyによりS3及びCloudFront上にホスティング

フロントエンドとバックエンドの通信をREST APIにしていたのでそこは何も変えずに済んでいます。

よかった点

S3へのホスティングとCloudFrontを使ったCDNの構成があっという間にできるのでAmplifyはやはり便利ですね。データベースもマネージドサーバ上に置いたことで安心感が増しました。

フロントエンド、バックエンド、データベースを疎結合にしたので、それぞれ別にマイグレーションすることができるようになりました。例えば、LightsailDBからAmazonAuroraやDynamoDBへ切り替えるなどもできるでしょうし、フロントエンドもVueからReactに変更するなどもできるでしょう。

今回、LightsailサーバとCloudFrontのドメインは別ドメインにしたので、Laravel・S3・CloudFrontのそれぞれでCORSの設定をする必要は出てきました

反省点

反省点は一気にフロントエンドに色々と改善を加えたので非常に手こずったことです。

フロントエンドのデザイン刷新
Laravel-vueから純粋なVueへのシフト
Vue.js3へのバージョンアップ
TypescriptとCompotisionAPIを利用

この辺を一度に盛り込んだので非常に時間がかかってしまったので、やはりマイグレーションはステップを踏んで行っていくべきですね。

今後の予定

次はバックエンドをLambaベースでサーバレス化する、またロジックもDDDベースで整理していくと面白そうです。
とはいえ、今のところあまりバックエンドを修正する必要性は低いので、しばらくはこのまま様子を見てみたいと思います。