Section2 실습과제 Day 3

오늘은 과연 제시간에 끝낼것인가...

Day3 이 시작되어따.

---

Day 3-4

• 프론트엔드의 배포를 자동화해야 합니다.
• CDN을 통해 프론트엔드를 캐싱하고, HTTPS를 적용해야 합니다.
• 프론트엔드와 WAS를 연결해야 합니다.
• 프론트엔드가 잘 작동하기 위해 WAS를 구현해야 합니다.

 

---

 

마일스톤7

• CodeBuild나 GitHub Action 등을 통해 해당 환경 변수를 주입시켜 보세요.
• REACT_APP_ENDPOINT=<WAS_엔드포인트>
• 현재 정적 웹서버는 HTTP를 통해 제공되고 있으므로, WAS의 엔드포인트 역시 HTTP 프로토콜이어야 합니다. (이후 프론트엔드 HTTPS 적용 시에는 WAS 역시 HTTPS로의 연결이 필요합니다.)

자동화하려고 깃헙액션 워크플로우 야멜파일 돌리자마자 서버가 동작을 안했다

ubuntu-latest로 버전 업해주고 해결

 

name: master

on:
  push:
    branches:
      - master    # master 브랜치에서 push 이벤트가 일어났을 때 실행

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code
        uses: actions/checkout@v2

      - name: Install Dependencies
        run: npm install

      - name: Build
        env:
          CI: ''
        run: |
          REACT_APP_ENDPOINT=${{ secrets.REACT_APP_ENDPOINT }} npm run build

      - name: Deploy
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        run: |
          aws s3 sync \
            --region ap-northeast-2 \
            build s3://pnh-s2-bucket

엔드포인트는 환경변수로 secret에 담아주었당.

 

트러블 슈팅 1. 환경변수 CI 에러

 

그리고 env CI를 넣어주라는 오류가 나와서 선언만 해주었다.

그러니 성공

 

그래서 로컬에서 동작하는 것도 확인!

 

 

마일스톤8

• CloudFront를 이용하여, S3 정적 웹사이트를 캐싱합니다.
• Route 53을 이용해 https://www.yourdomain.click의 트래픽이, CDN(CloudFront)에 연결되도록 만들어야 합니다.

CloudFront를 사용해서 도메인을 https로 접속하도록 만들어주었다.

그리고 www.nahye.click  에는 cloudfront를 연결해주고!

server.nahye.click은 alb를 연결해주었당.

클릭 도메인으로 접속까지 확인

하지만 was 서버랑 연결이 안되었당

 

마일스톤9

• 프론트엔드가 잘 작동하도록, WAS 측 코드를 변경합니다.
• WAS가 CORS를 허용해야 합니다.
• 프론트엔드가 올바른 서버를 바라볼 수 있도록 환경변수를 설정할 수 있어야 합니다.

was 프로젝트에 api/restaurants/index.js를 만들어주었다.

 

그리고 로컬에서 두 서버를 동작시켜야했다.

 

day2할때 그냥 도커로 컨테이너 동작해서 확인했었는데

이번에는 도커로 was 를 동작시키니까 로그가 안찍혔다.

 

로컬에서 was를 띄울때 환경변수는 윈도우는 set으로 설정하면 된다는데 이상하게 잘 안되어서 그냥 시스템 환경 변수로 들어가서 설정해주었당.

day2때도 이렇게 할걸..

암튼 컬요청까지 보내서 was에 접속도 확인했다.

 

cors 설정까지 마치면

성공!

 

트러블 슈팅 2. cloudfront의 캐싱

 

하지만.. S3랑 ecs 에 배포를 하고 환경변수에 rout53에 등록해준 server.nahye.click 도메인을 입력해줘도 

이딴 에러가 계속 났다.

 

저 에러 때문에 다 뒤졌는데

왜저랩..

 

https만 받아주는데 http라 못받아줘~ 이런 에러..

환경변수에 작성한 도메인을 https://server.nahye.click으로 로 바꿔주었는데도 이랬당..

아무래도 정신을 못차리는것같았다.

 

아무리 다시 도메인을 바꿔줘도 읽어내질 못했다

 

결국!

cloud 프론트랑 레코드를 다시 만들어주었다.

 

이제보니 Cloudfront에 캐싱기능이 있다고 한다.

따라서 S3의 변경사항이 바로 반영이 안되는 경우가 많다도 한다!

 

<cloudfront의 캐싱문제로 s3반영이 되지 않을 경우!>

1. cloud front의 캐싱 정택을 nochache로 지정한다.
2. cloud front 콘솔로 Invalidations를 만들어 CLI로 캐시삭제
3. 삭제하고 다시 생성

 

Cloudfront 재생성을 하니

권한 에러가 나서 cloudfront에 오류페이지 403.404를 200 ok로 설정해주었당

 

 

성공~

 

---

이차저차 마일스톤 9까지 끝났다..

중간에 너무 하기 싫어서 안하려고 했는데

팀원들이 으쌰으쌰 도와주셔서 끝냈당ㅎㅎ

나혜야.. 징징대지 말자..

그래도 암튼간에 뿌듯하답니다?!