【初心者にもおすすめ】Docker + Reactの開発環境を爆速で作る

はじめに

こんばんは、イエノカドです。

今日はフロントエンドの方向けにReactの開発環境を作る手順を紹介します。

環境構築ばかりしていますが、そろそろ解説系記事も書いていきたいと思います。

いろんな言語に取り組むことが好きで、

それにはまず開発環境のセッティングからする必要があるので、

それも含め楽しめられたらと思ってます。

Reactの設定手順

1. Docker for Mac のインストール

Mac に Docker Desktop をインストール — Docker-docs-ja 19.03 ドキュメント

docs.docker.jp

今回は、Docker上にReactをインストールして表示していくため、

上記URLからあらかじめDocker for Macをインストールしておきましょう。

2. 空のワークスペースの作成

workspaceというフォルダを作成する（既にある場合はしなくてOK）

$ mkdir ~/workspace

workspaceフォルダ配下にdocker-reactフォルダを作成する

$ mkdir ~/workspace/docker-react

docker-reactフォルダに移動する

$ cd ~/workspace/docker-react

3. Dockerfileを作成

docker-reactフォルダ配下にDockerfileという名前でファイルを作成し、

以下のコードをコピペしてください。

FROM node:12.14.1
WORKDIR /usr/src/app

RUN npm install -g create-react-app

4. docker-compose.ymlを作成

docker-reactフォルダ配下にdocker-compose.ymlという名前でファイルを作成し、

以下のコードをコピペしてください。

version: "3.9"
   
services:
  db:
    image: postgres
    volumes:
      - ./data/db:/var/lib/postgresql/data
    environment:
      - POSTGRES_DB=postgres
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    depends_on:
      - db

6. Reactのプロジェクトを作成

$ docker-compose run --rm node sh -c 'create-react-app docker-react-project'

最終的に以下のようになるかと思います。

7. 初期設定画面にアクセス

http://localhost:3000

localhost

上記にアクセスすると、下記のような画面表示がされればOKです。

参考

Docker + React 開発環境構築してみた｜mugitya｜note

Dockerの勉強をしてみたので、 これから勉強していきたいReactの開発環境を構築してみる Dockerを使うことのメリットを考えてみた ・VMより軽い ・開発環境構築をコード化できるので誰かに教えやすそう ・上と同じだが、Docker関連のファイルを渡すだけで構築終わるので楽そう ・本番、検証と同等の環境も作...

note.com

今回、基本的には上記に基づいて環境構築をしてみました。

（ライブラリのインストールをDockerfileに入れているため少し工程は違います。）

最後にReactに関するおすすめの本を紹介しておきます。

最後に

フロントエンドのみの環境を構築するのは、

Dockerやnpm（パッケージ管理システム）の知識が少なからずいるので、

是非これを機にコマンド一つで環境を用意できるようになっておくのはアリかと思います。

では、またお会いしましょう。