Full Cloud DevOps 구성(AWS 활용)

목적

• 2015년 부터 시작된 DevOps의 개념, 그리고 이를 실현하기 위한 CI/CD 는 이제 SW 업무를 수행함에 있어 기본이 되었고, 2006년부터 시작된 AWS를 필두로 다수의 클라우드 서비스는 Public Cloud 환경을 통해 개발에 필요한 각종 자원들을 공개 하고 있습니다.
• 이에 본 글에서는 1인 취미 개발자 입장에서 Cloud 환경을 적극 활용하여 모든 자원을 클라우드를 활용하여 개발환경을 셋팅하는 Full Cloud DevOps 환경 구성을 소개 하고자 합니다.

자원스택

• Cloud9 : 아마존에서 제공하는 Cloud 통합개발환경(IDE)
• GitHub : 가장 대표적인 코드 저장소
• Amplify : 아마존에서 제공하는 풀스텍 서비스(내부적으로, GraphQL, S3 등 사용)

사용예시

https://docs.aws.amazon.com/ko_kr/amplify/latest/userguide/team-workflows-with-amplify-cli-backend-environments.html#standard

환경세팅

💡언급되지 않은 모든 셋팅값은 default 입니다.

IDE 구성

• 아마존에서 클라우드 통합개발환경(IDE) Cloud9을 신규 생성
• Instance type에서 2GB 이상의 RAM 환경을 선택
  

  

  💡 본 개발환경은 기본 10GB 이며, 향후 필수 패키지 설치 시 용량부족이 발생 합니다. 따라서, Console - EC2 -Elastic Block Store - 볼륨 - 작업 -볼륨 수정 을 통해 크기 20GB 이상으로 확대를 권장 합니다.(인스턴스 재시작 후 변경사항 적용됨)

기본환경 설정

1. Amplify CLI 설치

   npm install -g @aws-amplify/cli

2. 프론트엔트 패키지 설치 및 프로젝트 생성

   • Vue.js 설치 하였으나, Amplify 에서 다양한 패키지 지원

     npm install -g @vue/cli
     vue create full_cloud # 원하는 vue 버젼 선택
     cd full_cloud

     💡 이후 모든 절차는 프로젝트 폴더 안에서 시행 됩니다.

3. Amplify 를 console과 연결

   amplify configure

4. Amplify 초기화(적용)

   • 본 예시에서는 prod 환경부터 생성

     amplify init
     ...
     ? Enter a name for the environment: prod
     ...

   • amplify console에 앱이 생성 되며, prod 환경이 생성 됩니다.

     

     

5. 추가 환경 생성

   • 현재의 환경을 복재하여 test, dev 환경을 만듭니다.

     amplify env add
     ? Do you want to use an existing environment? (Y/n): n
     ? Enter a name for the environment: test
     ...
     
     amplify env add
     ? Do you want to use an existing environment? (Y/n): n
     ? Enter a name for the environment: dev
     ...

   • test, dev backend 환경이 생성 되었습니다.

     

git 구성

1. github.com 에서 저장소 생성

   

2. 개발환경 https로 연결(ssh는 별도 설정 필요)

   • git 은 프론트앤드 패키지에 포함되어 있음으로 별도 설치 불요

     git remote add origin [주소]

3. master, test, dev 환경 분기 및 저장소 push

      git add .
      git commit -m "amplify init"
      git push
   
      git checkout -b test
      git push
   
      git checkout -b dev
      git push

   • 저장소에 branch 확인이 가능 합니다.
     

     

Amplify 셋팅

1. git 브랜치와 Amplify 연결
   • Amplify console 에서 저장소 선택
     

     

   • 저장소 명과 브랜치 선택
     

     

   • 백엔드 연결
     

     

   • Frontend-Backend 연결 확인
     

     

     💡 각 Amplify 환경은 독립적으로 Backend 데이터를 공유하지 않음

활용방안

1. amplify 환경은 dev 환경에서만 사용

    amplify env checkout dev # 이동
    amplify status # 확인

2. git 또한 dev 환경에서만 개발

    git checkout env # 이동
    git branch # 확인

3. 변경사항 반영
   • amplify 요소 추가 및 backend에 반영

     amplify api add
     amplify push

     

   • git 저장소에 반영

     git add .
     git commit -m "add api"
     git push

   • Frontend - Backend 자동 배포 진행
     

     

     
     

     

4. test 환경으로 병합
   • github을 통해 Pull requests 시행
     

     

     
     

     

   • Frontend-Backend 자동배포 진행
     

     

사용방법

1. 일반적인 개발 상황
   • dev 환경에서 개발 수행 → git push → test로 pull request → dummy data를 통한 확인 → master로 pull request → 배포
2. dev backend 환경의 문제 발생
   • test 환경을 dev 환경으로 pull 한다.

     amplify pull --appId [xxxxxxxxxxxxxx] --envName test

발전방향

1. master, test 브랜치로의 병합을 pull request 만으로 제한
2. Amplify auto detection 기능으로 dev의 파생 브랜치 자동화
   끝.

---

ps. Notion 에서 작성 후 붙여넣었더니 정상적으로 표시가 되지 않네요... 개선방법 찾아보겠습니다.