Dockerを使ったReact+Express+MySQLのCRUDアプリの作成

目的

Dockerを使用した開発を行ったことがなかったので、
一からdockerを使用し環境構築をし、
React+Express+MySQLを使用したCRUDアプリ作成を行いました。

開発環境

• Windows10（WSL2）
• DockerDesktop

使用フレームワーク

• Express
• React
• MUI
• MySql2
• axios
• react-modal
  ※くわしくはpackage-lock.jsonを参照

ソースコード

ファイル構成

以下構成でプロジェクトを作りました

• api
  Expresソースフォルダ
• db
  DDLやMySQL設定ファイル
• react
  Reactソースフォルダ
• .envファイル
  環境変数

画面

ユーザー一覧

ユーザ作成

ユーザー編集・削除

デザインはmuiの基本構成を丸パクリで作成しました。
簡単な記述で、整ったデザインになるので
デザインセンスのない自分にとっては助かりました。

作成・編集はモーダル画面で作成をしました。
react-modalを使えば
とても簡単にモーダルを作ることができました。

index.js

import Modal from "react-modal";
import New from './new/new';
<div>
    <Modal
    isOpen={modalIsOpen}
    onRequestClose={closeModal}
    style={customStyles}
    contentLabel="Example Modal"
    >
      <New  setIsOpen={setIsOpen} />
    </Modal>
</div>

とすることで、new.jsxの内容をモーダル表示することができます、
表示は、ユーザー一覧のユーザー追加を押下することで
modakISOpenのstateをonClickイベントで、trueに変更することで
表示処理が動く様になってます。

躓いた点

• Dcoker環境でのDBホスト指定
  Docker環境以外の場合は、localhostにDBを立てている場合は、

index.js

  host: 'localhost',
  user: 'username',
  password: 'password',
  database: 'appname'

の設定で接続できるが、
Dockerの場合は挙動が異なるため、
apiのコンテナからdbのコンテナを指定する場合は

index.js

  host: 'ｄｂ',
  user: 'username',
  password: 'password',
  database: 'appname'

とコンテナ名を指定する必要がありました。

開発をおこなって

dockerの環境構築はネットの情報を参考につくったので
一度作ってしまえばとくに迷うことはなかったです。

今回はすべてJavaScriptをつかって開発してみようと、
api部分はnode.jsのExpressを使用し
JSXの記述もはじめて挑戦しましたが、
最初はこの記述がどうhtmlになるのか理解ができていなかったです。。

書いていくとだいたい分かってきて、応用がきくようになってきました
今後もいろいろ拡張して機能を作っていきたいです。