ECS + Github action을 위한 여정 (2) ~ Local에 있는 React 프로젝트를 EC2로 옮긴 뒤 Docker로 Build하기 ~

이전 글 :

ECS + Github action을 위한 여정 (1) ~ EC2 구성 및 Docker 설치 ~

ECS + Github action + CodeDeploy를 위한 여정 (1) ~ EC2 구성 및 Docker 설치 ~

 

전 포스팅에 이어서 이젠 Local(나의 PC)에 있는 Dockerfile이 포함된 React 프로젝트를 EC2에 옮겨 Image로 빌드하기 까지 과정을 포스팅하겠습니다.

 

1. EC2의 public DNS 확인하기

모자이크 처리되어있지만, IPv4 DNS 부분 아래의 주소를 확인하면 된다.

노란줄 부분의 DNS를 일단 확인합니다.

 

2. EC2에서 프로젝트를 저장할 폴더 생성 및 권한 부여

sudo mkdir prod

prod라는 이름의 폴더를 만들어줍니다

 

ls로 확인하면 짜잔..!

이후 권한을 부여해 줘야 합니다. 

 

소유주와 권한의 상태가..

보시는 바와 같이 방금 생성한 prod라는 폴더는

root 권한이 권한을 갖고 있으며(생성한건 ec2-user인데..?)

그룹 권한은 읽기/실행

그 외 유저 권한은 읽기/실행 이렇게 권한이 있는것을 확인할 수 있습니다.

w에 해당하는 쓰기가 없기에 권한을 부여해 줍니다

 

sudo chmod 757 prod

이후

ls -l

명령어를 통해 확인

권한이 바뀌었다!

보시는 바와 같이 prod의 타 유저 권한이 rwx로 바뀐것을 확인할 수 있습니다.

chmod 숫자들은 타 블로그에 상세하게 적혀있을테니 패스..

 

3. 로컬 pc에서 파일 옮기기

 

CRA로 만든 리엑트 프로젝트를 기준으로 하겠습니다.

다른 폴더들은 그렇다 쳐도...

아마 npm을 통해 build를 진행하셨으면 build 폴더 까지는 확인 가능하실텐데, forMig는 생판 처음 보는 폴더일겁니다.

 

그럴 수 밖에 없습니다 제가 src,public,dockerfile, pacakge*.json 등만 옮기기 위해 만든 폴더니까요..

node_modules를 EC2에 옮기기엔 자원 소모가 너무 크고 오래걸립니다. 그래서 깃헙에 올리는 구조와 비슷하게 

src,public 등만 올리기 위해 폴더를 분리했습니다. 아래 진행할 scp 명령어도 위 forMig폴더를 기준으로 진행합니다..

 

우선 해당 ec2의 secret key인 .pem 파일이 있는 폴더로 이동합니다

 

 cd C:\Users\[유저]\Downloads\

 

저는 Downloads에 그대로 있기에.. Downloads에 이동.. (머쓱)

 

scp -i [해당 EC2에서 사용하는 pem].pem -r "[프로젝트경로]\forMig\" [ec2에 들어간 user 아이디]@[public dns 경로]:/prod

 

경로 이동을 한 뒤 위의 명령어를 커스터마이징 하여 입력합니다.

위 ec2에 들어간 user 아이디는 연결시 따로 아무런 설정을 안했으면 ec2-user일 것입니다.

뒤의 public dns경로는 1번에서 확인한 그 경로이며, /prod는 2번에서 만든 그 폴더입니다.

만약 파일 하나만 옮기신다면, -r을 제외하시면 됩니다. 저는 디렉토리를 통째로 옮기느라 -r 옵션을 사용했습니다.

 

뭐 연결하겠냐 이런거같네요

yes를 입력한 뒤 진행합니다.

 

시간이 좀 지나서 lost connection이 나왔다면, 다시 위의 public DNS를 확인하여 복사해준 뒤 동일한 명령어를 입력하면

js파일 등등이 쫘라라라라락 옮겨집니다.

 

 

무야호~

 

이제 EC2에서 확인해 볼까요

 

흠.. 좋군

잘 옮겨진것을 확인할 수 있습니다.

 

4. 설치한 docker와 해당 프로젝트에 있는 Dockerfile로 이미지로 build 하기

 

저의 Dockerfile은 아래와 같이 작성되어있습니다.

 

FROM node:17.4.0-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .

# 3000번 포트 노출
EXPOSE 3000

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

node 버전은 사용하시는 버전을 기입하시면 됩니다.

 

일단, 저는 EC2에서 리엑트 프로젝트의 폴더가 forMig라는 이름으로 되어있는게 마음에 안듭니다 (폴더째로 그대로 옮겼으니까 그렇겠죠)

그래서 아래 명령어를 통해 폴더명을 바꿔줍니다.

mv forMig react

 

짜잔

바뀌었습니다 이제 만족스럽네요.

 

cd react

방금 이름을 바꾼 react 폴더로 이동합니다.

 

이동한 뒤, 아래 명령어로 docker image로 CRA 앱을 빌드합니다.

 

sudo docker build -t react .

여기서 react는 이미지 이름으로, 마음대로 지으셔도 됩니다. 전 그냥 react로..

 

입력하면 뭔가 한참 돌아간 뒤

 

뭔가 Success가 들어간 말이 나오면 성공..

docker image 리스트를 확인해줍니다.

뭐 이상한거도 많은데 일단 저희가 정의한 react란 tag를 가진 이미지가 있으니 성공입니다.

 

5. build한 docker 이미지 컨테이너에 올려 구동

 

이미지를 확인  후 해당 이미지를

docker run 명령어를 통해 서버를 3000번 포트로 띄워줍니다

sudo docker run --name react -p 3000:3000 -d react

위 명령어를 해설하면 아래와 같습니다

 

 

docker run ---name [해당 컨테이너 이름] -p(포트 포워딩 옵션) [노출시킬 포트] : [package.json에 정의된 port / default :3000] -d(daemon으로 컨테이너 구동) [이미지명]

 

 

실행 뒤 아무런 에러가 나타지 않으면 아래 명령어로 확인

sudo docker ps

잘 구동되고 있습니다..

 

이제 AWS의 네트워크 인바운드 규칙에 3000번 포트를 허용한 뒤

이 이미지가 잘 호스팅 되고 있는지 확인해봐야 합니다.

 

EC2 인스턴스 상세 정보로 다시 넘어옵니다.

 

-> 보안 탭 클릭하여 "보안 그룹" 아래의 일련번호 클릭

 

 

 

 

인바운드 규칙 편집 클릭 

 

사용자 지정 TCP 선택 후 3000번의 포트 범위를 입력 후 

"규칙저장"

 

그 다음 인스턴스 콘솔로 다시 돌아 온 뒤 아래와 같이

 

"자동할당된 IP주소" 옆 네모버튼을 클릭하거나 드래그하여 해당 주소를 복사해 둡니다.

 

복사해 둔 주소 뒤에 :3000 포트를 입력하여 접속하면..

 

 

제가 만든 react app이 이미지로서 호스팅되고 있음을 확인할 수 있습니다.

확인이 되었으면

EC2로 호스팅할 것이 아니라 이미지가 잘 되는지 확인하는 용임으로 container 중지..

 

 

 

다음에는 이 react 이미지를 ECR에 push하는 법을 포스팅하고자 합니다.

 

다음 글:

ECS + Github action을 위한 여정 (3) ~ EC2에 있는 Docker image 파일을 ECR에 push하기 ~

ECS + Github action + CodeDeploy를 위한 여정 (3) ~ EC2에 있는 Docker image 파일을 ECR에 push하기 ~