【 Laravel＋Vue.js 】エンジニア向け案件の投稿・応募ができるWEBサービスを自作した話（アウトプット）

Laravel＋Vueのアウトプットとして、WEBサービスを自作しました。

開発にかかった時間や苦労＆工夫した点なども載せてますので、よければ何かの参考にしてください。

以下のURLにて公開しています。

https://yutanpo-output2.com/

※AWSにて公開してましたが、現在は以下のURL（Heroku、無料プラン）にて公開しています。

https://match-herokuapp-ce828bc5f416.herokuapp.com/

（※Herokuも解約したため現在は非公開になっています）

エンジニア向けの単発案件やサービス立ち上げ案（レベニューシェア案件）を「気軽に」投稿、案件への応募ができるようにしたサービス。

クラウドソーシングサイトのオプションや入力項目などの煩雑さを軽減して、簡単かつ気軽に依頼・受注ができるように。というコンセプト

サービスはAWSで公開をするにあたって以下の構成図のような形にしています。

＜補足＞

・EC2を3台、DBはRDSを使用。

・Bastionサーバーを管理用として使用（図右上のEC2）。

・メール関連はMailサーバー（図左上）を作成し使用。

・WEBサーバー（図左真ん中）やMailサーバーへの振り分けはALBを使用。

MySQLを使用。AWSではRDS、herokuではJawsDBを用いています。DBの構成は以下のようになっています。

＜補足＞

DBテーブルのうち、users（の一部）やpassword_resetsは、Laravelの「make:auth」にて作られるデフォルトのAuthを使用しています。

ソースは以下。（Herokuのバージョン）

https://github.com/mubunryu-yutanpo/match_heroku

・HTML

・CSS

・JavaScript

・php

● Vue.js （2.7.14）

● Laravel（5.８）

● CSSはSCSSを使用（クラス設計としてFLOCSSを採用）

フロント開発環境として、npm、babel、webpackを使用しています。

その他ライブラリ等はこんな感じ。

● ユーザー関連

ログイン・ログアウト・退会処理・パスワードリセット（カスタマイズ）・マイページなどなど

● 内容関連

案件の登録・削除・Xへのシェア・応募・コメント、DM機能などなど

をサービスの中身として実装しています。

日数として42日。135時間ほど。（実機テスト、公開までを含みます）

○ パスワードリセット・通知等で使うためのメールテンプレートの日本語化（カスタマイズ）

色んな方法があるようで、色んなブログや、chatGPT先生にもお手伝いしてもらったものの、なかなかうまくいかず。

なんとか以下の方法で実装できたが、もうちょいサクッと作れるようにしたいな。と思った部分。

【Laravel5.8】パスワードリセットのカスタマイズ（備忘録：完全版）

2023年11月4日 最終更新日時 : 2024年4月29日 1212yutaroこんにちは。 今回はLaravelのパスワードリセットやら通知のメールなどの小難しい機能について。 「make:auth」コ…

ゆたんぽのエンジニア日記

○ HTML・CSS

・FLOCSSで設計するにあたって、開発途中からUtilityが増えてしまいがちなので、できる限り使わない。という方針で、ほぼ使わずにできた。（と思うが自信はない。。）

○ javascript(Vue.js)

・主に、Laravel側で渡されたデータをもとに表示する画面などは、Laravelのレンダリングをなるべく使わず、（Vueで）コンポーネント化するようにした。

・API（Ajax）を使用し、非同期でデータを取得し、表示するようにしている。

例 :1

（見づらいですが）DMが存在する際、まだ未読のものは「メッセージを確認してください」と赤文字で表示されるが、そのメッセージを確認する（開く）と、「既読」のようになる。

例 : 2

案件内のコメントもAjaxを使用し、非同期で表示している。コメントは即時反映される。

○php(Laravel)

・ログインはメール認証、プロフィール変更時、応募完了時などの通知もメールを送る形にしている。

・実務では不可欠。ということで、エラーハンドリングをしっかり各メソッドに。

・単体＆機能テストを導入。テストはPHPUnitを使用。

今回、こういったサービスを開発・公開するにあたって、工夫して上手く出来た！と思える部分ももちろんあったが

その反面、もっと良くできるよなー。。と感じながら開発した部分も多かったため、そういった部分の改良、「質を上げる」ということを今後ももっと意識しながらやりたいと思う。

また、やはりこれ系のサービスは「世に出て」ビジネスの役に立ってなんぼ。

とも思うので、決済なり課金なりを含めて実際に利用して役に立つようなレベルのものを作りたいと思った。