DockerでTypescriptなExpress + Reactの開発環境構築
はじめに
MacBookProを買ったので、どうせならローカル環境を汚さずに開発したかった。
単純にDockerに興味があった。
Dockerとは
VMWareのように仮想環境をいくつも用意できる。
Dockerの仮想環境は「コンテナ」と呼ばれる。（厳密には仮想環境ではない）
公式に用意された「イメージ」を元にコンテナを作成することもできる。
Dockerの何が優れているか
仕事でVMやVagrantを使ったことがある方はわかると思うが、結構リソースを食う。
Dockerはその辺いい感じにしてくれてるので軽い。
「DockerFile」を用意するだけでチーム内で同じ環境を用意することができる。
Dockerだけ入っていれば環境構築が可能になる。
Dockerの仕組みを拡張するような便利なライブラリが多数あるのでさらに便利。
今回は「docker-compose」を利用する。
Expressのコンテナを作成する
下記の記事を参考に、docker-composeでExpressの環境を構築する。（丸投げ）
今回、フロントはReactを使うため、jadeの話は飛ばしても大丈夫です。
めちゃくちゃわかりやすく書いてくださっているので大変助かりました。
Reactのコンテナを作成する
フロントプロジェクト用のディレクトリを作成します
$ mkdir front
docker-compose.yamlを以下のように変更・追記します。
version: '3' services: # サーバサイド server: # 起動イメージ image: node:16 # 環境変数 environment: - DEBUG=app:* tty: true # ホスト側のポート：コンテナのポート ports: - '3000:3000' # ホスト側のsrcをコンテナのappにマウント volumes: - ./server/src:/app # 起動時のカレントフォルダ working_dir: /app # 起動後に実行するコマンド command: sh -c 'npx tsc; npm run dev' # フロントエンド front: # 起動イメージ image: node:16 # 環境変数 environment: - PORT=8000 tty: true # ホスト側のポート：コンテナのポート ports: - '8000:8000' # ホスト側のsrcをコンテナのappにマウント volumes: - ./front/src:/app # 起動時のカレントフォルダ working_dir: /app # 起動後に実行するコマンド command: sh -c 'yarn start'
わかりやすいように、サーバサイドのサービス名を「server」フロントのサービス名を「front」に変更しています。
環境変数のPORT=8000はReactを8000番のポートで公開するためです。
portsでホスト側のポートを8000に指定していたのですが、Reactのデフォルト設定では3000で公開されます。
その場合下記のように表示され、コンソールから直接リンクを開くことができないので8000に指定しました。
front用コンテナのbashを呼び出す
$ docker-compose run --rm front /bin/bash
create-react-app
$ npx create-react-app --template typescript .
docker-composeを起動する
$ docker-compose up
下記の画面が表示されれば成功です
最後に
最近「そんなこといちいち説明しなくてもわかるか・・・」と思ってしまうところがあるが、そこできちんと説明できるような大人になりたいなと思う。
この業界、主語が疎かになったり略語やマイナーな呼び方を使って新人エンジニアを困惑させたりする大人が大変多いので、あんまりそんなふうにはなりたくない。
数ヶ月後の自分に届け。
