배포 자동화 구축
AWS amplify의 깃헙에 대한 권한 허용.
Authorized AWS amplify(ap-northest-2) 클릭.
GitHub 권한 보기 클릭
계정 선택
'select repository'를 클릭하여 배포하고자 하는 레포지토리를 선택하면 된다.
빌드할 브랜치를 선택하면 된다. 브랜치는 변경할 수 있다.(아래 참고)
Playground 레포지토리 내에 여러 프로젝트가 존재하기 때문에 모노 리포지토리도 설정해주었다.(생략가능)
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 환경 변수 추가 방법
브랜치 연결 클릭
develop 브랜치 자동 빌드를 비활성화해준다.
암쏘해피