Docker에서 React 개발 환경 만들기

이것은 처음으로 투고한 것이다.

Docker


일본어 문서
Docker는 개발자와 시스템 관리자가 응용 프로그램을 개발, 이동 및 실행하는 플랫폼입니다.
같은 개발 환경에서 개발할 수 있도록 팀 내에서 도와주는 응용 프로그램인 것 같다.

용어


컨테이너


응용 프로그램을 실행하는 개발 환경.이미지의 정보에 따라 구축됩니다.

형상


컨테이너의 원천이 되다.용기 안의 정보를 저장했습니다.

Dockerfile


이미지 내용을 설명하는 파일입니다.이미지를 바탕으로 하다.구축할 때 Dockerfile에 설명된 정보를 기반으로 이미지를 생성합니다.

총결산

  • 설명 Dockerfile
  • 구축 및 이미지 생성 실행
  • 이미지 기반 컨테이너 실행
  • 컨테이너에서 어플리케이션 실행
  • 이런 느낌일 것 같아서요.

    실제로 써볼게요.


    Docker 설치


    용설란주 주세요!😊😊😊

    Docker에서 실행되는 응용 프로그램 만들기


    우선, 용기 안에서 실행되는 프로그램을 로컬에서 만듭니다.
    terminal
    $ npx create-react-app docker-practice
    $ cd docker-react-example
    $ yarn start
    
    이런 거 나오면 오케이.

    문서 파일 쓰기


    컨테이너의 내용을 쓰다.
    terminal
    $ touch Dockerfile
    
    Dockerfile
    # ベースイメージの作成
    FROM node:12.16.1
    # コンテナ内で作業するディレクトリを指定
    WORKDIR /usr/src/app
    # package.jsonとyarn.lockを/usr/src/appにコピー
    COPY ["package.json", "yarn.lock", "./"]
    # パッケージをインストール
    RUN yarn install
    # ファイルを全部作業用ディレクトリにコピー
    COPY . .
    # コンテナを起動する際に実行されるコマンド
    ENTRYPOINT [ "yarn", "start" ]
    

    각종 명령 해설


    FROM


    Dockerfile에 필요한 명령입니다.
    Docker Hub에서 기본 이미지를 가져옵니다.
    이번에 노드의 12.16.1을 얻었다.

    WORKDIR


    컨테이너의 작업 디렉토리를 지정합니다.루트와 usr에는 다양한 기본 파일이 있기 때문에 그곳을 피하는 것이 좋습니다.

    COPY


    컨테이너에 로컬 파일 복사
    문법
    1.COPY<출처>...<대상 >
    2. COPY["<소스>,..."<대상>]
    임의로 하다

    RUN


    구축할 때만 실행되는 명령(?)입니다.
    하면, 만약, 만약...👍

    ENTRYPOINT


    용기가 시작될 때 실행합니다.
    유사한 명령에는 CMD가 있는데, 여기서 설명하면 만리장성이 길어지기 때문에 사랑을 베는 것이다

    왜 패키지야?json과 yarn.락부터 복사할까요?


    기준 이 문장
    docker는 구축을 시작할 때 Docker daemon에 Dockerfile 디렉터리의 모든 파일tar을 보냅니다.
    이게 크면 tar는 시간이 필요해요.
    이렇게 용기 안에 포장 일람과 버전 의존 관계가 적힌 파일만 복사한 후 용기 안에 설치하는 것이 빠르다!!!

    이미지 구축


    명령의 문법은 이렇다
    - docker build "옵션"경로
    terminal
    $ docker build -t test:1.0 ./
    
    -t는 이름과 라벨을 지정할 수 있다(tag는 버전 같은 녀석)
    지정하지 않으면 이름이 됩니다:latest (가능성)
    또한 제작된 이미지
    terminal
    $ docker images
    REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
    test                1.0                 335dbb73b720        40 seconds ago      1.22GB
    node                12.16.1             d834cbcf2402        5 weeks ago         916MB
    
    항목에서 사용할 수 있는 모든 패밀리를 봅니다.

    시작 컨테이너


    생성된 이미지를 기반으로 용기를 시작합니다!
    명령 구문
    - 올가미 규칙 [옵션] 이미지 [명령] [매개변수...]
    terminal
    $ docker run -it --name sample -p 3000:3000 -v $PWD:/usr/src/app test:1.0
    
    terminal
    Compiled successfully!
    
    You can now view docker-react-example in the browser.
    
      Local:            http://localhost:3000
      On Your Network:  http://172.17.0.2:3000
    
    Note that the development build is not optimized.
    To create a production build, use yarn build.
    
    이렇게 나와요.
    액세스 http://localhost:3000

    이런 화면이 나오면 성공한다.
    자세한 내용을 확인한 후
    src/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>
              Dockerの勉強やでーwwww
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn Ruby on Rails
            </a>
          </header>
        </div>
      );
    }
    
    export default App;
    
    변경 사항이 실시간으로 반영될 겁니다.

    옵션 설명


    -it


    단숨에 - i와 - t 옵션을 지정했습니다.
    -t 가상 터미널에 할당
    -i 부착되지 않아도 stdIN이 계속 열립니다.

    -p


    컨테이너 포트와 호스트 포트 연결
    호스트: 컨테이너 순서에 따라 지정되기 때문에 이번 호스트 3000은 컨테이너 3000과 연결됩니다.

    -v


    호스트 파일 경로: 컨테이너 파일 경로에 지정
    volume의 줄임말.호스트의 파일을 컨테이너의 디렉토리에 마운트합니다.
    호스트에서 이루어지는 파일의 변경을 컨테이너에서 이루어지는 것처럼 보일 수 있습니다.
    이로써 파일의 차이점이 자동으로 실현되었다.

    --name


    컨테이너 이름 지정
    이번에는 샘플로 지정했습니다.

    --rm(경품)


    -rm를 더하면 컨테이너를 정지할 때 자동으로 삭제됩니다.
    이렇게 하면 호스트가 용기로 가득 차는 것을 방지할 수 있다.

    시작 중인 컨테이너 진입


    docker exec에서 시작 중인 용기에 들어갈 수 있습니다.
    문법
    terminal
    docker exec [オプション] コンテナ コマンド [引数...]
    
    terminal
    $ docker exec -it sample bash
    root@fe248383642c:/usr/src/app# 
    root@fe248383642c:/usr/src/app# ls
    Dockerfile  docker-command.md  docker-compose.md  dockerfile.md  node_modules  package.json  public  src  yarn.lock
    root@fe248383642c:/usr/src/app# 
    # exitで抜けることが出来ます。
    root@fe248383642c:/usr/src/app# exit
    exit
    $
    
    너는 이렇게 서류를 괴롭힐 수 있다.

    시작 중인 컨테이너 나열


    docker ps로 할 수 있어요.
    - a 옵션을 추가하면 정지 중인 용기도 나온다.
    terminal
    $ docker ps
    CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
    fe248383642c        test:1.0            "yarn start"        24 hours ago        Up 13 minutes
    
    $ docker ps -a
    CONTAINER ID        IMAGE               COMMAND                CREATED             STATUS                    PORTS                    NAMES
    fe248383642c        test:1.0            "yarn start"           24 hours ago        Up 4 minutes              0.0.0.0:3000->3000/tcp   sample
    bac4be724af7        docker-ruby_ruby    "irb"                  39 hours ago        Exited (1) 18 hours ago                            ruby
    c2346fe966a2        test                "yarn start example"   2 days ago          Exited (1) 24 
    (中略)
    

    용기 정지


    dockerstop 용기 이름을 사용할 수 있습니다.
    terminal
    $ docker ps
    CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
    fe248383642c        test:1.0            "yarn start"        24 hours ago        Up 13 minutes       0.0.0.0:3000->3000/tcp   sample
    $ docker stop sample
    sample
    $ docker ps
    CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS               NAMES
    $ 
    

    컨테이너 재부팅


    docker restart 용기 이름을 사용할 수 있습니다.
    terminal
    $ docker restart sample
    sample
    $ docker ps
    CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
    fe248383642c        test:1.0            "yarn start"        24 hours ago        Up 7 seconds        0.0.0.0:3000->3000/tcp   sample
    

    끝날 때


    자주 쓰는 명령 같은 걸 접했나 봐요.
    Docker의 내부 구조를 잘 이해하지 못하기 때문에 다른 기사에서 내보내려고 합니다.

    좋은 웹페이지 즐겨찾기