docker-composeでReact-Typescriptの開発環境作ってみた。

経緯

以前作ったポートフォリオサイトをアップデートしようと思い立ち、唐突にサイト制作を始めた。
どうせならモダン目な技術を使いたいし、難しいことにもチャレンジしてみたい。
そんなこんなでコンテナを使用して、わざわざJSライブラリも使用していく。

①まずはDockerfile,docker-compose.ymlファイルを用意する。

FROM node:17-alpine3.14
WORKDIR /usr/src/app

Reactが動作するイメージを選択する。

docker-compose.yml

version: '3'
services:
  react:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/usr/src/app
    command: sh -c "cd workplace && npm start"
    ports:
      - "3000:3000"
    tty: true

②Dockerを利用するためにコマンドを実行する。

$ docker-compose build

裏で色々動いている様子だが、下記が表示されればとりあえずはOK

[+] Building 27.4s (6/6) FINISHED

③npmでworkplaceというディレクトリにcreate-react-appしていく

$ docker-compose run --rm react sh -c "npm install -g create-react-app && create-react-app workplace"

④今回はTypescriptを利用するため、関連パッケージ/バンドラー等をインストールしていく。

$ npm i typescript
$ npm i webpack
$ npm i webpack-cli
$ npm i webpack-dev-server
$ npm i ts-loader

⑤環境構築の最後にDockerのコンテナを立ち上げる。

$ docker-compose up -d

画像のような表示がされたら成功している。