React 앱 배포하기 (feat. Nginx, Docker, AWS)

React 앱을 만들었다는 가정하에 진행되며 Nginx에 대한 개념없이 단순히 사용하고 있음을 미리 알립니다.

---

Make docker image using Nginx

Nginx 서버를 사용해 제작한 React 앱을 도커 이미지로 만들어보자.

도커 이미지로 만들고 도커 허브에 올리면 Github처럼 어디서든 받아서 컨테이너를 실행시킬 수 있고 수정해서 다시 올릴 수 있다.

Create Nginx server Container

먼저 React 앱을 동작시킬 Nginx 서버를 도커 이미지를 통해 생성한다. Nginx는 도커 허브에서 공식 이미지를 지원하고 있으므로 바로 다운받아 실행이 가능하다.

1️⃣ Nginx 컨테이너 생성

로컬 터미널에서 docker run명령을 통해 Nginx 이미지를 받아 컨테이너를 생성한다.

만약 이미지가 다운받아져있지 않다면 자동으로 :latest태그를 달아 최신 버전을 다운로드해서 생성한다.

$ docker run --name web -p 80:80 -dt nginx
$ docker ps | grep web
25f71d09fc77   nginx     "/docker-entrypoint.…"   18 seconds ago   Up 17 seconds   0.0.0.0:80->80/tcp   web

2️⃣ IP 정보 확인

로컬에서 테스트 하는 경우에는 굳이 필요하진 않지만 IP 정보는 언제 필요할지 모른다. 확인할 수 있는 명령어정도는 알아두도록 하자.

$ docker inspect web | grep "IPAddress"
            "SecondaryIPAddresses": null,
            "IPAddress": "172.17.0.2",
                    "IPAddress": "172.17.0.2",

3️⃣ default.conf 파일 생성

Nginx에서 사용할 default.conf파일을 생성한다.

서버 설정에 대한 지식이 있다면 더 채워도 되지만 여기서는 간단하게 몇가지만 설정한다.

• 80포트로 통신

• root를 /var/www/html로 지정

server{
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html/;
}

4️⃣ 컨테이너로 복사

3번에서 생성한 default.conf파일을 컨테이너로 전송해준다.

FTP를 사용해도 되고 도커 명령을 통해 전송해도 된다. 컨테이너 내부에 저장할 위치만 잘 확인하도록 하자.

$ docker cp default.conf web:/etc/nginx/conf.d/default.conf

5️⃣ /var/www 폴더 생성

도커 명령으로 Nginx 컨테이너 내부에 /var/www/html폴더를 만든다.

$ docker exec web mkdir /var/www/html

6️⃣ build 폴더 복사

도커 명령으로 build한 react 앱을 5번에서 생성한 폴더로 복사한다.

$ docker cp build/ web:/var/www/html

7️⃣ 권한 변경

도커 명령으로 html폴더의 권한을 변경해준다.

$ docker exec web chown -R nignx:nginx /var/www/html

8️⃣ nginx reload

이제 마지막으로 변경된 내용을 적용하기위해 Nginx 서버를 다시 시작한다.

$ docker exec web nginx -s reload

이제 localhost로 접속하면하면 내가 만든 React앱이 동작하는 것을 확인할 수 있다.

localhost - 동작확인

Push image into Docker Hub

이제 React 앱이 동작하는 Nginx 서버를 컨테이너로 생성했다. 만들어진 컨테이너를 이미지로 저장해 도커 허브에 올려보도록 하자.

1️⃣ 도커 이미지 생성

동작하고 있는 컨테이너를 docker commit명령을 통해 이미지로 만든다.

• 컨테이너 이름 : web

• 이미지 이름(식별자/이름) : qkrwltn24/react-nginx

• 이미지 버전 : v1

$ docker commit web qkrwltn24/react-nginx:v1
$ docker images | grep react-nginx
qkrwltn24/react-nginx    v1              16415ce38f4e   About an hour ago   138MB

🌏

도커 허브에 올리기위해서는 이미지 이름에 식별자로 도커 허브 ID를 추가해줘야 한다.

2️⃣ 도커 허브로 Push

만들어진 이미지를 도커 허브에 올린다.

$ docker push qkrwltn24/react-nginx:v1

도커 허브에 접속하면 이미지가 제대로 올라갔는지 확인할 수 있다.

Docker Hub - 올려진 이미지 확인

---

Docker Image Confirm using AWS EC2

도커 허브에 이미지를 올렸으니 어디서든 pull 받아서 사용할 수 있다.

AWS EC2인스턴스로 아주 멀리있는 지역에서 앱을 실행하고 접속이 가능한지 확인해보자.

여기서는 버지니아 북부에 인스턴스를 만들고 Public IP를 사용해 원격으로 접속 및 테스트를 진행했다.

Create Instance

SSH와 HTTP를 통해 접속이 가능한 AWS EC2 인스턴스를 하나 생성한다.

생성과정에서 Public IP 자동 생성 활성화를 반드시 확인해야한다.

여기서는 Ubuntu 20.04를 베이스 이미지로 사용했다.

Run React App

1️⃣ Connect by SSH

SSH로 인스턴스에 원격으로 접속한다.

Putty, Xshell 등 다양한 프로그램이 있으니 선택해서 사용하면 된다.

여기서는 MobaXterm을 사용했다.

mobaxterm - SSH 연결 설정 화면

2️⃣ Download Docker

접속한 인스턴스에서 docker를 사용하기 위해 공식 홈페이지에서 각 환경에 맞는 방식으로 docker를 설치한다. SSH로 접속할 경우 CLI를 사용해 설치해야하므로 순서에 맞게 설치를 진행해야한다.

설치가 완료되면 docker --version명령을 통해 확인해보자.

Install Docker Engine on Ubuntu

Estimated reading time: 10 minutes To get started with Docker Engine on Ubuntu, make sure you meet the prerequisites, then install Docker. To install Docker Engine, you need the 64-bit version of one of these Ubuntu versions: Ubuntu Groovy 20.10 Ubuntu Focal 20.04 (LTS) Ubuntu Bionic 18.04 (LTS) Ubuntu Xenial 16.04 (LTS) Docker Engine is supported on x86_64 (or amd64), armhf, and arm64 architectures.

https://docs.docker.com/engine/install/ubuntu/

3️⃣ Download using Dockerhub

도커 설치가 완료됐다면 이제 도커 허브에 있는 이미지를 받아서 실행해보도록 한다.

docker run 명령은 이미지가 없다면 받아서 컨테이너 실행까지 한번에 진행한다. run 명령을 통해 React 앱을 실행까지 시켜보자.

$ sudo docker run --name web -p 80:80 -dt qkrwltn24/react-nginx:v1

On Browser

브라우저에서 EC2 인스턴스의 public IP를 통해 접속하면 인스턴스를 통해서 Nginx 서버와 React 앱이 제대로 동작하고 있음을 확인할 수 있다.

AWS EC2 인스턴스 - HTTP 접속 화면

Uploaded by Notion2Tistory v1.1.0