react 구성

react를 오랜만에 써본다. Backend는 요즘 팀원이 빠져있는 fastAPI를 사용하기로 했다. 이 페이지에서는 react만을 구성해보려한다.

먼저 backend가 있는 디렉토리에서 아래와 같이 작성하여 react를 구성한다.

npx create-react-app frontend

Docker를 사용하고 있기에 frontend를 위한 Dockerfile을 만들어준다.

# frontend/Dockerfile
FROM node

WORKDIR /workspace
RUN npm install axios

CMD ["npm", "start"]

이후 backend,nginx와 도커를 합치기 위해 docker-compose.yml에 다음과 같이 작성한 코드를 추가한다.

frontend:
    build:
      context: frontend/.
      dockerfile: Dockerfile
    container_name: my-web-frontend
    tty: true
    ports:
      - 3000:3000
    volumes:
      - ./frontend:/workspace
      - ./assets:/assets
    command: npm start

이후 docker가 생성되길 기다린 뒤 실행시키면 react가 돌아가는 것을 확인할 수 있다.

docker-compose up