이전 포스팅에서는 도커파일을 통해 도커 이미지를 생성한 후 Docker hub에 올리는 방법을 알아보았다.
이제 해당 이미지를 AWS EC2 에서 사용하기 위해 AWS에 접속 후 인스턴스를 생성해보자.
✅패키지 매니저: npm
✅윈도우(Windows)
✅React(Create React App)
AWS에 접속한 뒤 인스턴스 시작을 클릭한다.
우선 인스턴스 이름을 입력해준다. 그리고 스크롤을 내리면
위와 같이 키 페어를 생성하는 항목이 나온다.
새 키 페어 생성을 누른 뒤 키 페어 이름을 입력하고 키 페어 유형은 RSA 그대로 냅둔다.
우리는 putty에 접속하여 인스턴스에 접근할 것이므로 키 파일 형식을 .ppk로 체크한 뒤 생성해준다.
다운로드 된 키 페어를 잘 저장해준다.
그 후 해당 페이지에서 인스턴스 시작을 다시 눌러주면
위와 같이 인스턴스가 생성된 것을 확인할 수 있다.
그 후 생성한 인스턴스에 탄력적 IP를 설정해줘야 한다. 탄력적 IP를 통해 고정적인 공인 IP 주소를 할당할 수 있고, 추후 해당 주소를 통해 배포된 서비스에 접속할 수 있다.
탄력적 IP에 들어간 후 탄력적 IP 주소 할당을 눌러준다.
그 후 아무것도 건들지 말고 다시 할당을 눌러주면
위와 같이 탄력적 IP가 생성된 것을 확인할 수 있다. 이제 이를 만든 인스턴스에 할당해줘야 한다.
할당된 IPv4 주소에 있는 주소를 클릭한 후, 탄력적 IP 주소 연결을 눌러주면
위와 같은 창이 뜬다.
인스턴스 선택을 클릭하여 만들어준 인스턴스를 선택해준 뒤 연결을 눌러준다.
다시 인스턴스 정보에 들어가보면 위처럼 탄력적 IP 주소가 할당된 것을 확인할 수 있다!!
이제 인바운드 규칙을 설정해 줄 차례이다.
해당 인스턴스 정보 페이지에서 보안을 클릭한 뒤 보안 그룹을 클릭해보자.
그 후 위의 인바운드 규칙 편집 버튼을 클릭하여 들어가준다.
https 설정은 추후에 해줄 것이므로 일단 http 배포를 가정하자.
- http로의 접근은 누구든지 가능해야 하므로 Anywhere-IPv4, Anywhere-IPv6로 설정해준다.
- 보통 프론트는 호스트의 3000포트를 이용하므로 사용자 지정 TCP에서 포트 범위를 3000으로 지정해준다. 그 후 http 와 마찬가지로 Anywhere-IPv4, Anywhere-IPv6로 설정해준다.
- 마지막으로 SSH도 설정해줘야 한다. SSH(Secure Shell)는 원격지 호스트 컴퓨터에 접속하기 위해 사용되는 인터넷 프로토콜이다. 이를 위에처럼 Anywhere-IPv4, Anywhere-IPv6 로 설정해주면 보안에 매우 취약해진다. 이렇게 설정해주고 만약 위에서 만들어준 키 페어를 탈취당한다면 인스턴스를 정복당한 것이나 다름없다. 따라서 내 IP에서만 접근할 수 있도록 내 IP 설정해준다.(만약 장소를 이동한다면 내IP 가 바뀌므로 인바운드 규칙을 수정해줘야한다)
이와 같이 인바운드 규칙을 설정해준 뒤, 저장을 해준다.
이제 한번 putty를 통해 SSH 프로토콜을 활용하여 인스턴스에 접근하자.
putty에 접속하여 Host Name에 인스턴스의 퍼블릭 IPv4 주소를 적어준다.
그 후 SSH -> Auth 에 들어가 저장해두었던 ppk 키를 넣어준다.
접속이 되면 기본적으로 모든 인스턴스의 아이디는 ec2-user로 설정되어있으므로 이를 입력해보자.
위와 같이 접속이 잘 된 것을 확인할 수 있다.
이제 docker 명령어를 활용하여 Docker hub에 올려져있는 이미지를 끌어와야 하는데 현재 인스턴스에 docker가 설치되어 있지 않아서 docker 명령어가 먹히지 않을 것이다.
sudo yum install docker -y
위 명령어를 통해 docker를 설치해주자.
sudo service docker start
그 후 위 명령어를 통해 docker를 실행해준다.
sudo usermod -aG docker ec2-user
마지막으로 위 명령어를 통해 ec2-user 라는 아이디를 가진 유저가 Docker 명령어를 슈퍼 유저 권한으로 실행할 수 있게 설정해 준다.
명령어 실행 후 인스턴스에 재접속 하면 docker 이미지를 끌어올 준비가 다 되었다!!
docker pull '도커 허브에있는 이미지 이름'
위 명령어를 통해 해당 인스턴스로 Docker hub에 올라가져 있는 이미지를 pull 해온다.
그 후 docker image ls 명령어를 통해 확인해보면 위처럼 이미지가 잘 pull된 것을 확인할 수 있다.
이제 해당 이미지를 사용하여 컨테이너를 실행시키면 끝!!
docker run -d --name '컨테이너 이름' -p [호스트 포트]:[컨테이너 포트] '이미지 이름'
해당 명령어를 통해 컨테이너를 실행시켜준다.
- -d 옵션을 통해 컨테이너를 백그라운드에서 실행시킨다.
- -p 옵션을 통해 포트 포워딩해준다. 우리는 인바운드 규칙에서 3000포트를 열어주었으므로 호스트 포트에 3000을, 도커파일에서 nginx설정에서 3000포트를 EXPOSE 하고 listen 하고 있으므로 마찬가지로 3000을 입력하였다.
해당 명령어 수행 후 현재 실행중인 컨테이너를 확인해볼 수 있는 docker ps 명령어를 입력해보면
위와 같이 컨테이너 하나가 돌아가고 있음을 확인할 수 있다!!
이제 모든 준비가 끝났다.
브라우저에 [인스턴스의 public IP]:3000 을 입력해보면
위와 같이 서비스에 잘 접속이 되는 것을 확인할 수 있다!!!
이제 Docker 와 AWS EC2 로 프론트 배포에 성공했다. 하지만 우리는 엄청난 사실을 망각하고 있다.
만약 코드에 수정사항이 생겨 재배포를 해야한다고 생각해보면 위의 과정을 계속 수동으로 반복해야 한다...
이를 위해서 github는 배포 과정을 자동화 할 수 있도록 Github Action이라는 툴을 지원해준다.
해당 툴을 사용하여 재배포 과정을 자동화 하는 과정 커밍 쑨....
'FrontEnd > React' 카테고리의 다른 글
Vite + Yarn Berry 구축기 - 1 (4) | 2023.12.06 |
---|---|
AWS EC2에 HTTPS 적용하기 (4) | 2023.11.28 |
배포 과정 Github Actions 로 자동화하기 (0) | 2023.11.27 |
Docker + AWS EC2 로 프론트 배포하기(1) (2) | 2023.11.26 |
Throttle & Debounce 란? (0) | 2023.08.31 |