工事現場情報サイト

目次

番号	項目
1	URL
2	概要
3	制作背景
4	目的
5	使用画面のイメージ
6	使用技術、バージョン
7	環境構築手順
8	機能一覧
9	工夫点
10	苦労した点
11	DB設計
12	インフラ構成図

1.URL

• AWSデプロイ_URL：https://koujigenba.site （公開停止しました。）
• Herokuデプロイ_URL：https://koujigenba.herokuapp.com （起動に数秒時間がかかります。）
• ユーザー：ヘッダーもしくはログイン画面のゲストログインボタンを押すと簡単にログインできます。

なお、以前作成したConstruction-Technologies-Siteと工事現場情報サイトを比較した、紹介記事をQiitaにて執筆しております。Ruby・Railsで作ったポートフォリオをPHP・Laravelでリメイクしてみた

2.概要

工事現場の役立つスキルやテクニックなどの知識・情報を互いに共有するサイトです。

3.制作背景

工事現場で働いている人にとって、現場で活かせるスキルやテクニックは非常に有益で貴重なものです。 しかし、このような情報はあまりインターネット上では出回らないので、情報共有できるWebアプリを作成しました。

4.目的

現場で働いている人が互いにWeb上で情報共有することで、新たな知見や視点を得ることにより、普段働いている現場に役立てることを目的としています。

5.使用画面のイメージ

6.使用技術、バージョン

• フロントエンド
  • 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

7.環境構築手順

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

8.機能一覧

• ユーザー関連
  • ユーザー登録機能
  • ログイン機能
  • ゲストログイン機能
• 記事投稿関連
  • 新規作成
  • 編集
  • 削除
  • 画像投稿(AWS S3)
  • タグ(Vue.js)：各記事にタグを付けることが可能。記事に表示されているタグを押すと、そのタグが付けられた記事一覧が表示される。
• キーワード検索機能：タイトルと本文より部分一致検索を行う。
• コメント関連：各記事に対して、コメントを入力することができる。
  • 新規作成
  • 編集
  • 削除

9.工夫点

• ユーザーが知りたい情報をすぐに得られるようアプリの設計し、機能を実装（検索機能、タグ機能）しました。
• 全体的に色彩を明るくしたり、アイコン・イラストを用いることで、ユーザーインターフェースを向上しました。

10.苦労した点

• 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へデプロイし直す方は参考になると思います。

11.DB設計

ER図

テーブル設計

usersテーブル

ユーザーを管理する。nameにユニーク制約を追加している。

カラム名	属性	役割
id	整数	ユーザーを識別するID
name	文字列/ユニーク制約	ユーザー名
email	文字列/ユニーク制約	メールアドレス
email_verified_at	日付と時刻	-
password	文字列	このカラムに値があると時間が経っても自動的にログアウトされない
created_at	日付と時刻	作成日時
created_at	日付と時刻	更新日時

articlesテーブル

記事を管理する。

カラム名	属性	役割
id	整数	記事を識別するID
image	文字列/null許容	記事の画像
title	文字列	記事のタイトル
body	文字列	記事の本文
user_id	整数	記事を投稿したユーザーのID
created_at	日付と時刻	作成日時
updated_at	日付と時刻	更新日時

commentsテーブル

コメントを管理する。

カラム名	属性	役割
id	整数	コメントを識別するID
body	文字列	コメント
user_id	整数	コメントを投稿したユーザーのID
created_at	日付と時刻	作成日時
updated_at	日付と時刻	更新日時

tagsテーブル

タグ名を管理する。同じタグ名のレコードが重複することの無いよう、nameにはユニーク制約を付けている。

カラム名	属性	役割
id	整数	タグを識別するID
name	文字列/ユニーク制約	タグ名
created_at	日付と時刻	作成日時
updated_at	日付と時刻	更新日時

article_tagテーブル

「どの記事に」「何のタグが」付いているかを管理する。articlesテーブルとtagsテーブルを紐付ける中間テーブル。

カラム名	属性	役割
id	整数	タグの紐付けを識別するID
article_id	整数	タグが付けられた記事のid
tag_id	整数	記事に付けられたタグのid
created_at	日付と時刻	作成日時
updated_at	日付と時刻	更新日時

12.インフラ構成図

↑ページトップへ