Docker를 사용하여 첫 번째 React 앱 만들기

React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리입니다. 대화형 UI를 쉽게 만들 수 있습니다. 애플리케이션의 각 상태에 대한 간단한 보기를 디자인할 수 있으며 React는 데이터가 변경될 때 올바른 구성 요소만 효율적으로 업데이트하고 렌더링합니다.

React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. 이를 통해 "구성 요소"라고 하는 작고 고립된 코드 조각으로 복잡한 UI를 구성할 수 있습니다. React는 Node를 사용하여 서버에서 렌더링하고 React Native를 사용하여 모바일 앱을 강화할 수도 있습니다. React를 사용하면 다른 라이브러리 및 프레임워크와 인터페이스할 수 있습니다.

시작하다

도커 없이

아래 명령을 실행합니다.

npx create-react-app whalified

npx create-react-app whalified

Creating a new React app in /Users/ajeetraina/projects/whalified.

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

...

removed 1 package and audited 1419 packages in 5.867s

169 packages are looking for funding
  run `npm fund` for details

found 1 moderate severity vulnerability
  run `npm audit fix` to fix them, or `npm audit` for details

Created git commit.

Success! Created whalified at /Users/ajeetraina/projects/whalified
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run 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 whalified
  npm start

Happy hacking!

반응 앱 시작하기

cd whalified
yarn start

사용 중이 아닌 경우 포트 3000에서 브라우저를 통해 첫 번째 반응 앱을 엽니다.

도커 사용

1단계. Dockerfile 만들기

FROM node:15.4 as build 


WORKDIR /react-app


COPY package*.json .


RUN yarn install


COPY . .


RUN yarn run build


FROM nginx:1.19


COPY ./nginx/nginx.conf /etc/nginx/nginx.conf


COPY --from=build /react-app/build /usr/share/nginx/html

2단계. dockerignore 만들기

이제 .dockerignorefile 을 구성해 보겠습니다. 아래 스니펫을 복사하여 붙여넣습니다.

**/node_modules

3단계. nginx.conf 파일 생성

nginx/폴더를 만든 다음 nginx.conf 파일에 아래 내용을 추가합니다.

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  server {
    listen 80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

5단계. Docker 이미지 빌드

docker build -t ajeetraina/firstreact-app .

6단계. 앱 실행

docker run -d -p 80:80 ajeetraina/firstreact-app

앱에 액세스