Next.js 프로젝트 Firebase에 hosting 배포하기.

Next.js 프로젝트 Firebase에 배포하기.

Why i Wrote This Posts

지난번 Apps script를 사용해서 Firebase 에 디비 연결하기 포스트에 이어서 

이번에 Frontend로 사용한 Next.js를 Firebase에 배포하는 작업에 대해서 적을까 합니다. 

이 방법은 정말 배포에 대해서만 말하고 있어서, 내용이 짧을수도 있을것 같습니다.

이 내용에 대해서 적는 이유는 저처럼 삽질을 하는사람이 적었으면 하는 바람에서 적습니다.

How to work about next.js to deploy to firebase

이 글을 적기 전에 Next.js를 Firebase에 배포하기를 구글에 찾아보면 Firebase 에 있는 Function을 통해서 Next에 연결할수 있는 API를 만들고,

hosting에서는 rewrite로 hosting으로 요청이 왔을 경우에 API로 redirect하는 형태로 배포가 진행 됩니다.

Step

• Create Firebase Function
• Create Firebase Hosting use dummy `public` folder
• When attached hosting API Redirect to Function API Endpoint

이유는 기존에 react 의 다르게 `next build` 를 통해서 빌드시에 html 파일을 만들지 때문에 static file만 지원하는 firebase hosting에서는 파일을 읽을수 없다는 이슈가 나옵니다.

그래서 유명한 github 프로젝트에서도 public/ 폴더를 강제로 만들어주고, 

거기안에 의미 없는 html 파일을 하나 넣어줘서 해결하였습니다.

이렇게 할 경우 API와 static에 대한 처리를 둘다 할수 있다는 장점이 있지만, 저의 경우에는 배포도 느려지고, 

설정도 복잡해져서 제가 사용할려고 설치한 deps 들을 잘 찾지 못하는 이슈가 있더라구요. 

밑에는 위에 방법을 사용시에 발생한 명령어에 대한 로그 입니다.

How to way i used for deploy next.js to firebase.

그래서 아 react로 다시 변경해야하는건가? 
하고 보다가 next.js에 serverless 라는 subject로 글이 있었고, 이글을 읽어보던 중에 'export' 를 사용하면 되지 않을까 라고 생각했습니다. 

Step

• Run next export command
• Run Firebase deploy

next export 명령어를 통해 결과로 만들어진 out 폴더 [ default 폴더 입니다] 를 확인 한 결과, html과 js 파일들이,  이걸 firebase에 deploy 후에 해당 URL로 접속시에 

생긴것을 확인하고 firebase 에 hosting 결과 잘 배포가 되더라구요.

밑에는 위에 방법을 사용시에 발생한 명령어에 대한 로그 입니다.

저는 이 방법을 통해서, next.js 앱을 firebase에 hosting 하는 방법을 해결했습니다. 

아래 방법으로 했을 경우 빠르게 배포도 가능해서 저는 다른 이슈가 없는 한 사용할 것 같습니다.

혹시라도 이슈가 있거나 궁금한점 있으시면 적어주세요. 저도 한번 찾아보도록 하겠습니다.

----------- UPDATE 2019/09/07 --------

테스트로 확인 결과, 처음 페이지 내에서의 routing 은 잘 동작하지만,  내부 routing에서 redirect 시에 routing을 제대로 인식 못하는 문제 발생. 

확인 결과 지금 next 에서 build시에 static 한 페이지를 지원하지 않는 이슈 발생. 

그래서 https://github.com/firebase/functions-samples/tree/master/nextjs-with-firebase-hosting 이 내용을 따라서 작업을 했습니다. 이 github또한 이슈가 있어서 그 이슈를 어떻게 해결했는지에 대해 적을까 합니다.

1. package.json > build-next 명령어가 npm build 되지 않는 문제

이 경우는 간단한데 npm build를 통해서 build 명령어가 실행되지 않으므로 npm run build로 수정하면 됩니다.

2. functions 배포시에 next안에서 사용하는 package 찾지 못하는 이슈.

이 이슈의 경우는 functions안에 있는 package.json 내에 내가 next에서 사용하는 lib에 대해서 선언해주고 npm install 후에 배포하면 해결이 됩니다. 아마 npm run build시에 dependency에 대해서는 따로 패키징을 해주지 않아서 발생하는 이슈 인것 같습니다.

3. distDir을 '../functions/next' 로 할경우 npm run dev가 동작하지 않는 이슈.

distDir을 functions안에 있는 곳으로 바라볼 경우, 그 안에 있는 node_modules 패키지를 먼저 바라 보게 되면서, functions에 설치하지 않은 파일에 대해서도 not found 에러가 발생하는데, 아마 package를 싱크를 맞추셨다면 이슈가 발생하지 않겠지만, 저의 경우에는 distDir 설정을 default로 변경 (.next) 하고 npm run build 명령어에서 .next 폴더를 functions/next 로 카피하는 방식으로 해결 했습니다.

3. /static URL에 있는 리소스를 찾지 못하는 이슈.

개발모드에선 잘되던 /static 명령어가 functions안에서는 동작을 하지 않는 이슈가 발생하는데 이유는 functions쪽에 /static을 정의해놓지 않았기 때문입니다. 이 경우에는 /static url을 만들어서 파일을 제공할수도 있지만, 그렇게 되면 functions이 두개가 되면서 firebase.json쪽에 routing 설정도 바꿔줘야하는 이슈가 발생해서, 저의 경우에는 next-images  를 사용해서 모든 이미지를 사용할때 import 하는 방식으로 해결했습니다. 이 경우에 next가 자체적으로 image에 대해서도 chunk 단위로 관리 되어서 리소스가 좀 더 빨리 로드 되는 이점이 있습니다.

쉽게 해결 된다고 적었는데, 이런 이슈가 발생할지 몰랐고, 다행히도 이슈를 찾고, 해결?? 우회방법? 정도는 적을수 있어서 다행이라고 생각합니다.

혹시 또 이해 안되는 내용이나 이슈에 대해서 적어주시기 바랍니다.