client 배포 + CI/CD (React 파일 S3에 업로드)

1.Client 배포

1)배포 방법

=>웹 클라이언트는 정적 파일의 집합이라서 S3와 같은 스토리지 (파일에 URL을 이용해서 접근이 가능)를 이용할 수 있음

비용이 저렴해서 S3을 많이 이용.

CloudFront 를 연결할 수 있음

=>웹 클라이언트도 도커 이미지로 만들어서 컨테이너로 배포할 수 있음

 

2)S3에 CI/CD 를 이용해서 배포

=>준비

- 버킷을 준비: 외부에서 업로드 가능(버킷을 만들고 정책을 수정)하도록 설정

정적 웹 호스팅이 가능(속성 탭에서 정적 웹 호스팅 속성을 활성화)하도록 생성

ACL 활성화 됨

 

차단 해제 하고 맨밑에 클릭

 

=> [권한] 탭에 [버킷 정책] 수정

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*",
                "s3:Put*",
                "s3:Delete*"
            ],

            "Resource": [
                "arn:aws:s3:::wangbucket11",
                "arn:aws:s3:::wangbucket11/*"
            ]
        }
    ]
}

 

=>[속성] 탭에 [ 정적 웹 사이트 호스팅 편집 ] 변경

react 경우 빌드를 하게 되면 index.html이 나와서 index.html 을 인덱스 문서에 작성하고 오류문서에는 error.html 인데 따로 설정 필요X

 

-버킷에 파일을 업로드 할 수 있는 유저 정보 필요: IAM 서비스에서 S3FULLACCESS 권한을 갖는 유저를 생성하고 키를 발급받습니다.

직접 정책 연결에서 S3 FULL ACCESS 접근 권한 부여

사용자 눌러서 액세스 키 생성 - AWS CLI 사용해서 access 하도록

 

 

=>react code 생성(이건 알아서 하기~)

생성할때 주의할점:
1.local에서 npm start 를 하면 아주 잘 실행되는데 코드가 올라가는게 아니라 build 디렉토리가 올라가게 됨
index.js 는 절대 경로의 기준이 public 이고 css 는 src가 절대 경로 기준
css를 별도로 만들어야할때는 src 이다. index.js의 절대 경로 기준이 public 임

2. 경고가 생기면 build가 실패할 수 있음 ( 불필요한 import 나 사용하지 않은 코드는 삭제)
이 경우는 local 에서는 build 가 될수도 있지만 CI/CD에서 github action 에서 문제가 생길수가 있음

3.버전 맞추기 잘하기
java 는 무조건 내꺼보다 높은걸 가져오면되는데 python은 문제가 생길수도..?

4.프로그램이 실행되는 과정
source code -> compile (운영체제나 jvm이 이해할 수 있는 코드) ->build(실행될 수 있는 코드)
jenkins는 build 툴 => spring boot는 자기 자신도 build 가 가능함
local 에서 잘됬는데 CI/CD 구축에서 안되더라 => 경고가 생긴걸 지워야함

 

=>GitHub Action을 s3에 정적 웹사이트 배포 -CI/CD 구현

-git hub repo 준비

 

-프로젝트의 .github/workflows 디렉토리에 yml 파일을 만들어서 action 코드를 작성

주의할 점은 aws의 access key 와 access secret key 는 하드 코딩되면 안됩니다

이전에는 하드코딩을 하게 되면 aws 계정이 중지되었는데 지금은 github 에서 업로드가 안됩니다

한번이라도 하드코딩을 해서 업로드가 중지되면 이후 하드코딩된 key 값을 삭제하더라도 업로드가 되지 않습니다. 이런 경우 .git 을 삭제하고 다시 연결해야 합니다.

git action 코드를 작성할 떄 key 는 git hub의 secret key 를 이용하고 name 속성의 값은 아무거나 지정하셔도 됩니다.

 

=>.github/workflows/{이름아무거나}.yml  

name: CI/CD bkbk_client to AWS S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    #코드 체크 아웃 까지는 무조건 동일하게 작성
    runs-on: ubuntu-latest
    steps:
      - name: 코드 체크아웃
        uses: actions/checkout@v3
      #이 부분은 ECR 인아 ECS, EKS 사용할 떄는 수정
      #{{}} 가 되어 있는 부분은 github에서 환경 설정에 있는 값을 찾아오는 문장
      - name: AWS IAM 사용자 설정
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}
      
      #이 명령으로 빌드가 됨. 
      - name: 리액트 빌드
        run: |
          npm install
          npm run build
      
      #빌드한 파일을 S3에 업로드
      - name: 빌드한 파일 S3에 업로드
        run: aws s3 sync build/ s3://${{ secrets.AWS_S3_BUCKET }} --acl public-read
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

 

하고 git push  까지 하면 구현 및 CI/CD 완료