기존에는 팀원들의 코드가 고쳐져서 dev로 merge가 되면 다시 pull 받고 build해서 내가 다시 배포하는 방식을 사용했었다.
그냥 파일만 새로 올리면되니까 그냥 진행했던 배포가 이제 TypeScript로 refactoring이 들어가면서 어려워질 것 같아 배포자동화를 시도해봤다.
1. 우선 Netlify에 들어가서 Deploy탭으로 들어간다.
들어가면 지금 민트색은 우리가 배포한 사이트고 현재는 배포자동화가 완료된 화면이라서 Deploys from 옆에 우리 깃 레포지토리가 뜨는데 저것도 Deploy settings 에서 연결시켜주었다.
우리가 쓰는 프로젝트는 dev가 default 브랜치고, 이곳에 merge 하면 배포되게 하고있어서 head가 dev를 가리키고있다.
2. build는 어떻게 할거야?!
우리 프로젝트의 구조는 현재 client폴더에서 프론트단이 작업하고 server폴더에서 백단이 작업진행중이기때문에 Base directory는 client로 설정해주었다.
다음으로 우리가 build할 명령어는 package.json에 scripts에 이렇게 설정해두었고, yarn이 아니라 npm을 사용중이기때문에 npm run build를 써주었다.
다음으로 build된 폴더의 위치를 Publish directory로 써주면된다.
우리가 기존에 npm run build를 했을때, build폴더아래로 파일들이 생겼기에 Publish directory는 client/build/ 로 설정해주고 Deploy start 버튼을 눌러주었다.
그러면 이렇게 성공!!!
사실 한번에 성공한 건 아니기에...😂
만약 build에 실패하면
이런식으로 failed메세지가 뜬다. 이때는 밑에 내려보면
커맨드라인에
이런식으로 error message가 뜨니까 찾아보면 된다. 우리의 경우에는 Base directory 와 Publish directory 가 잘못되어있었다. 보통 public폴더라길래 public으로 그냥 진행했다가 실패가 났고, 우리 디렉토리구조를 살펴보니 전혀 다른 구조라 저렇게 고쳐줬더니 되었다. 고쳐주고 나서 다시 deploy할때는
retry버튼을 누르고 Clear cache and retry with latest branch commit을 눌러주면 다시 deploy가 진행된다!
'프로젝트 > 메인프로젝트(유통)' 카테고리의 다른 글
| TypeScript img파일 모듈 또는 해당 형식 선언을 찾을 수 없습니다. (0) | 2023.04.12 |
|---|---|
| 성능 최적화(Lighthouse 이용) (0) | 2022.12.07 |
| 중첩된 링크로 나는 에러로그 (0) | 2022.11.29 |
| `value` prop on `input` should not be null (0) | 2022.11.25 |
| useRef()를 사용한 onClick이벤트(Object에서 map 사용하기) (0) | 2022.11.24 |