현재 개발중인 졸업작품 프로젝트가 막바지를 달리면서 웹사이트를 배포를 해야했습니다. 분명 올해 초에 많은 고민과 시도 끝에 배포에 성공한 기억이 있었지만 다시 배포를 하려고 보니 까먹어버리는 불상사가 발생하고 말았습니다 🥲. 그래서 까먹었을 때 다시 찾아와서 배포하는데 시간을 단축하기 위해서, 또 저처럼 까먹는 사람들이 보고 편리하게 이용하실 수 있도록 블로그에 글을 포스팅하려고 합니다.
🌟저는 맥북을 사용하고 있으므로 macOS 기준으로 설명하는 점 참고해주세요!🌟
🧐 글을 읽기 전에!
EC2로 인스턴스 생성하는 방법이 궁금하신 분은 이 포스트를 참고해주세요!
[EC2로 인스턴스 생성하는 방법]
❗️ 배포하기 전 빌드파일 인스턴스에 옮기기
build파일을 배포하기 위해서 해당 파일을 EC2 서버로 옮겨야 하는데요..!
GitHub를 이용해 clone하자니 git도 설치해야하고, nodejs도 추가적으로 설치해야하는 문제를 직면해서 많은 불편함을 느꼈습니다. 😅
간단한 배포를 위해 FileZilla를 설치해 build파일만 옮기는 방법을 선택했는데요!
파일을 이미 옮기셨다면 다음으로 넘어가겠습니다!
➕ 탄력적 IP 주소 할당
인스턴스를 배포했지만 IP를 고정적으로 사용하기 위해서는 탄력적 IP를 발급 받아 사용해야 합니다.
이미 탄력적 IP 주소 설정을 완료하셨다면 넘어가주세요!
내가 생성하려는 인스턴스 지역과 네트워크 경계 그룹이 일치하는지 확인한 후 생성해줍니다!
다음으로 IP 주소를 연결해주면 되는데요!
해당 인스턴스와 IP를 연결해주면 고정 IP가 할당됩니다!
이렇게 되면 고정 IP 할당 끝! 🏁
pemKey 권한 설정
다음으로 인스턴스 서버를 관리하기 위해 SSH로 접속을 해야하는데요. 저는 pemKey를 접근 권한으로 설정했기 때문에 pemKey로 접속을 시도하겠습니다.
SSH 접근을 위해서는 pemKey의 [읽기 권한]을 설정해주어야 합니다.
chmod 명령어를 통해 pemKey의 권한을 변경해줍시다!
$ chmod 400 <pemKey파일_주소>pemKey로 SSH 접속
자 이제 권한 설정을 해준 pemKey로 SSH를 접속해봅시다!
보통 인스턴스를 우분투로 생성하신 분이라면 사용자 이름은 ubuntu 일거에요!
$ ssh -i <pemKey파일_주소> <사용자이름 ex)ubuntu>@<PUBLIC_IP>접속 하시게 되면 해당 화면이 나오게 됩니다!
yes 입력하시면 정상적으로 접속되는 모습을 확인할 수 있습니다!
정상적으로 접속하셨다면 이제 NGINX를 설치해볼건데요!
⚙️ NGINX 설치
설치하기에 앞서 먼저 업데이트를 진행합니다.
$ sudo apt update업데이트가 완료됐다면 NGINX를 설치해줍니다!
$ sudo apt install nginx정상적으로 설치가 된 후에 배포 파일을 연결하기 위한 기본 설정을 진행할건데요!
기존에 연결되어 있던 파일들이 충돌이 일어날 수 있으니 해당 파일은 삭제해줍니다.
$ sudo rm /etc/nginx/sites-available/default
$ sudo rm /etc/nginx/sites-enabled/default삭제가 됐다면 conf파일로 NGINX서버와 연결하기 위한 기본 설정 파일을 만들건데요!
해당 경로로 이동 후 설정 파일을 만듭니다.
저는 react-app이라는 build파일을 배포할 예정이라 react-app.conf 라고 이름을 짓도록 하겠습니다!
파일을 생성 후 파일에 해당 내용과 같이 작성해줍니다.
$ cd /etc/nginx/sites-available
$ sudo vi react-app.confserver {
listen 80;
location / {
root /home/react-app/build;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}[설정파일들에 대한 정보]
listen 80: 포트 80에 대한 설정location /: URL이/가 포함된 경로에 대한 설정root: 실행할 파일들의 루트 위치index: 인덱스 파일들 지정. 이 파일들 중 꼭 하나는 root 경로 안에 존재해야 합니다.try_files: 어떤 파일을 찾을 때 명시된 순서로 찾으며, 가장 먼저 발견되는 파일을 사용
설정 파일을 만들고 난 후 아래의 명령어를 통해 심볼릭 링크를 /etc/nginx/sites-enabled폴더에 만들어줍니다.
웹 서버가 동작될 때 sites-enabled에 있는 설정 파일들을 참조합니다.
$ sudo ln -s /etc/nginx/sites-available/react-app.conf /etc/nginx/sites-enabled/react-app.conf이제 파일의 설정은 모두 끝이 났습니다!
아래의 명령어로 웹서버를 재시작하고, 잘 동작하는지 확인합니다.
잘 동작한다면 EC2에 설정되어 있는 http://{public IP}:80 주소를 통해 접속해보세요!
$ sudo systemctl restart nginx
$ sudo systemctl status nginx접속이 잘 되는 모습을 확인할 수 있습니다!! 🥳
🥳 후기
이 방법을 통해서 현재 진행중인 졸업작품 프로젝트에 배포를 성공했는데요!(뿌듯) 추후에는 S3를 이용해서 배포하는 방법도 찾아봐서 직접 배포해봐야겠다는 생각이 들었습니다. 그리고 S3와 EC2 + NGINX의 차이도 조금 연구를 해봐야겠다는 생각이 들었어요.(왜 S3를 더 선호할까..?)
아쉬웠던 점은 S3를 이용해 배포를 시도하고자 했는데, 학교에서 제공해주는 AWS academy 계정은 IAM 생성이 안되기 때문에 직접 프리티어 계정을 생성해서 만드는 방법으로 진행해봐야겠다는 생각이 들었습니다! 아무튼 배포 완료! 👍
이상으로 포스팅을 마무리 하겠습니다!
긴 글 읽어주셔서 감사합니다 🙇♂️
