소개

이 기사에서는 자바 스크립트 라이브러리 인 React 환경을 Docker를 사용하여 구축하고 싶습니다.

목차

Dockerfile 준비

Dockerfile을 빌드

컨테이너 시작

React 응용 프로그램 만들기

React 응용 프로그램 시작

브라우저에서 확인

요약

1. Dockerfile 준비

이번에는 create-react-app를 사용하여 React 환경을 구축해 나갈 것입니다.
디렉토리 구성은 다음과 같습니다.

디렉토리 구성

.
├── app         # Reactアプリケーションのフォルダ
└── Dockerfile  # React環境のDockerfile

Dockerfile

# nodeのverを指定してDockerのイメージをpull
FROM node:13.5.0

# Reactアプリケーション作成時に最低限の環境を提供してくれるライブラリをインストール
RUN yarn global add create-react-app

# コンテナ接続時のディレクトリを指定
WORKDIR /home

# アプリケーションの起動時にコンテナで開放するポートを指定
EXPOSE 3000

2. Dockerfile 빌드

Dockerfile에서 Docker 이미지를 만듭니다.
이미지명은 react-tutorial 로 합니다.
다음 명령을 Dockerfile이 있는 디렉토리에서 실행하십시오.

Docker 이미지 빌드

$ docker build --rm -f "react-tutorial/Dockerfile" -t react-tutorial:latest "react-tutorial"

3. 컨테이너 시작

기동하면 이하와 같이 된다고 생각합니다.
이제 React 응용 프로그램이 만들 수 있는 환경의 컨테이너에 연결할 수 있습니다.

Docker 컨테이너 시작

$ docker run --rm -it -v ${PWD}/app:/home/react-tutorial  -p 3000:3000/tcp react-tutorial:latest /bin/bash
root@03887209ce2d:/home# 

4. React 애플리케이션 만들기

그러면 React 애플리케이션을 만들겠습니다.
만들려면 create-react-app를 사용합니다.

React 애플리케이션 만들기

root@03887209ce2d:/home# create-react-app react-tutorial

명령 실행 중 표시 (길기 때문에 접어 둡니다)

Creating a new React app in /home/react-tutorial.

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

yarn add v1.21.1
[1/4] Resolving packages...
[2/4] Fetching packages...
warning [email protected]: Invalid bin entry for "sha.js" (in "sha.js").
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 35 new dependencies.
info Direct dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @babel/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 36.57s.

Installing template dependencies using yarnpkg...
yarn add v1.21.1
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 18 new dependencies.
info Direct dependencies
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ [email protected]
└─ [email protected]
info All dependencies
├─ @sheerun/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @testing-library/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ @types/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
Done in 9.58s.
Removing template package using yarnpkg...

yarn remove v1.21.1
[1/2] Removing module cra-template...
[2/2] Regenerating lockfile and installing missing dependencies...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
warning " > @testing-library/[email protected]" has unmet peer dependency "@testing-library/dom@>=5".
warning "react-scripts > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
success Uninstalled packages.
Done in 7.62s.

Success! Created react-tutorial at /home/react-tutorial
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 react-tutorial
  yarn start

Happy hacking!

5. React 애플리케이션 시작

React 애플리케이션이 생성되었으므로 실제로 시작됩니다.

React 애플리케이션 시작

# ディレクトリ確認
root@03887209ce2d:/home# ls
node  react-tutorial
root@03887209ce2d:/home# cd react-tutorial/
# Reactアプリケーションの起動
root@03887209ce2d:/home/react-tutorial# yarn start

6. 브라우저에서 확인

yarn start 를 실행하면 다음과 같이 출력됩니다.

React 애플리케이션 시작 후

Compiled successfully!

You can now view react-tutorial in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://172.17.0.3:3000/

Note that the development build is not optimized.
To create a production build, use yarn build.

그런 다음 브라우저에서 http://localhost:3000/에 액세스해 봅시다.
아래와 같은 표시가 되면 완료입니다.

7. 정리

Docker를 사용하여 React 환경을 손쉽게 만들 수있었습니다.
호스트 머신의 환경을 괴롭히지 않고 시험으로 환경을 구축할 수 있는 것은 매우 편리하네요! !
그리고는, app 폴더 아래의 파일을 편집해 어플리케이션을 작성해 갈 뿐입니다! !
지적이나 질문이 있으면 대환영이므로, 부디 잘 부탁드립니다.
이상입니다. 고마워요!