AWS EC2 nginx에 프론트엔드 직접 배포하기

EC2에서 nginx에 정적으로 파일을 올려 

프론트엔드 프로젝트를 배포하는 방법을 강의를 듣고 따로 찾아보며 정리해 봤다.

 

가장 먼저 AWS에서 EC2를 하나 생성하고 ssh를 이용해 접속해 준다.

그다음 apt 명령어를 통해 nginx를 설치해준다. 

 

그 다음 curl localhost:80을 입력해 현재 nginx가 정상적으로 동작하고 있는지 확인한다.

curl을 사용하면 터미널에서 직접 HTTP 요청을 보내고 응답을 받을 수 있다.

위 스크린샷처럼 제대로 nginx가 정상적으로 실행중임을 확인할 수 있다.

 

하지만 웹 브라우저로 EC2의 퍼블릭 ip로 접속을 해보면 접속이 안된다.

그 이유는 ssh로 접속했을 때는 local에서 호출해서 문제없었지만

외부에서 접속하려고 하면 방화벽에 막히기 때문에 정상적으로 호출할 수 없는 것이다.

 

EC2의 경우에는 보안 그룹을 통해 방화벽을 설정할 수 있다. 

따라서 EC2에 적용한 보안 그룹의 인바운드 규칙에서 80 포트를 public으로 열면 외부에서도 접속할 수 있다.

 

이제 다시 웹브라우저에서 접속하면 nginx가 정상적으로 호출되는것을 볼 수 있다.

 

그 다음으로 ssh로 EC2에 접속한 상태에서 wget 명령어를 이용하여 깃허브에 올린 프론트엔드 소스파일을 다운받는다.

git clone을 이용할 수도 있지만 지금은 단순하게 배포 과정을 알아보는 것이기 때문에 wget으로 프론트엔드 소스파일을

zip 형식으로 다운받았다. 이후 unzip을 이용해 다운받은 프로젝트의 소스파일의 압축을 해제한다.

 

이제 nginx에 정적파일을 올려야 하는데 Document Root를 확인하기 위해

sudo grep -R "root" /etc/nginx/ 명령어를 사용하여 확인해 본다.

확인해 보니 /var/www/html 경로라는 것을 알 수 있다.

 

해당 경로로 이동해서 ls 명령어를 통해 확인해 보니 index.nginx-debian.html이라는 html 파일이 있는것을 확인했다.

 

cat 명령어로 확인해보니 아까 웹브라우저에서 접속했을 때 보였던 html 파일이라는 것을 알 수 있다.

해당 경로가 document root라는것을 확인할 수 있다.

 

이제 프론트엔드 소스 코드가 있는 디렉토리로 이동해서 cp 명령어를 이용해 nginx에 정적파일을 올리는 영역으로 

복사해 준다.

 

이후 웹브라우저로 확인해 보면 프론트엔드 소스코드가 정상적으로 호출되는 것을 알 수 있다.

 

 

 

 

 

 

 

참고:

https://www.inflearn.com/course/%ED%8F%AC%ED%8A%B8%ED%8F%B4%EB%A6%AC%EC%98%A4-%EC%B4%88%EA%B0%84%EB%8B%A8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0/dashboard