React 앱을 Docker image 로 만들어서 AWS EC2에 배포

oh_eol·2022년 3월 1일

react

목록 보기

1/3

1. react-create-app 을 이용하여 "Hello World!" 띄우는 앱 만들기

작업할 디렉토리에서 터미널을 켠 다음 아래 명령어를 입력하고 실행
여기서는 test-app 디렉토리로 이동해서 실행

cd test-app

npx create-react-app <app_이름 = .(그냥 현재 디렉토리에 만듦)>

만약 에러 발생 시 C 컴파일러 설치 문제일 수 있음 그럴 경우 아래 코드 순서대로 입력 후 다시 위의 명령어를 입력하고 실행하기

sudo rm -rf $(xcode-select -print-path)

xcode-select --install

Hello World! 를 화면에 표시하기 위해 필요한 파일 3가지 작성(수정)

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js

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>
          Hello World!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

다음 명령어로 앱이 잘 작동되는지 테스트 해보자.

npm run start

작동 화면

2. Dockerfile 작성하고 build

리액트 build 파일 생성

npm run build

해당 프로젝트 폴더의 root 경로로 Docker image 만들기 위한 Dockerfile 작성

# nginx 이미지를 사용합니다. 뒤에 tag가 없으면 latest 를 사용합니다.
FROM nginx

# root 에 app 폴더를 생성
RUN mkdir /app

# work dir 고정
WORKDIR /app

# work dir 에 build 폴더 생성 /app/build
RUN mkdir ./build

# host pc의 현재경로의 build 폴더를 workdir 의 build 폴더로 복사
ADD ./build ./build

# nginx 의 default.conf 를 삭제
RUN rm /etc/nginx/conf.d/default.conf

# host pc 의 nginx.conf 를 아래 경로에 복사
COPY ./nginx.conf /etc/nginx/conf.d

# 80 포트 오픈
EXPOSE 80

# container 실행 시 자동으로 실행할 command. nginx 시작함
CMD ["nginx", "-g", "daemon off;"]

마찬가지로 nginx.conf 파일 생성하기

server {
    listen 80;
    location / {
        root    /app/build;
        index   index.html;
        try_files $uri $uri/ /index.html;
    }
}

이미지 생성하고 이미지 목록에서 생성되었는지 확인하기

#이미지 이름(식별자/이름) : otyvs1109/nginx-react
#도커 허브에 올리기 위해서는 이미지 이름에 식별자로 도커 허브 ID를 추가해야 함
sudo docker build --tag otyvs1109/nginx-react .

docker images

Dockerhub에 생성한 image를 push하기

sudo docker push otyvs1109/nginx-react

3. AWS EC2 인스턴스로 테스트

참고

인스턴스에 탄력적 IP 할당하기 ➡️ https://soobarkbar.tistory.com/224?category=929495

터미널에서 AWS EC2 인스턴스에 접속하기 ➡️ https://soobarkbar.tistory.com/223

미리 생성한 인스턴스에서 접속 후 apply 모두 업데이트

ssh webRTC

sudo yum -y upgrade

docker 최초 설치 후 버전 확인
Docker 시작 후 로그인
AWS - Amazon linux 경우 apt-get 대신 yum 사용

sudo yum -y install docker

docker -v

sudo service docker start

sudo docker login

도커 설치가 완료됐다면 이제 도커 허브에 있는 이미지를 받아서 실행해보도록 한다.
docker run 명령은 이미지가 없다면 받아서 컨테이너 실행까지 한번에 진행한다. run 명령을 통해 React 앱을 실행.

sudo docker pull otyvs1109/nginx-react

sudo docker run -d --name HelloWorld -p 80:80 -dt otyvs1109/nginx-react

http://52.79.185.12:80 들어가서 확인하기

React 앱을 Docker image 로 만들어서 AWS EC2에 배포

react

1. react-create-app 을 이용하여 "Hello World!" 띄우는 앱 만들기

2. Dockerfile 작성하고 build

3. AWS EC2 인스턴스로 테스트

참고

Sign in-out

0개의 댓글