[ 배포 ] Netlify로 배포하기

📚 우리를 위한 기록

[ 배포 ] Netlify로 배포하기

Po_tta_tt0 2022. 3. 14. 23:43

끝났다고 끝이 아니다

아 이제 마무리했으니 배포해야지!

하고 배포를 시도하면 그 시간부터 최소 3시간은 배포와 열심히 씨름하게 된다.

내가 생각지도 못한 곳에서 오류가 터져나오고

firebase를 이용할 때는 도메인 승인을 깜빡한다거나

콘솔 창을 끄고 다시 크게 본 화면에서 css가 현란하게 뒤엉켜 있다거나 하는 문제.

하지만 오늘은 3시간까지는 아니었다

배포만 따지자면.. 20분? 🥱

몇 번 배포와 씨름하다 보니 대충 어떤 오류가 생기겠구나.. 아 이걸 깜빡했구나.. 이럴 때는 아마 이렇게 해야하겠지?

하는 내공이 생기는 것 같다.

어쨌든 시작!

✍ 순서

1. netlify에 접속한다

2. 로그인이나 가입을 하고 github를 연결한다

- 연결하지 않아도 되지만 연결하는게 여러가지로 더 편하다

3. 배포하고 싶은 사이트를 추가한다

4. 배포한다

5. 끝!

아주 쉽죠?

하지만 이 간단한 과정 사이에서 얻을 수 있는 에러는 무궁무진하기 때문에 조금 더 뜯어서 살펴봅시다.

( 깃허브와 연동한다는 가정 하에 시작)

🙋‍♀️

2. 로그인이나 가입을 하고 github를 연결한다

내 팀 이름을 정하고( 대충 정해도 됨! )

2.1

Sites로 들어가 => Add new site 클릭

1. Import an existing project

2. Start from a template

3. Deploy manually

2.2

Connect to Git provider

Choose the Git provider where your site’s source code is hosted. When you push to Git, we run your build tool of choice on our servers and deploy the result.

You can unlock options for self-hosted GitHub/GitLab by upgrading to the Business plan.

이 아래 있는 GitHub로 들어가서...

🙋‍♀️

2. 배포하고 싶은 사이트를 추가한다

그냥 본인의 계정을 연결한 다음에 원하는 레파지토리를 클릭하면 됩니다

그 후

Site settings에 들어와서

1. General -> Site details에 접속해서 사이트 이름을 변경할 수 있습니다.

그러나 아무리 npm run deploy를 해도 배포가 안되고 404에러가 뜨는 상황 발생

2. Build & deploy -> Build settings에 들어옵니다.

이렇게 생긴 화면을 볼 수 있을 텐데요

문제는 Build command에 있습니다.

하다못해 npm run build도 아닌 yarn build를 지워주고

그 자리에 CI= npm run build을 넣어줍니다

2020년부터 build 경로 앞에 CI=를 붙여야 한다고 합니다.

짠! 이렇게요

🤷‍♀️

3. 그러나...

또 다른 문제가 있습니다

분명히 firebase key에 문제가 없었는데 배포된 웹에 들어가면 문제가 발생합니다

다시 localhost에서 시도해도 문제가 생기지는 않는데..

그 이유는

너무나도 당연합니다

우리가 .env에 모든 key를 저장해놓고 gitIgnore에 .env 파일을 넣었다는 것은

=> github에 .env 파일이 올라가지 않게 하기 위함

=> 배포될 때는 github를 베이스로 배포된다

=> key를 찾지 못하는 것은 당연하다.

🙋‍♀️

3. 해결하기...

다시 Build & deploy -> Environment

이렇게 .env에 있는 내용들을 가져다가 옮겨주기만 하면 된다.

+ firebase를 사용할 경우

iframe.js:271 Info: The current domain is not authorized for OAuth operations. This will prevent signInWithPopup, signInWithRedirect, linkWithPopup and linkWithRedirect from working. Add your domain (juhyuntwitterclone.netlify.app) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

만약에 이런 오류가 발생했다면?

다시 오류를 읽어보자

Add your domain (juhyuntwitterclone.netlify.app) to the OAuth redirect domains list in the Firebase console -> Auth section -> Sign in method tab.

우리가 이 도메인을 firebase OAuth에 추가하지 않아서 생기는 문제이다

아마 오류도 firebase로 로그인을 구현한 곳에서 발생했을 것!

firebase console로 들어가서 -> Auth section -> Sign in method tab에서