React + docker + typescriptの手軽に環境構築

こんにちは、今回はReactを勉強することにしたので、その環境構築について書こうと思います。
React + docker + typescriptとかモダンな開発っぽいですよね。
敷居が高そうに見えますが、docker-compose.ymlだけで開発環境を準備できます。

node? nvm? ndenv?何それよくわからない（汗）。
そんな人でも簡単に環境構築できます。

React開発環境を簡単に一瞬で作っちゃいましょう！

用意するファイルは一個だけ

使うファイルは一個だけです。
docker-compose.ymlこれだけです。

中身はこんな感じ

version: '3'
services:
  react:
    image: node:13.6.0-slim
    working_dir: "/var/www"
    command: bash -c "cd [アプリ名] && yarn && yarn start"
    ports:
      - "3000:3000"
    volumes:
      - ./[アプリ名]:/var/www/[アプリ名]

イメージはnode – Docker Hubから好きなバージョンを選んで使えます。まぁ、よくわからない方は気にしなくて良いです笑

コマンド一つで出来上がり

あとはコマンドを打つだけです。
魔法のコマンドはこちら

docker-compose run react npx create-react-app [アプリ名] --template typescript

はい！
出来上がりですね！

お疲れ様でした。
環境構築完了です。

ちゃんとプロジェクトファイルが出来上がってます。

いつものReactの画面を開いてみましょう。

docker-compose up

上記コマンドを実行しましょう。

localhost:3000にアクセスします。

いつもの画面ですね。

最後に

docker上で作った環境をローカルにマウントして開発していく形になります。
その中で、yarnコマンド使いたいんだけど、、、。
みたいなことがあると思いますが、ローカルで環境構築してない場合はそんなコマンドないと言われますよね。

でも大丈夫です。

docker上にはyarn入ってるのでdockerコンテナの中に入っちゃいましょう。

docker-compose exec react bash

別のターミナルを開いてプロジェクト配下で上記コマンドを実行すれば入れます。

コンテナに入ることができました！
ここではyarnコマンドが使えるので試しに、semantic-ui-react を入れてみましょう。

cd [アプリ名]でプロジェクトディレクトリに入って
yarn add semantic-ui-react semantic-ui-cssを実行

package.jsonにもインストールできているのが確認できます。

試しに使ってみるとこんな感じです。

どうでしたか？
めちゃめちゃ簡単に環境構築できたと思います。
ちなみにdocker-compose downでコンテナを消去できますので、使わなくなったら簡単に捨てれます。
ローカルを汚さず試せるので、試しにやってみてはどうでしょうか？

良きReactライフを！！