Docker + React + TypeScript お手軽環境構築 〜 npm startまで 〜

はじめに

筆者もDockerの超初心者です。とりあえずDockerでコンテナ作ってその上でReactを使用して開発したい方向けです。Dockerはこれから勉強しようと思います。
完全にMacユーザー向けの記事です。

本記事の流れ

1. Dockerfileの作成
2. docker-compose.ymlの作成
3. Dockerコンテナの立ち上げ
4. TypeScriptベースのReact雛形の作成
5. Docker上でReactの起動

以下、どうやってDockerが動いているのかなどの細いか説明は省いてとりあえず手順通りやればイケるでって感じで書いていきます。詳細な説明や仕組まで理解したい方はこちらの記事が参考になるかもしれません。

1. Dockerfileの作成

どこでも良いので今回作業するためのディレクトリを作成してください。(本記事ではrootとします。)　作成したディレクトリでDockerfileを作成します。めちゃ簡単にDockerfileはなんぞやを説明すると「どんなコンテナなのか」の情報が書かれたものです。

Dockerfile

FROM node:12.16.1-alpine3.9　// 任意のnodeのバージョンを記載してください

2. docker-compose.ymlの作成

同じく作成したディレクトリでdocker-compose.ymlを作成します。これもめちゃ簡単に？説明すると「複数のコンテナをまとめて管理するためのツール」です。

docker-compose.yml

version: "3.7"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./front:/front
    working_dir: /front
    command: node
    tty: true

それぞれどんな意味の記述なのかはこちらの記事で確認してください。冒頭でも書きましたがとりあえず動くようにするのが本記事の目的です。

3. Dockerコンテナの立ち上げ

１と２を終了した時点でディレクトリは以下のようになっていると思います。

root/
 ├ Dockerfile
 └ docker-compose.yml

この状態で、

root$  docker-compose build

を実行してください。これでコンテナの準備が整いました。
次はDockerコンテナを立ち上げます。

root$  docker-compose up

これでDockerコンテナが起動しました。

4. TypeScriptベースのReact雛形の作成

Reactの雛形を作成していきます。先ほどまで使用していたウィンドウはDockerコンテナ起動に使用しているので、新しいターミナルウィンドウを開いてください。
今回のReactプロジェクトはTypeScriptかつ、npmを使用するようにします。
以下のようなディレクトリ構成になるようにrootにいる状態でmkdir forntを実行してください。

root/
 ├ Dockerfile
 ├ docker-compose.yml
 └ front/

注意
ここで作成するディレクトリ名は必ずfrontにしてください。先ほど作成したdocker-compose.ymlの設定が効かなくなってしまい、うまく動作しなくなります。

cd frontで先ほど作成したディレクトリに移動し、以下のコマンドを打ち込んでください。（Mac本体にnodeがインストールされている前提、nodeのインストール方法はこちらの記事が参考になると思います。）

front$ npx create-react-app . --template typescript --use-npm

これでReactプロジェクトが完成しました。

5. Docker上でReactの起動

先ほどDockerコンテナを起動したターミナルに戻り、一度落とします。
Command + CでDockerコンテナを落としたら、Dockerfileとdocker-compose.ymlを少し編集します。

いろいろ追記していますが、説明は吹っ飛ばします。冒頭でも紹介した参考記事を読んでみてください。

Dockerfile

FROM node:12.16.1-alpine3.9
COPY ./front /front
WORKDIR /front
RUN npm install
EXPOSE 3000
CMD npm start

docker-compose.yml

version: "3.7"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./front:/front
    working_dir: /front
    command: npm start
    tty: true
    ports:
      - 3000:3000

編集が完了したら再度

root$ docker-compose up

を行います。また、新しいターミナルを開いて、root/frontまで移動します。
この状態で、

front$ docker-compose exec front sh

一応これでコンテナ内にいる状態になりました。今回はここで作業はしませんがこれでコンテナ内へアクセスすることができます。

実は、docker-compose upをした時点でhttp://localhost:3000/にはアクセスできるようになっています。あとは、ゴリゴリ開発できるようになっています。

最後に

筆者自身もDockerを触り始めてから程なくしてこの記事を書いているので正直Dockerの仕組みや偉大なメリットについて詳しく理解していません。これからは当たり前の技術になるようなのでしっかりマスターしたいと思います！