(자신 용) Udemy의 React를 움직이는 환경을 docker로 만든다 (비망록)

소개

자신의 비망록입니다.
직장에서 갑자기 docker와 django와 react를 사용하게 되었으므로 공부하겠습니다.
django는 먼저 django girls와 공식 튜토리얼을 했기 때문에 React의 동영상을 보겠습니다.
docker는 만지면서 기억합니다.

Docker 준비

dockerImage는 여기를 참고로 작성
htps : // 이 m / 케로 치 / / ms / 1063입니다 8893026에서 5 엣 bf

Dockerfile

FROM node:12 ←新しいのにしておく
WORKDIR /usr/src/app

그건 그렇고, Dockerfile에 yarn이 없습니까? 생각해.
RUN npm install --global yarn이라고 하면 ERROR가 됩니다.
node의 Image는 이미 yarn이 들어 있기 때문인 것 같습니다.

docker-compose.yml

version: '3'
services:
    web:
        build:
            context: .
            dockerfile: Dockerfile
        volumes: 
            - ./:/usr/src/app
        ports:
        - "3000:3000"
        tty: true ←これ追加

tty: true 넣지 않으면 컨테이너 시작했을 때 exit가 되어 버린다. . .
잘 모르겠지만 우선 넣어 둡니다.
나중에 제대로 조사합니다.

Docker 시작

Dockerfile 및 docker-compose.yml 위치에 가서 빌드 및 시작

cd ~/docker-react-app
// Dockerのビルドと起動
docker-compose up -d --build

React 모듈 작성

cretate-react-app 명령

~/docker-react-app/udemy-react-redux-crud-application ←作業ディレクトリ
$docker-compose run --rm web sh -c "yarn global add create-react-app && create-react-app ./udemy-react-redux-crud-application"

이미지에 들어가서 만들 수 있습니다.

~/docker-react-app ←Dockerfile置いてるディレクトリ
$docker exec -it docker-react-app_web_1 bash
root@b:/usr/src/app#yarn global add create-react-app
root@b:/usr/src/app#create-react-app ./udemy-react-redux-crud-application"

디렉토리는 이런 느낌이 들었다


create-react-app 시작하기

docker-compose run --rm web sh -c "cd udemy-react-redux-crud-application && yarn run start"

일어선


docker-compose.yml에 command 넣어 두면 컨테이너가 시작될 때 시작됩니다.

docker-compose.yml

version: '3'
services:
    web:
        ...
        command: sh -c "cd udemy-react-redux-crud-application && yarn start"

약속

우선, Udemy의 동영상을 베이스로 공부하면서, 튜토리얼을 바라본다.
결국 Docker에서 Ningx + Django + React + Postgres 컨테이너를 만들어 적절한 웹 응용 프로그램을 만들고 싶습니다.
기억해야 할 일이 가득하고 힘들지만 열심히하자.
일이 갑자기 다른 업무로 변하지 않는 한. . .