하고 싶은 일

Docker에 node.js와 create-react-app를 설치하여 처음부터 React 환경을 사용할 수 있도록하십시오.

환경 구축

구성

다음 구성으로 파일을 만듭니다.

Dockerfile 만들기

Node의 최신 버전과 React 프로젝트를 생성하는 명령을 설치합니다.

FROM node:latest
WORKDIR /usr/src/app

# 最初に「create-react-app」をインストールする
RUN npm install -g create-react-app

docker-compose.yml 만들기

reactstudy01는 프로젝트 이름을 기술한다.
마지막 줄 stdin_open: true 는 오류가 표시되므로 해당 조치.

version: '3'
services:
    node:
        build:
            context: .
        volumes:
            - ./:/usr/src/app
        command: sh -c "cd reactstudy01 && yarn start"
        ports:
            - "3000:3000"
        stdin_open: true

초기화를 위한 쉘 생성

초기화를 위해 init.sh를 만듭니다.

#!/bin/bash

# -rmオプションは、停止後にNodeコンテナを削除する
# create-react-appコマンドで「reactstudy01」を作成
docker-compose run --rm node sh -c 'create-react-app reactstudy01'

실행할 수 있도록 권한을 설정합니다.

$ chmod 755 init.sh

Docker 이미지 빌드

Docker 이미지를 빌드합니다.

$ docker-compose build
Building node
Step 1/3 : FROM node:latest
 ---> eaeb579b2c99
Step 2/3 : WORKDIR /usr/src/app
 ---> Running in 82cb8be848fc
Removing intermediate container 82cb8be848fc
 ---> 9214b79f932d
Step 3/3 : RUN npm install -g create-react-app
 ---> Running in f3dfc7efbcda
/usr/local/bin/create-react-app -> /usr/local/lib/node_modules/create-react-app/index.js
+ [email protected]
added 98 packages from 46 contributors in 9.134s
Removing intermediate container f3dfc7efbcda
 ---> f28fe7885867
Successfully built f28fe7885867
Successfully tagged reactstudy01_node:latest

React 프로젝트를 초기화합니다.
미리 작성하고 있던 쉘을 사용한다.

$ ./init.sh
Creating a new React app in /usr/src/app/reactstudy01.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

<省略>

Success! Created reactstudy01 at /usr/src/app/reactstudy01
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd reactstudy01
  yarn start

Happy hacking!

이 시점에서의 디렉토리 구성은 다음과 같아야 합니다.create-react-app reactstudy01 에 의해 React 프로젝트 "reactstudy01"이 만들어졌습니다.

컨테이너 시작

$ docker-compose up
Recreating reactstudy01_node_1 ... done
Attaching to reactstudy01_node_1
node_1  | yarn run v1.22.4
node_1  | $ react-scripts start
node_1  | ℹ ｢wds｣: Project is running at http://172.26.0.2/
node_1  | ℹ ｢wds｣: webpack output is served from
node_1  | ℹ ｢wds｣: Content not from webpack is served from /usr/src/app/reactstudy01/public
node_1  | ℹ ｢wds｣: 404s will fallback to /
node_1  | Starting the development server...
node_1  |
node_1  | Compiled successfully!
node_1  |
node_1  | You can now view reactstudy01 in the browser.
node_1  |
node_1  |   Local:            http://localhost:3000
node_1  |   On Your Network:  http://172.26.0.2:3000
node_1  |
node_1  | Note that the development build is not optimized.
node_1  | To create a production build, use yarn build.
node_1  |

성공적으로 시작되면 http://localhost:3000/로 이동하여 React가 시작되었는지 확인합니다.

오류가 있는 경우 대응 방법

docker-compose.yml을 만들 때 stdin_open: true를 추가하지 않으면 다음과 유사한 오류가 표시됩니다.

reactstudy01_node_1 exited with code 2

어쩌면 이것이 원인이라고 생각하기 때문에 설명한대로 컨테이너를 다시 시작하십시오.
[React-Scripts] v3.4.1 fails to start in Docker #8688

docker-compose.yml의 마지막 줄에 stdin_open: true를 추가합니다.

version: '3'
services:
    node:
        build:
            context: .
        volumes:
            - ./:/usr/src/app
        command: sh -c "cd reactstudy01 && yarn start"
        ports:
            - "3000:3000"
        stdin_open: true

마지막으로

공부해 나가는 가운데, 환경을 재작성하는 것이 늘어났기 때문에, Docker를 이용해 가려고 생각합니다.
이제 로컬 환경이 엉망이 되지 않겠습니다.