EC2에 프론트엔드(REACT) 배포하기

EC2서버에 도커를 활용하여 프론트엔드를 배포하는 과정입니다.

이 전에 먼저 수행해야 할 것은
1. docker (로컬)설치 참고사이트
2. dockerhub 아이디 생성
3. mobaXterm 설치

mobaXterm으로 EC2서버에 ubuntu 환경으로 접속한 과정 이후부터 설명하겠습니다.

1. DOCKER설치 (EC2)

1) DOCKER에 필요한 필수 패키지 설치

sudo apt-get update
sudo apt-get install -y \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

2) GPC Key 인증 진행

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
# ok가 나오면 인증 성공!

3) DOCKER 설치

sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io

4) 설치 확인

docker --version
# 버전이 나온다면 설치완료 !

2. Nginx설치 (EC2)

1) Nginx 설치

sudo apt update
sudo apt install nginx

2) Nginx 시작

sudo service nginx start

3) 포트포워딩
HTTP (포트 80) 및 HTTPS (포트 443) 포트 열기 참고하기

4) Nginx 설정파일 백업

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.backup

5) Nginx default파일 수정

sudo vim /etc/nginx/sites-available/default
# 그나마 쉬운 vim에디터 사용법 https://hun-dev.tistory.com/5

6) default파일 수정

# 아래 내용을 추가해준다.
location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                proxy_pass http://localhost:3000;
        }
        location /api/ {
                proxy_pass http://localhost:9000;
        }

7) 설정파일 테스트

sudo nginx -t
#ok, success 등이 나오면 성공이다

8) Nginx재시작

# 꼭 재시작을 해줘야 한다.
sudo service nginx restart

3. dockerfile 작성

프로젝트의 루트 디렉토리에 dockerfile을 생성한다.
나는 다음과 같은 dockerfile을 이용했다.

# 가져올 이미지를 정의(노드버전확인필수)
FROM node:18
# 경로 설정
WORKDIR /app
# package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함)
COPY package.json .
# 명령어 실행 (의존성 설치)
RUN npm install
# 현재 디렉토리의 모든 파일을 도커 컨테이너의 워킹 디렉토리에 복사한다.
COPY . .

# 각각의 명령어들은 한줄 한줄씩 캐싱되어 실행된다.
# npm install과 COPY . . 를 동시에 수행하면
# 소스 코드가 조금 달라질때도 항상 npm install을 수행해서 리소스가 낭비된다.

# 3000번 포트 노출
EXPOSE 3000

# npm start 스크립트 실행
CMD ["npm", "start"]

4. 프로젝트 빌드하기(vscode)

npm run build

5. 이미지 빌드하기(vscode)

# docker build -t {도커 허브 계정}/{레포지토리 이름}:{태그명} .
docker build -t sionyang/asap:asap-front-v1.3 .

# 도커 허브 계정은 도커 허브 오른쪽 상단의 아이디이다.
# 레포지토리 이름은 본인이 설정하면 된다.

6. 도커허브에 이미지 push(vscode)

# docker push {도커 허브 계정}/{레포지토리 이름}:{태그명}
docker push sionyang/asap:asap-front-v1.3d

7. EC2에서 pull 하기(EC2)

docker pull sionyang/asap:asap-front-v1.3

8. EC2에서 RUN

# 직전 이미지가 있다면 삭제하고 run
docker run -d -p 3000:3000 --name asap-fe sionyang/asap:asap-front-v1.3

# --name태그로 asap-fe라는 이름을 성절하여 사용하였다.

한번 해보면 쉽지만 한번 성공하기까지가 매우매우 어려운 배포.. (다들 이렇게 말한다..)
이 글을 보고 영감을 얻어 포기하지말고 꼭 성공하시길 기원합니다🙏