SPA(Vue, React) 웹 호스팅 & 배포 자동화

이번 포스팅에서는 SPA(Single Page Application)를

AWS S3를 활용하여 정적 웹 호스팅 한 뒤 ,

Git Action으로 Git -> S3로 자동 업로드 시켜주는 CI 기능을 추가해보려합니다.

 

CI작업을 다른 툴로 이용하시는 분들은 Step2까지만 진행해주시면 됩니다.

한 Step 별로 사진을 첨부하였으니 천천히 확인하시면서 진행하시면  됩니다.

 

전체적인 flow는 다음과 같습니다.

1. Vue Cli Package 소스 다운받기
2. S3 Bucket 생성 및 소스 업로드 
3. S3 IAM 계정 만들기
4. Git Action을 이용하여 build 파입 업로드 및 자동 배포

 

STEP 1. 소스 다운받기

대부분의 블로그가 React로 되어있어서 저는 Vue로 해보겠습니다.

만약 npm이 아닌 yarn을 사용하신다면 아래에 있는 명령어를 실행시켜주시면 됩니다.

npm install -g @vue/cli
or
yarn global add @vue/cli

 

아래 명령어를 실행시키면 아래와 같이 구동된 [그림1]과 같은 화면을 볼 수 있습니다.

vue create-app {원하는 파일명 ex:frontend}

npm run serve

 

 

그림1

터미널을 이용해 프로젝트 경로까지 들어옵니다.

(필자는 VS Code에 내장되어있는 터미널을 이용해서 빌드를 진행했습니다.)

cd 명령어를 이용해 프로젝트 상단으로 들어옵니다.

프로젝트의 상단에서 아래 명령어를 실행 시켜줍니다.

npm install
npm run build

 

명령어를 실행시키고 난 뒤에 dist 파일이 생긴 것을 확인 할 수 있습니다.

dist 파일 안에 있는 파일들은 배포를 위한 파일이라고 생각하시면 됩니다.

 

 

여기까지 왔다면 1단계가 끝났습니다.

 

 

STEP 2. S3 Bucket 생성 및 소스 업로드

원하는 Bucket 명으로 생성을 해줍니다.

그 이후 버킷의 액세스 권한을 열어줍니다. 

이 외에 모든 설정들은 기본 값을 기준으로 진행해줍니다.

 

이제 저희가 빌드한 작업 파일들을 S3에 업로드 하겠습니다.

아까 build하실때 만들어진 dist파일 기억하시나요?

dist 파일 안에 들어있는 내용들을 전부 S3로 업로드 해줍니다.

아래와 같은 그림처럼 업로드 된 모습을 확인 하실 수 있습니다.

 

이제 정적 웹 호스팅을 진행해보겠습니다.

 

[속성] 탭으로 가면 맨 하단에 정적 웹 사이트 호스팅이라고 존재합니다. 이곳에서 웹 사이트 호스팅을 설정해줍니다.

인덱스 문서는 index.html 그리고 오류 문서는 index.html으로 설정해줍니다.

 

[권한] 탭으로 가면 그곳에 버킷 정책이 있습니다.

그곳에 있는 버킷 정책을 아래 소스를 복사하여 붙여넣기 합니다.

이 작업은 버킷에 저장된 객체에 대한 액세스 권한을 제공하여 웹 호스팅시 접속이 가능하게끔 해주는 작업입니다.

 

이제 [속성] 탭의 맨 하단으로 내려가면 우리가 정적 호스팅한 웹 url에 접속을 시도하면 우리가 만든 페이지가 배포된것을 확인 할 수 있습니다

ㄴ

페이지가 정상적으로 뜨면 웹 호스팅이 완료된 것입니다.

 

STEP 4. S3 IAM 계정 만들기 & Git Action을 이용하여 배포 진행하기

필자가 배포 자동화 툴로 Jenkins나 Travis CI 등 다양하게 있지만 Git Action을 택한 이유는

별다른 툴을 설치할 필요없이 Github에서 작업이 가능하기 때문입니다.

 

먼저 작업을 하기에 앞서 Github에서 S3에 접근할 수 있는 계정을 만들어 봅시다.

AWS Console에서 IAM을 입력하고 사용자 탭으로 들어갑니다.

 

맨 오른쪽에  있는 사용자 추가를 클릭해줍니다.

사용자 추가에 들어가면 아래 그림과 같이 원하는 사용자 이름을 추가해준 뒤,

AWS 액세스 키를 선택해주고 다음을 누릅니다.

 

 

기존 정책 직접 연결 탭을 클릭한 후에 검색창에 S3를 추가해 줍니다.

AmazonS3FullAccess를 선택한 뒤에 다음을 눌러줍니다.

 

원하는 값을 추가해준뒤 다음을 누릅니다. 

 

5번째 단계에서 사용자가 만들어진 뒤

액세키 ID와 비밀 액세스 키가 나올 것 입니다.

이 값들을 무조건 잘 보관하시길 바랍니다. 

