【簡単に始められる！】DockerでReactの開発環境を作ってみた【ソースコードもご提供！】

2023/1/15 加筆・修正しました

こんにちは、Coroccuです！

さて、いきなりですが、
私はソフトウェアエンジニア歴が14年になろうとしています。

PCアプリ、バックエンドアプリとやってきて、
とうとうフロントエンドに手を出し始めました笑

フロントエンドの開発には
Reactを使おうと思うのですが、
サクッと開発をスタートするために
DockerでReact開発環境を作りました！
※JavascriptとTypescriptに対応

なので、その開発環境のご説明と
ソースコードをご提供しようかなと思います。

同じようにReactを
勉強される方のお役に立てれば幸いです！

事前準備
1. Dockerのインストール
2. VSCodeのインストール
【簡単に始められる！】DockerでReactの開発環境を作ってみた【ソースコードもご提供！】
1. 概要
2. Reactの開発環境（Docker）の作り方
まとめ

事前準備

Dockerのインストール

Dockerについてはあまり詳しく書きませんが、
Dockerを使って、コンテナをベースに開発環境を整えておくと
他のパソコンでもその環境をサクッと復元できるので便利です。
※興味のある方はコンテナ技術ぜひ調べてみてください！

インストールはこちら→Dockerインストール
※Mac/Windows/Linuxに対応

最近、私は新しくMacを買って、
そこにはインストールしてなかったので
先ほどインストールしました！
数クリックで簡単にインストールできます。

Commercial use of Docker Desktop in larger enterprises (more than 250 employees OR more than $10 million USD in annual revenue) now requires a paid subscription.

上記のように、Dockerは最近有料化されましたが、
個人使用であればまだ無料で使うことができます。

VSCodeのインストール

開発は有名どころ？なVSCodeを使います。
プラグインも充実しており、安定ですね。無料ですし！

インストールはこちら→VSCodeインストール
インストーラーはダウンロードしたら
解凍して、Applicationsに移動させるくらい、簡単です！
※Macの場合

【簡単に始められる！】DockerでReactの開発環境を作ってみた【ソースコードもご提供！】

概要

Reactの基礎を学ぶ＋ステップアップのために
以下のUdemyの講座（じゃけぇさん）を受講しています。

Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

なので、環境はこの講座に合わせて
Reactのバージョン17.0.2を使ってます。

詳細は下記をご確認ください〜。

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.45",
    "@types/react": "^16.14.23",
    "@types/react-dom": "^16.9.14",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.5",
    "web-vitals": "^0.2.4"
  }

ちなみに基礎の基礎は以下の本で学びました。ご参考まで。

リンク

Reactの開発環境（Docker）の作り方

ソースコードは私のGitHubリポジトリに置きました。

Dockerfileでは、
node:18.6.0-alpineのDockerイメージを
ダウンロードしてきて、
usr/src/app/sample-app-jsを
作業フォルダにしてるだけです。

docker-compose.ymlでは、
react-projectフォルダ以下を
Dockerコンテナ上の/usr/src/appにマウントしています。

また、見て頂ければ分かる方もいると思いますが、
react-projectフォルダ以下の
sample-app-jsがJavascript用で
sample-app-typescriptがTypescript用です。

デフォルトはJavascript用になっているので
Typescriptを使いたい方は
docker-compose.ymlの10行目
「# working_dir: /usr/src/app/sample-app-typescript」
をコメントアウトしてください。

また、新しいアプリを作りたい方は
コンテナに入って（コンテナに入るコマンドは後述）
以下のコマンドで作ってみてください！
$ npx create-react-app 【アプリ名】 –template typescript

あとは、docker-compose.ymlで
コンテナの起動時にyarn install && yarn startを実行しています。
yarn installでpackage.jsonに書かれたパッケージをインストールし、
yarn startでReactのサーバを起動しています。

たった、これだけでパソコン上にて
Reactのコードを書き、
実行、ブラウザで確認まで、できちゃいます！

docker-compose.ymlのあるフォルダに移動して、
以下をターミナルなどで実行すると、
Reactのコンテナ環境に入ることができます。

docker-compose up -d
（コンテナに入る場合に実行、入りたくなければスキップ）
docker exec -it react-docker-environment-react-fe-1 /bin/sh
ブラウザで、http://localhost:3000/ にアクセス！
→Reactの初期画面がブラウザに出るので確認しましょう！

version: '3'
services:
  react-fe:
    build:
      context: ./
      dockerfile: Dockerfile
    image: react-fe
    volumes:
      - ./react-project:/usr/src/app
    # working_dir: /usr/src/app/sample-app-typescript
    command: sh -c "yarn install && yarn start"
    tty: true
    ports:
      - 3000:3000