Frontend 배포 과정 정리(초보자 가이드)

wine Faster·2024년 9월 12일

aws docker ec2 깃허브

배포

목록 보기

1/2

해당 절차는 본인 프로젝트 기준으로 작성된것이며,

실제 작업 시 작업물에 따라 일부 절차가 다를 수 있음을 알립니다.

도커 허브

도커 허브 가입

링크: https://hub.docker.com/

도커 허브에 레포지토리 생성
- create repository 클릭
- 내가 원하는 repsitory 이름 입력
- public로 선택
- create 클릭

아마존 콘솔 ec2

아마존 콘솔 가입
- 링크: https://aws.amazon.com/ko/console/
아마존 콘솔 ec2 인스턴스 생성
- 아마존 검색 창에 ec2 검색
- ec2 진입 후 인스턴스 시작 버튼 클릭
- 내 프로젝트 이름 입력
- 애플리케이션 및 OS 이미지 Ubuntu 선택(Ubuntu 버전은 그냥 최신 버전 사용)
- 새로운 키 페어 생성
  - 새로운 키 페이어 생성 시 아마 로컬 다운로드 폴더에 키페어가 다운로드 될거임, 우선 그대로 두고, 나중에 사용할것이다.
- 네트워크 설정에서 SSH, HTTPS, HTTP 모두 선택
- 다른건 그냥 두고 인스턴스 시작 버튼 클릭

ec2 인스턴스 설정
- 방금 생성한 ec2 인서턴스ID 클릭하고 진입
- 상단에 있는 연결 버튼 클릭
- 연결에 진입 후 SSH 클라이언트 탭 클릭
- SSH 클라이언트 탭 가장 하단에 있는 '예:' 뒤에 있는 사용할 예정

CMD로 프라이빗 IPv4 주소 연결

내 컴퓨터 검색창에 CMD 입력
CMD 열기
CMD에 해당 코드 입력
- 코드 입력 후 키페어 경로로 연결될 것임
```
cd "방금 다운로드 받은 키페어 경로"
```
방금 SSH 클라이언트 탭 가장 하단에 있는 '예:' 뒤에 있는 것 복사해서 cmd에 붙어넣기
- yes 입력
- 그럼 ec2 인스턴스의 프라이빗 IPv4 주소로 연결될 것임

CMD로 도커 설치

해당 명령어 CMD에 입력
- 그냥 순차적으로 하니씩 입력하면 됨,
- 특정 명령어는 입력 후 대기가 필요하니까 내 IPv4 주소가 다시 나올때까지 기다리면 됨
- docker ps 입력 후 CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAME 나오면 완료된거임

	sudo apt-get update
	sudo apt-get install docker.io -y
	sudo systemctl start docker
	sudo docker run hello-world
	sudo chmod 666 /var/run/docker.sock
	docker ps
    docker --version
    
    ls -al    //설치된 파일 확인 가능

내 프로젝트 비주얼 스튜디오에 파일 생성

front 파일에 새로운 파일 .github 생성
.github 파일 하위에 새로운 파일 workflows 생성
workflows 하위에 cicd.yml 생성

cicd.yml에 해당 코드 입력

name: CICD

on:
 push:
   branches:
     - main

jobs:
 build:
   runs-on: ubuntu-latest
   steps:
     - name: Checkout Source Code
       uses: actions/checkout@v4

    
	- name: Create .env file
       run: |
         touch .env
         echo "${{ secrets.REACT_APP_AUTH_CLIENT_ID }}" > .env
   - name: Sign in to Docker Hub
       run: docker login -u ${{ secrets.DOCKER_USERNAME }} -p ${{ secrets.DOCKER_PASSWORD }}


	- name: Build Docker Image
       run: docker build -t 맨 처음에 생성 레지토리 이름 .
	- name: Push Docker Image
       run: docker push 맨 처음에 생성 레지토리 이름:latest

deploy:
   needs: build
   runs-on: aws-ec2
   
	steps:
     - name: Pull image from docker hub
		 run: docker pull 맨 처음에 생성 레지토리 이름:latest 

	  - name: Delete existing container
       run: docker rm -f reactContainer
     - name: Run container
       run: docker run -d -p 80:80 --name reactContainer 맨 처음에 생성 레지토리 이름

front 파일에 새로운 파일 Dockerfile 생성
Dockerfile 해당 코드 입력

	#Build React App
     FROM node:alpine3.18 as budockild
     WORKDIR /app
     COPY package.json .
     RUN npm install
     COPY . .
     RUN npm run build
     
     
     #Server Setting nginx
     FROM nginx:1.23-alpine
     WORKDIR /usr/share/nginx/html
     RUN rm -rf *
     COPY --from=build /app/build .
     EXPOSE 80
     ENTRYPOINT [ "6", "-g", "daemon off;" ]

깃허브에 env 파일 생성

내 프로젝트 파일과 연결된 원격 깃 repository에 진입
상단에 맨 우측에 있는 settings 클릭
secrets and variables 클릭 - actions 클릭
new repository secret 클릭
env 파일 하나씩 생성
- name: 방금 yml 파일에 있는 env 파일 이름 복사 붙어넣기
  - REACT_APP_AUTH_CLIENT_ID
  - DOCKER_USERNAME
  - DOCKER_PASSWORD
- secrets:
  - REACT_APP_AUTH_CLIENT_ID: 환경 파일 내용
  - DOCKER_USERNAME: 도커 아이디
  - DOCKER_PASSWORD: 도커 로그인 비밀번호

깃허브 actions - runners

깃허브 settings - actions - runners - new self-hosted runner 클릭
new self-hosted runner에서 리눅스 선택
리눅스 선택 후 나오는 Download, Configure에 있는 명령어를 cmd에서 하나씩 실행
- Download에 있는 명령어는 그냥 순차적으로 진행
- Configure에 있는 첫번 째 명령어 실행 후 press enter for default 나오면 enter키 클릭
- enter the name of runner.. 문자열 나오면 aws-ec2 입력하고 enter
- 다음 명령 입력에 aws-ec2 한번더 입력 엔터
- 한번더 엔터 치면 setting saved 메시지 확인
- 그 다음에 Configure에 있는 ./run.sh 실행
깃허브 새로고침하면 방금 만든 aws-ec2가 Idle 상태인것을 확인할 수 있다