nginx

react을 Nginx 로 배포해보자

MIN우 2023. 5. 22. 18:49
728x90

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가지 작성(수정)
    1. index.html
    2. <!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>
    3. index.js
    4. 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();
    5. App.js
    6. 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 인스턴스로 테스트

참고

  • 미리 생성한 인스턴스에서 접속 후 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

 

728x90