My-world 개발 보고서 : AWS Amplify 배포

강원지·2023년 5월 18일
0

AWS Amplify 배포 과정

배포 자동화 구축

1. AWS Amplify > 시작하기 > 웹 앱 호스팅 시작하기

2. 코드 저장소 선택

2. 권한 부여

AWS amplify의 깃헙에 대한 권한 허용.
Authorized AWS amplify(ap-northest-2) 클릭.

3. 레포지토리 선택

  1. GitHub 권한 보기 클릭

  2. 계정 선택

  3. 'select repository'를 클릭하여 배포하고자 하는 레포지토리를 선택하면 된다.

4. 브랜치와 모노레포 선택

빌드할 브랜치를 선택하면 된다. 브랜치는 변경할 수 있다.(아래 참고)

Playground 레포지토리 내에 여러 프로젝트가 존재하기 때문에 모노 리포지토리도 설정해주었다.(생략가능)

5. 빌드 설정

yml파일이 자동으로 작성되어 있어 그대로 진행하였다. (문제 발생)

참고

에러

빌드 실패

문제상황

빌드 실패

빌드 과정에서 npm ci 명령어를 수행하던 중에 문제가 발생했다.

npm ci

npm ci 명령어 사용 시, 모든 개발 환경에서 동일한 버전의 팩키지임이 보장되고 package-lock.json을 수정하지 않음.

해결

빌드 설정을 다음과 같이 수정하였다.

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm install
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*
    appRoot: my-world

모듈을 찾을 수 없음

문제상황

Cannot find module 'sass'

해결

폴더 내 package.json에 sass가 없어서 추가해주었다.

npm install sass

날씨 조회 불가

문제상황

api key 조회 불가.
api key를 로컬의 env 파일에 저장했기 때문이다.

{"cod":401, "message": "Invalid API key. Please see https://openweathermap.org/faq#error401 for more info."}

해결

AWS amplify의 앱 설정:환경 변수에 기존 .env에 저장했던 것처럼 변수를 추가하면 된다. 변경 사항은 브랜치에 push나 pr이 일어나야 적용된다.

[React] AWS Amplify 환경 변수 추가 방법

브랜치 변경

1. 앱 설정: 일반>브랜치

브랜치 연결 클릭

2. 원하는 브랜치 선택

3. 기존 브랜치 비활성화

develop 브랜치 자동 빌드를 비활성화해준다.

배포완😊

암쏘해피

https://main.d27llf1aacd91m.amplifyapp.com/

0개의 댓글