5분 뒤에 시작하는 React with Docker

6513 단어 ReactDocker

Docker 설치

  • Mac 사용: https://docs.docker.com/docker-for-mac/install/
  • Windows 사용: https://docs.docker.com/docker-for-windows/install/
  • 작업 디렉토리 만들기

    $ mkdir react-with-docker
    $ cd react-with-docker
    

    문서 파일 만들기

    $ vi Dockerfile
    
    Dockerfile
    FROM node:14.5.0-alpine
    WORKDIR /usr/src/app
    
    ※ 기본 인상은 최신이죠.

    docker-compose.yml 만들기

    $ vi docker-compose.yml
    
    docker-compose.yml
    version: '3'
    services:
      node:
        build:
          context: .
          dockerfile: Dockerfile
        volumes:
          - ./:/usr/src/app # ローカルとコンテナ内の同期
        command: sh -c "cd react-sample && yarn start"
        ports:
          - "3000:3000"
        stdin_open: true # https://teratail.com/questions/249875
    

    컨테이너 만들기

    $ docker-compose build
    

    React 응용 프로그램 만들기

    $ docker-compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"
    
    로컬과 컨테이너 안에 모두 제작된 것을 확인합니다react-sample!
    $ ls
    $ docker-compose run node ls
    

    시작 컨테이너

    $ docker-compose up
    
    액세스 http://localhost:3000/

    하면, 만약, 만약...

    Hello World!해보다

    $ vi react-with-docker/react-sample/src/App.js
    
    App.js
    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    
    function App() {
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
    +       <p>
    +         Hello World!
    +       </p>
          </header>
        </div>
      );
    }
    
    export default App;
    
    react-with-docker/react-sample/src/App.css 디자인을 바꿔보는 것도 재미있다!

    참고 자료

  • Docker로 React 개발 환경 구축
  • 좋은 웹페이지 즐겨찾기