REACT + EC2 + Vite 배포

VITE + REACT + EC2 배포

1. EC2 인스턴스 생성

AWS에 접속해서 인스턴스를 생성합니다.

이름 알아서 설정합니다.

Ubuntu 22.04 버전으로 하겠습니다.

키 페어 알아서 설정하면 되고, 그 .pem 파일은 꼭 안전한 곳에 두면 됩니다.

네트워크 설정은 다음과 같이 하면 됩니다.

스토리지는 프리티어는 30GiB까지 되기 때문에 30으로 수정하면 되고, gp2를 사용하겠습니다.

인스턴스 시작하면 다음과 같이 나옵니다.

좌측에 있는 탄력적 IP를 클릭합니다.

탄력적 IP 주소 연결합니다.

인스턴스 알맞게 선택해줍니다.

인스턴스 대시보드 들어가면 퍼블릭 IP가 잘 나오는걸 확인할 수 있습니다.

2. EC2 instance 접속

맥 사용자시라면

chmod 400 [example.pem]

.pem ← 아까 키페어 설정하면서 나온거

permission 해결하면 됩니다.

ssh -i [.pem이 있는 디렉토리]/example.pem ubuntu@[public IP]

정보 잠깐만 !!
혹시, WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! 이런 에러를 발견하셨다면, SSH에 연결하는 키를 다시 설정하면 됩니다.

ssh-keygen -R [public IP]

3. nginx + npm + nodejs 설치

sudo apt-get update
sudo apt-get install -y nginx nodejs npm

Ubuntu update하고, nginx, nodejs, npm 다운로드 합니다.

-y는 어떻게 할건지 물어보는거에서 yes로 답하겠다. 설정하는 것입니다.

4. Vite 프로젝트 빌드

다시 로컬로 오겠습니다.

REACT로 프론트엔드 개발을 하셨을겁니다. 프로젝트 디렉토리로 들어가십시오.

Vite로 프로젝트를 만들었다면, 다음과 같이 build할 수 있습니다.

npm run build

! 빌드가 잘 되었는지 궁금하시다구요 ?

npm run preview

이렇게 하면 dist 폴더 내에 빌드할 index.html이 생성될 것입니다.

scp -i [.pem 디렉토리]/example.pem -r dist/* ubuntu@[public IP]:/var/www/html

EC2 인스턴스로 dist 폴더 내에 있는 파일들을 옮겨주도록 하겠습니다.

다른 방법으로는 github repository를 이용하여

git clone [repository 주소]

repository를 clone하시면 됩니다.

5. NGINX 설정

NGINX를 설정해주도록 하겠습니다.

sudo vim /etc/nginx/sites-available/default

혹시 nano를 쓰시는 분이라면

sudo nano /etc/nginx/sites-available/default

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

    root /var/www/html;
    index index.html index.htm;

    server_name _;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

80번 PORT : HTTP로 들어올 시 EC2의 /home/ubuntu 폴더에 있는 index 혹은 index.html을 실행시킵니다.

만약, 다른 디렉토리로 들어온다면, ERROR를 발생합니다.

sudo nginx

만약 nginx가 실행중이시라면

sudo nginx -s reload

nginx를 재시작해주면 됩니다.

6. 보안그룹설정

이제 거의 다 왔습니다.

EC2 인스턴스로 돌아가겠습니다.

보안을 선택합니다. 기본적으로 세부 정보에 있을 것입니다.

보안 그룹으로 들어오시고

인바운드 규칙 편집을 클릭합니다.

규칙 추가 누르시고,

PORT는 80번, Anywhere-IP-4로 설정하고

다음과 같이 나온다면

규칙 저장 누르면 됩니다.

축하합니다 ~ !!

배포가 성공적으로 완료됐습니다.

public IP로 URL에 입력하고 들어가면 웹페이지가 보일 것입니다 🥹🥹