이건 잃어버리면 못찾기 때문에 최대한 값을 보관해주세요

.csv파일로 다운받아 놓고 확인하셔도 되고 메모장에 저장해서 보관하셔도 됩니다.

 

 

먼저 해당 Github의 해당 Repository에 들어갑니다. 

상단의 탭을 보면 Action이라고 되어있는 부분을 클릭해줍니다.

 

그림을 보면 하단에 다양한 기능들을 제공해주는 것을 확인 할 수 있습니다. 

필자는 간단하게 배포를 진행할 예정이기 때문에, 3번째 줄에 있는 set up a workflow yourself 를 클릭해줍니다.

위의 소스들을 지워주고 아래의 소스로 덮어줍니다.

코드의 설명은 하단에서 진행하겠습니다.

name: DEV Front End Deploy

on:
  push:
    branches: [ dev ]

jobs:
  deploy:
    name: Build, Deploy to S3 bucket
    runs-on: [ubuntu-latest]

    strategy:
      matrix:
        node-version: [12.16.x]

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
          
      - name: Npm install
        run: npm install
        working-directory: ./frontend

      - name: Build
        run: npm run build
        working-directory: ./frontend

      - name: Transfer to S3 for serving static
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_DEV_BUCKET_NAME }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_S3_IAM_MANAGER_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_IAM_MANAGER_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_S3_REGION }}
          SOURCE_DIR: './frontend/dist'

 

 

on:
  push:
    branches: [ dev ]

=> dev 브렌치에 push가 들어왔을 때 감지하여 해당 스크립트를 실행한다는 의미입니다.

=> 필자의 경우엔 dev 브렌치로 했지만 각자의 프로젝트 branch 명에 맞게 작업해주시면 됩니다.

 

runs-on: [ubuntu-latest] 

=> ubuntu 최신 버전에서 작업을 진행한다는 의미입니다.

 

run: npm install => run은 뒤에 있는 명령어를 실행시킨다는 의미입니다.
working-directory: ./frontend  => 실행시킬때 프로젝트의 frontend 경로에서 실행시키겠다는 의미입니다.

 

자신의 프로젝트에 맞춰서 스크립트를 알맞게 수정해주시면 됩니다.

 

name: Transfer to S3 for serving static
        uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: ${{ secrets.AWS_S3_DEV_BUCKET_NAME }}   => Bucket 명령어
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_S3_IAM_MANAGER_KEY_ID }}   => AWS IAM Manager KEY ID 
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_IAM_MANAGER_ACCESS_KEY }}
          AWS_REGION: ${{ secrets.AWS_S3_REGION }}
          SOURCE_DIR: './frontend/dist'   => dist파일에 있는 내용을 업로드

 

S3로 전달을 하는 작업이며, 여기서 이해가 안되는 부분이 있을겁니다.

${{secret}}은 무엇일까?

settings -> secrets -> actions탭에서 설정한 값을 가져와서 자동으로 바인딩 시켜줍니다.

왜 이런 작업을 해야될까요? 

이 스크립트는 git repository가 public이라면 외부에서도 확인이 가능합니다.

그렇기 때문에, 앞서 만들었던 IAM을 생성한 계정의 보안 유지가 필요합니다

직접 access key를 바인딩 한다면 다른 사람들도 AWS access 권한을 가질 수 있기 때문에 secret 값으로 셋팅해서 넘겨줘야합니다.

 

잘 모르겠다면 무조건 아래 두 부분은 Secret 처리를 해줍시다.

아까 IAM을 생성할때 만들었던 KEY ID 와 Secret Access Key를 셋팅하여 값을 바인딩 시켜줍시다.

AWS_ACCESS_KEY_ID: ${{ secrets.AWS_S3_IAM_MANAGER_KEY_ID }}  
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_S3_IAM_MANAGER_ACCESS_KEY }}

 

이 값을 등록하는 작업은 쉽기 때문에 생략하겠습니다.

스크립트 파일을 Commit 한 뒤에 dev branch에 push를 해보겠습니다.

위의 사진과 같이 성공적으로 프로세스가 진행된 메세지를 확인했다면, S3에 새 파일이 업로드 된 것을 확인하실 수 있습니다.

 

소스가 반영되는 것인지 의심이 든다면 Vue 소스를 수정한 뒤에 Commit을 한 뒤 complete 메세지를 확인한 뒤,

웹이 호스팅 된 url로 들어간다면 성공적으로 적용된 것을 확인 하실 수 있습니다.

 

여기까지 따라오시느라 고생하셨습니다.

궁금하신 점이 있으시면 댓글 남겨주세요

 

 

Reference : https://velog.io/@1nthek/GitHub-Action%EC%9C%BC%EB%A1%9C-AWS-S3%EC%97%90-%EB%B0%B0%ED%8F%AC-%EC%9E%90%EB%8F%99%ED%99%94

GitHub Action으로 AWS S3에 배포 자동화