DockerでReact+Typescriptの開発環境を構築する

はじめに

よく見る内容ではありますが、メンバーに配布できるようになってなくて困ったことがあってので改めて自分でやってみました。

環境

~ % docker --version
Docker version 20.10.2, build 2291f61
~ % docker-compose --version
docker-compose version 1.27.4, build 40524192

手順

1. node.jsのイメージをもとにコンテナ作成
2. Reactのプロジェクト作成
3. より使いやすく

1.node.jsのイメージをもとにコンテナ作成

node.jsのイメージをもとにコンテナを作成する

[ docker-compose.yml ]

version: '3'
services:
  app:
    image: node:16.3.0-alpine3.11
    volumes:
      - .:/app
    tty: true

動作確認

~ % docker-compose exec app sh
/ # node
Welcome to Node.js v16.3.0.
Type ".help" for more information.
> 

nodeコマンドが使用できることが確認できます

/ # ls
app    bin    dev    etc    home   lib    media  mnt    opt    proc   root   run    sbin   srv    sys    tmp    usr    var
/ # cd app
/app # ls
docker-compose.yml

ファイルがコンテナ内にマウントされていることも確認できました。

2.Reactのプロジェクト作成

先ほど作成したコンテナ内でReactのプロジェクトを作成します。

~ % docker-compose exec app sh
/ # cd app
/app # npx create-react-app sample_app --template typescript

パッケージのインストールが走ってsample_appディレクトリが作られます。

.
├── docker-compose.yml
└── sample_app

Reactの初期ページを参照するにはポートの設定が必要です。

[ docker-compose.yml ]

version: '3'
services:
  app:
    image: node:16.3.0-alpine3.11
    volumes:
      - .:/app
    ports: # 追加
      - "8080:3000" 
    tty: true

yarn startで立ち上がるサーバーのポートは3000がデフォルトなので、それをもとに設定。http://localhost:8080/ でReactの初期ページが参照できます。

3. より使いやすく

[ docker-compose.yml ]

version: '3'
services:
  app:
    image: node:16.3.0-alpine3.11
    volumes: # ①変更
      - ./sample_app:/app
    ports:
      - "8080:3000"
    working_dir: /app # ②追加
    command: sh -c "yarn install && yarn start" # ③追加

① マウントするディレクトリの変更

sample_app内以外のファイルをコンテナ内でいじる必要がないからね。

② working_dirの変更

コンテナ入った時に一発でsample_app配下のファイルに行ける方が楽だよね。

③ コマンドの追加

docker立ち上げのタイミングで

yarn install && yarn start

のコマンドが走るようになる。docker-compose upするだけでサーバーが立ち上がるからコンテナ入って yarn start叩く必要がないので楽。yarn installはメンバーと環境が合わせられるように。

おわりに

ここまでご拝読いただきありがとうございました。少しでも役に立ちますように。