プログラミング学習サイト

プログラミングの学習を開始される方を対象としたプログラミング入門サイトです。

ReactでDockerの環境構築をする(docker-compose.yml, Dockerfile, npm使用)

6801883189110440287# Docker で React をインストールする

Reactプロジェクトはnpmやyarnが必ず絡むので必ずと言っていいほど環境依存が発生します。 プロジェクトの管理を可能にするためにはdocker-composeを使用しましょう。

Docker入門 関連記事

目次

Docker で React を動かす:ディレクトリ構成

ディレクトリ構成は以下の通り。 Readme.mdはReactプロジェクトを作るうえでは無関係なので作成しなくてよいです。

docker-compose.yml/code/Dockerfileの作成に集中しましょう。

C:.
│  docker-compose.yml
│  Readme.md
│
└─code
        Dockerfile

docker-compose.yml の作成

docker-compse.ymlは以下の通りです。

version: "3"

services:
  react-app:
    build: ./code
    container_name: react-app
    command: sh -c "cd react-sample && npm start"
    volumes:
      - ./code/:/code
    ports:
      - '3000:3000'
      - "19000:19000"
      - "19001:19001"
      - "19002:19002"
      - "19006:19006"

少し解説すると

  • コンテナ名はreact-app
  • 実行時のコマンドはnpm startでreactプロジェクトを実行しています。
  • ports3000を指定しています。

Dockerfile の作成

Dockerfileはnodeをベースイメージとしています。

FROM node:18.12.1-alpine
WORKDIR /code

DockerでReactプロジェクトをインストール

まずはbuild

docker-compose build

次に、シェルを起動

docker-compose run --rm react-app sh 

インストール用スクリプト(初回のみ起動)

npm install -g create-react-app
create-react-app react-sample

終わったらexit

起動用

以下のコマンドで起動

docker-compose up

<<<<<<< HEAD

page:https://minegishirei.hatenablog.com/entry/2023/09/19/182011

page:https://minegishirei.hatenablog.com/entry/2024/05/30/185448

ad9b4b0e42803b75cd3856617cdf1a5c42944971