概要

エンジニア管理ツールを作成する様子を記録することで、初学者の助けになれば

動機

私はSESとして働いているわけですが、我々エンジニア(商品)がちゃんと管理されているのか常日頃から疑問に思っていました。
社員のスキルを一覧で見ることができたら、お客さんに「こういう人材揃ってます」って言えるでしょうし、新入社員には「こういう会社です」って言えるでしょうし、既存社員も「こんな人達と働いてるんだ」って思ってもらえると思うんですよ。

ほならね、自分が作ってみろって話でしょ？そう私はそう言いたいですけどね。
ーー某YouTube r

と言うことで作ってみる事にしました。

目標

エンジニアのスキルが一覧で見えるような管理サイト
エンジニアアカウントと管理者アカウントで使い分けたい
エクセルで作成したスキルシートをアップロードできるようにしたい
サイト上でも編集できるようにしたい
サイトからスキルシートをダウンロードできるようにしたい

さて、どこまで達成できるんでしょうね。

環境

MacOS Monterey 12.7.4
Docker 24.0.6
(エディターはVS Code)

Dockerで作成していくのでOSに関係なく再現できるかと思います。

Dockerとは

コンテナという仮想マシンみたいなやつ(仮想マシンではない)をポンポン作成してしまう超技術です。
初心者に方にはとっつきにくいところではありますが、ある程度理解してしまえば環境構築がものすごく楽になるのでしっかり勉強することをおすすめしておきます。

何が嬉しいかというと、この先いろいろやっていくと「Nodeのこのバージョンでしか動かない」とか「このアプリケーション動かしたいけど環境作るの面倒だな」という場面が2億回あります。
そんなとき、Dockerを使うとバージョン違いの環境を瞬時に用意できたり、「Windows nginx install」みたいに検索しなくてもすぐにアプリケーションを試したりすることができます。

Dockerのインストールに関しては「OS名 Docker install」で検索してください。

Docker Composeとは

今回はDocker Composeという技術を使います。
Dockerを調べると分かるんですけど毎回長ったらしいコマンドを打たないといけなかったり、コンテナ同士の疎通のためにネットワークを作らなきゃいけなかったりと少々面倒なんですよね。

これを解決するのがDocker Composeです。
Docker ComposeはコマンドをYAMLファイルにまとめて書いておくことで、コマンド一発でDockerに関する全ての設定をやってのけます。

YAMLファイルとは

データの構造をいい感じに書くための形式です。
Docker Composeではdocker-compose.ymlってファイルを今の場所から勝手に探して実行してくれます。

`docker-compose` or `docker compose`

ハイフンあり版となし版があります。
多分、ハイフンあり版docker-composeは有志の方が作成して、みんなが使うようになってきて、「便利だし公式で出しちゃうか」となってdockerに組み込まれたんだと思います。(想像)
なのでDockerの古いバージョンだとハイフンなし版docker composeは使えないです。
ハイフンあり版docker-composeを使いたい場合はDockerとは別にdocker-composeコマンドを別途インストールしてあげる必要があります。

性能は大差ないので今回はdocker composeを使用します。

構成

大体こんな感じで行きます。
Nginxをリバースプロキシとして立てて、WebUIはNext.js、APIはFlaskに任せます。
図に入れ忘れましたが、DBはMySQLを使用します。

技術選定

使ったことあるやつで固めました。

Nginx ... 歴史あるWebサーバーで知見がいっぱい
Next.js ... npmで色んなフロント用パッケージ使えそう
Flask ... 個人的にPythonが一番書きやすいので
MySQL ... DBに特に好みはないので適当

フロントとバックの分離

フロントから必要な情報だけをAPIで取得することで、最小限の画面更新で済むようにします。
あと、役割分担がはっきりしてデバッグがしやすくなります。多分。

Next.jsでもサーバーサイドの処理を書くことはできるので、こちらにAPI処理を任せてしまってもいいんですが、JavaScriptで処理をゴリゴリ書くのは苦手なのでPythonでやっていきます。

ディレクトリ構成

コンポーネント毎にディレクトリを切って管理していきます。

.
├── README.md
├── web
├── api
├── front
├── db
└── docker-compose.yml

さて、下準備も終わったので次回から順番に環境構築してきます。

次回

Next.jsの環境構築