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가지 작성(수정)
- 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-react3. 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
'nginx' 카테고리의 다른 글
| Nginx Blue green 무중단 배포 (0) | 2024.04.27 |
|---|
