番号 | 項目 |
---|---|
1 | URL |
2 | 概要 |
3 | 制作背景 |
4 | 目的 |
5 | 使用画面のイメージ |
6 | 使用技術、バージョン |
7 | 環境構築手順 |
8 | 機能一覧 |
9 | 工夫点 |
10 | 苦労した点 |
11 | DB設計 |
12 | インフラ構成図 |
- AWSデプロイ_URL:
https://koujigenba.site(公開停止しました。) - Herokuデプロイ_URL:https://koujigenba.herokuapp.com (起動に数秒時間がかかります。)
- ユーザー:ヘッダーもしくはログイン画面のゲストログインボタンを押すと簡単にログインできます。
なお、以前作成したConstruction-Technologies-Siteと工事現場情報サイトを比較した、紹介記事をQiitaにて執筆しております。Ruby・Railsで作ったポートフォリオをPHP・Laravelでリメイクしてみた
工事現場の役立つスキルやテクニックなどの知識・情報を互いに共有するサイトです。
工事現場で働いている人にとって、現場で活かせるスキルやテクニックは非常に有益で貴重なものです。 しかし、このような情報はあまりインターネット上では出回らないので、情報共有できるWebアプリを作成しました。
現場で働いている人が互いにWeb上で情報共有することで、新たな知見や視点を得ることにより、普段働いている現場に役立てることを目的としています。
- フロントエンド
- HTML / CSS / MDBootstrap
- Vue.js 2.6.12
- バックエンド
- PHP 7.4.1
- Laravel 6.20.26
- インフラ、その他
- MySQL 8.0.25
- Docker 17:03:37 / docker-compose 1.29.1
- nginx 1.18.0(開発環境) / Apache 2.4.48(本番環境)
- AWS(VPC、EC2、Route 53、RDS、S3、Certificate Manager)
- Visual Studio Code
- draw.io
1.GitHubよりダウンロード
$ git clone https://github.com/yuuhei-koutoku/cts-remake.git
2.Dockerのコンテナを作成、起動
$ docker compose up
3.マイグレーションの実行
$ docker-compose exec app php artisan migrate
4.Vue.jsをインストール
$ docker-compose exec app npm install
5.トランスパイルの実行
$ docker-compose exec app npm run watch-poll
- ユーザー関連
- ユーザー登録機能
- ログイン機能
- ゲストログイン機能
- 記事投稿関連
- 新規作成
- 編集
- 削除
- 画像投稿(AWS S3)
- タグ(Vue.js):各記事にタグを付けることが可能。記事に表示されているタグを押すと、そのタグが付けられた記事一覧が表示される。
- キーワード検索機能:タイトルと本文より部分一致検索を行う。
- コメント関連:各記事に対して、コメントを入力することができる。
- 新規作成
- 編集
- 削除
- ユーザーが知りたい情報をすぐに得られるようアプリの設計し、機能を実装(検索機能、タグ機能)しました。
- 全体的に色彩を明るくしたり、アイコン・イラストを用いることで、ユーザーインターフェースを向上しました。
- AWS EC2へのデプロイが特に大変でした。Webサーバーにcomposerなどをインストールしたり、ドキュメントルートの設定を行ったりと、色々やることが多くてややこしかったです。
- AWS S3バケットへ画像ファイル保存も難しかったです。躓いた点は[Laravel]AWS S3に画像をアップロードする際に発生したエラーにてアウトプットしております。
- 常時SSL化(URLをhttpからhttpsに変更)に関しては、参考になる情報が少なかったので苦戦しました。URLをhttpsに変える方法はLaravelを常時SSL化する(初心者向け)にまとめております。
- 【後日追記】このポートフォリオはAWSへデプロイしていましたが、Herokuへの移行を行いました。頑張って作ったアプリなので今後も見れる形で残したいけど、AWSで公開し続けると料金が発生してしまうので、無料で利用できるHerokuへデプロイし直しました。Herokuデプロイ経験は2回目(1回目はRuby・Railsで作成したポートフォリオ)なので、簡単かなと予想していたのですが、実際にやってみると想像以上に大変でした。躓いた点はAWSにデプロイしたポートフォリオをHerokuへ移行しようとしたらかなり苦労したに記載しております。LaravelアプリケーションをAWSからHerokuへデプロイし直す方は参考になると思います。
ユーザーを管理する。nameにユニーク制約を追加している。
カラム名 | 属性 | 役割 |
---|---|---|
id | 整数 | ユーザーを識別するID |
name | 文字列/ユニーク制約 | ユーザー名 |
文字列/ユニーク制約 | メールアドレス | |
email_verified_at | 日付と時刻 | - |
password | 文字列 | このカラムに値があると時間が経っても自動的にログアウトされない |
created_at | 日付と時刻 | 作成日時 |
created_at | 日付と時刻 | 更新日時 |
記事を管理する。
カラム名 | 属性 | 役割 |
---|---|---|
id | 整数 | 記事を識別するID |
image | 文字列/null許容 | 記事の画像 |
title | 文字列 | 記事のタイトル |
body | 文字列 | 記事の本文 |
user_id | 整数 | 記事を投稿したユーザーのID |
created_at | 日付と時刻 | 作成日時 |
updated_at | 日付と時刻 | 更新日時 |
コメントを管理する。
カラム名 | 属性 | 役割 |
---|---|---|
id | 整数 | コメントを識別するID |
body | 文字列 | コメント |
user_id | 整数 | コメントを投稿したユーザーのID |
created_at | 日付と時刻 | 作成日時 |
updated_at | 日付と時刻 | 更新日時 |
タグ名を管理する。同じタグ名のレコードが重複することの無いよう、nameにはユニーク制約を付けている。
カラム名 | 属性 | 役割 |
---|---|---|
id | 整数 | タグを識別するID |
name | 文字列/ユニーク制約 | タグ名 |
created_at | 日付と時刻 | 作成日時 |
updated_at | 日付と時刻 | 更新日時 |
「どの記事に」「何のタグが」付いているかを管理する。articlesテーブルとtagsテーブルを紐付ける中間テーブル。
カラム名 | 属性 | 役割 |
---|---|---|
id | 整数 | タグの紐付けを識別するID |
article_id | 整数 | タグが付けられた記事のid |
tag_id | 整数 | 記事に付けられたタグのid |
created_at | 日付と時刻 | 作成日時 |
updated_at | 日付と時刻 | 更新日時 |