도메인을 설정하기 이전에 내 EC2 에 파일을 업로드 하여 테스트를 해봐야 할 겁니다.
이를 위해서 EC2 의 퍼블릭 IP 주소로 접속하면 뭔가가 나타나게 해야겠죠?
만약 EC2를 생성만 해두고 현재 퍼블릭 IP 주소로 그냥 들어가면 다음과 같은 화면이 나타날 겁니다.
아직 서버 설정이 되지 않았기 때문인데요.
이를 위해서는 내 EC2에 SSH 접속하는 방법을 알아야 합니다.
혹시 모른다면 아래 포스팅을 참고해주세요.
sudo dnf install -y nginx
우선 위 명령어를 입력해주세요.
그럼 알아서 서버가 설치됩니다.
참고로 이건 내 EC2가 Amazon Linux 2023 버전으로 설치되어 있을 때를 가정합니다.
sudo systemctl start nginx
sudo systemctl enable nginx
이번에는 위 두 명령어를 차례로 입력해서 서버를 가동해줍니다.
sudo systemctl status nginx
그리고 이제 위 명령어를 통해서 내 서버가 제대로 가동이 되는지 확인합시다.
초록색으로 나타나면 제대로 작동하는 겁니다.
요런식으로요.
하지만, 아직 내 Public 주소로 검색해도 처음과 같은 화면이 나타날 겁니다.
Port 설정이 열리지 않아서 그런 건데요.
이를 위해서 내 EC2 대쉬보드로 넘어갑시다.
우리는 HTTP 와 HTTPS 접속을 할 겁니다.
HTTP 는 포트 80, HTTP는 포트 443을 열어줘야 합니다.
어려울 것 없으니 차근차근 보겠습니다.
우선 콘솔창에 로그인 이후 EC2 대쉬보드로 이동합니다.
EC2 인스턴스를 클릭하고, 보안탭을 선택합니다. 다음과 같은 화면이 나타나면 됩니다.
아래쪽에 있는 보안탭에서 launch-wizard-1 이라는 보안그룹을 선택해서 눌러주면 됩니다.
저걸 누르면 인바운드 규칙을 설정 가능한 화면이 나타납니다.
아래에 있는 인바운드 규칙 보이죠?
저 섹션에서 “인바운드 규칙 편집” 버튼을 눌러주세요.
이제 규칙 추가 버튼을 통해서 다음과 같이 규칙들을 생성해두면 됩니다.
HTTP, HTTPS 등 선택하면 알아서 설정이 됩니다.
이제 규칙을 저장해주세요.
이제 다시 퍼블릭 IP로 접속하면, 다음과 같은 화면이 나타날 겁니다.
잘 나타나나요? 그렇다면, 성공하신 겁니다!
정상적으로 서버가 가동이 되고, HTTP로 접속이 성공한 겁니다.
다만, 내가 React 로 작업한 웹 페이지가 나타난다면 좋겠죠?
이를 위해서는 SSH 접속 이후 SFTP 접속을 통해 내 EC2 인스턴스에 접근하는 방법을 알아야 합니다.
모른다면 다음 포스팅을 참고해주세요.
먼저 SSH에 접속을 해줍시다.
cd ~
mkdir mywebsite
그리고 cd~ 을 먼저 입력해서 최상위 경로로 이동하고, mkdir 을 통해서 폴더를 생성합시다.
이 폴더 이름은 마음대로 하시면 됩니다. 저는 mywebsite 라는 이름으로 디렉토리를 생성했습니다.
잘 생성이 됐는지 한 번 EC2에 SFTP로 접근해봅시다.
그럼 요렇게 ec2-user 라는 디렉토리 내에 mywebsite 라는 디렉토리가 생성된 것을 볼 수 있습니다.
저는 이곳에 index.html 파일을 업로드 해서 해당 index.html 을 내 웹페이지가 나타낼 수 있도록 할 계획입니다.
sudo yum install nano
sudo nano /etc/nginx/nginx.conf
다시 SSH 접속창으로 돌아와서 위 명령어를 차례로 입력해주세요.
그럼 서버 설정과 관련된 파일을 확인 가능합니다.
아래 화살표 버튼을 클릭해서 쭉 내려오다 보면 아래의 Server 블럭을 볼 수 있습니다.
server { … } 형태로 되어있죠.
이 내부에 있는 값들을 수정해줄 겁니다.
지금 위 server 블럭을 보면, root 부분이 /usr/share/nginx/html; 이렇게 되어 있죠?
저는 이 여기 root 디렉토리를 내가 SFTP에서 관리하기 쉽도록 변경할 겁니다.
우선 SFTP 내부에 있는 mywebsite 라는 디렉토리에 react 를 통해 생성한 build 디렉토리를 올려줍시다.
build 디렉토리는 npm start 를 하던 위치에서, npm run build 명령어를 쓰면 생성됩니다.
이걸 mywebsite 디렉토리 내부에 넣으면 이런 모양이 되겠죠?
그럼 root 디렉토리는 /home/ec2-user/mywebsite/build; 이렇게 되면 될 거예요.
SSH 접속창에서 수정해줍시다.
저는 요런식으로 수정했습니다.
root 부분이 바뀌었고, index 라는 라인이 생성되었습니다.
저장은 컨트롤 + X 누르고 Y를 누르면 됩니다.
다음은 변경한 root 에 대한 권한을 부여할 차례입니다.
여기부터는 명령어를 줄줄이 입력하기만 하면 됩니다.
# 디렉토리와 그 안의 파일에 대한 읽기 권한 부여
sudo chmod -R 755 /home/ec2-user/mywebsite/build
# Nginx 사용자가 파일에 접근할 수 있도록 소유권 변경
sudo chown -R nginx:nginx /home/ec2-user/mywebsite/build
sudo chown -R nginx:nginx /home/ec2-user/mywebsite
sudo chmod -R 755 /home/ec2-user/mywebsite
# /home/ec2-user 디렉토리에 대한 실행 권한 추가
sudo chmod 755 /home/ec2-user
# /home/ec2-user/mywebsite 및 하위 디렉토리/파일에 대한 소유권 및 권한 설정
sudo chown -R nginx:nginx /home/ec2-user/mywebsite
sudo chmod -R 755 /home/ec2-user/mywebsite
위 명령어들을 차례대로 쭉 실행하여 home/ec2-user/mywebsite 내부에 있는 문서들에 접근이 가능하도록 해줍시다.
sudo systemctl restart nginx
이후 다음 명령어를 통해 서버를 재가동해주면 됩니다.
이제 다시 한 번 퍼블릭 IP로 들어가면, 우리가 업로드했던 Build 폴더 내부의 index.html 대로 사이트가 생성됩니다.
이것으로 EC2를 생성하고, 내 React 코드를 직접 웹페이지에서 확인하는 것이 가능합니다.
다른 사람들과 퍼블릭 IP로 공유도 가능하니 의견을 주고 받는 것도 쉽겠죠.
혹시 이렇게 생성된 사이트의 http 보안까지 해결하고 싶다면 다음 포스팅을 참고해주세요.