Next.js 를 Netlify 에 호스팅하기

alsanrlf·2021년 6월 12일
0

Next.js 로 사이트를 만들었는데 호스팅을 해야겠다 마음 먹었다.
gh-pages 로 하는데 자꾸 에러가 나서 포기하고 Netlify가 쉽다길래 이걸로 갈아탔다.

Netlify가 좋은게 깃헙 레포에 연결해두면 내가 코드를 푸쉬만 하면 빌드를 해준다(잘 연결하면)

저기 New site from Git 을 클릭하고

github 클릭하고 로그인 해주고

레포지터리 정해주고

뭐 무슨 브랜치 쓰는지 적고, build command 칸이 있는데 package.json 에서

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "netlify-deploy": "next build && next export"
  },

여기서 build 와 export 를 하나로 묶는데 이넘을 적어준다. 난 npm 을 써서 "npm run netlify-deploy" 를 입력했다. 나중에 설정가서 바꿀수 있다.
build 하고 export 하면 루트디렉토리에 out 이라는 폴더가 생기는데 이름이 다르면 그거 써주면 된다.

그러면 이렇게 카드가 생긴다. 밑에 기록들 누르면 log 도 볼수있다.

git push 를 하면 자동으로 빌드를 하는데 push 없이 수동으로 빌드도 가능하다.

:07:39 AM: $ npm run netlify-deploy
5:07:39 AM: > tenigo@0.1.0 netlify-deploy /opt/build/repo
5:07:39 AM: > next build && next export
5:07:40 AM: info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
5:07:40 AM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
5:07:40 AM: info  - Checking validity of types...
5:07:40 AM: info  - Creating an optimized production build...
5:07:54 AM: (node:1635) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (606kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (178kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (614kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (606kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (178kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (614kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'mini-css-extract-plugin /opt/build/repo/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!/opt/build/repo/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[2]!/opt/build/repo/src/public/css/public_main.module.css|0|Compilation/modules|/opt/build/repo/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!/opt/build/repo/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[2]!/opt/build/repo/src/public/css/public_main.module.css': No serializer registered for Warning
5:08:26 AM: <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
5:08:26 AM: <w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'mini-css-extract-plugin /opt/build/repo/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!/opt/build/repo/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[2]!/opt/build/repo/src/public/css/MemberDetailModal.module.css|0|Compilation/modules|/opt/build/repo/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!/opt/build/repo/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[2]!/opt/build/repo/src/public/css/MemberDetailModal.module.css': No serializer registered for Warning
5:08:26 AM: <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
5:08:33 AM: (node:1635) [DEP_WEBPACK_CHUNK_HAS_ENTRY_MODULE] DeprecationWarning: Chunk.hasEntryModule: Use new ChunkGraph API
5:08:37 AM: <w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/opt/build/repo/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[0]!/opt/build/repo/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!/opt/build/repo/src/public/css/public_main.module.css': No serializer registered for Warning
5:08:37 AM: <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
5:08:37 AM: <w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/opt/build/repo/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[0]!/opt/build/repo/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[2].use[1]!/opt/build/repo/src/public/css/MemberDetailModal.module.css': No serializer registered for Warning
5:08:37 AM: <w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> Array { 1 items } -> webpack/lib/ModuleWarning -> Warning
5:08:38 AM: warn  - Compiled with warnings
5:08:38 AM: ./src/public/css/MemberDetailModal.module.css
5:08:38 AM: Warning
5:08:38 AM: (5:34) postcss-preset-env: start value has mixed support, consider using flex-start instead
5:08:38 AM: ./src/public/css/public_main.module.css
5:08:38 AM: Warning
5:08:38 AM: (1:24) postcss-preset-env: end value has mixed support, consider using flex-end instead
5:08:38 AM: ./node_modules/next/dist/next-server/server/load-components.js
5:08:38 AM: Critical dependency: the request of a dependency is an expression
5:08:38 AM: ./node_modules/next/dist/next-server/server/load-components.js
5:08:38 AM: Critical dependency: the request of a dependency is an expression
5:08:38 AM: ./node_modules/next/dist/next-server/server/load-components.js
5:08:38 AM: Critical dependency: the request of a dependency is an expression
5:08:38 AM: ./node_modules/next/dist/next-server/server/require.js
5:08:38 AM: Critical dependency: the request of a dependency is an expression
5:08:38 AM: ./node_modules/next/dist/next-server/server/require.js
5:08:38 AM: Critical dependency: the request of a dependency is an expression
5:08:38 AM: ./node_modules/next/dist/next-server/server/require.js
5:08:38 AM: Critical dependency: the request of a dependency is an expression
5:08:38 AM: info  - Collecting page data...
5:08:40 AM: > Build error occurred
5:08:40 AM: [Error: Your API key is invalid, please check you have copied it correctly.] {
5:08:40 AM:   type: 't',
5:08:40 AM:   code: 'auth/invalid-api-key',
5:08:40 AM:   a: null
5:08:40 AM: }
5:08:40 AM: npm ERR! code ELIFECYCLE
5:08:40 AM: npm ERR! errno 1
5:08:40 AM: npm ERR! tenigo@0.1.0 netlify-deploy: `next build && next export`
5:08:40 AM: npm ERR! Exit status 1
5:08:40 AM: npm ERR!
5:08:40 AM: npm ERR! Failed at the tenigo@0.1.0 netlify-deploy script.
5:08:40 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
5:08:40 AM: npm ERR! A complete log of this run can be found in:
5:08:40 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-06-12T20_08_40_980Z-debug.log
5:08:41 AM: ​
5:08:41 AM: ────────────────────────────────────────────────────────────────
5:08:41 AM:   "build.command" failed                                        
5:08:41 AM: ────────────────────────────────────────────────────────────────
5:08:41 AM: ​
5:08:41 AM:   Error message
5:08:41 AM:   Command failed with exit code 1: npm run netlify-deploy
5:08:41 AM: ​
5:08:41 AM:   Error location
5:08:41 AM:   In Build command from Netlify app:
5:08:41 AM:   npm run netlify-deploy
5:08:41 AM: ​
5:08:41 AM:   Resolved config
5:08:41 AM:   build:
5:08:41 AM:     command: npm run netlify-deploy
5:08:41 AM:     commandOrigin: ui
5:08:41 AM:     publish: /opt/build/repo/out
5:08:41 AM:   functions:
5:08:41 AM:     '*': {}
5:08:41 AM:   functionsDirectory: /opt/build/repo/functions
5:08:41 AM:   plugins:
5:08:41 AM:     - inputs: {}
5:08:41 AM:       origin: ui
5:08:41 AM:       package: '@netlify/plugin-nextjs'
5:08:41 AM: Caching artifacts
5:08:41 AM: Started saving node modules
5:08:41 AM: Finished saving node modules
5:08:41 AM: Started saving build plugins
5:08:41 AM: Finished saving build plugins
5:08:41 AM: Started saving yarn cache
5:08:41 AM: Finished saving yarn cache
5:08:41 AM: Started saving pip cache
5:08:41 AM: Finished saving pip cache
5:08:41 AM: Started saving emacs cask dependencies
5:08:41 AM: Finished saving emacs cask dependencies
5:08:41 AM: Started saving maven dependencies
5:08:41 AM: Finished saving maven dependencies
5:08:41 AM: Started saving boot dependencies
5:08:41 AM: Finished saving boot dependencies
5:08:41 AM: Started saving rust rustup cache
5:08:41 AM: Finished saving rust rustup cache
5:08:41 AM: Started saving go dependencies
5:08:41 AM: Finished saving go dependencies
5:08:44 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
5:08:44 AM: Creating deploy upload records
5:08:44 AM: Failing build: Failed to build site
5:08:44 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
5:08:44 AM: Finished processing build request in 1m54.995721202s

처음에 에러가 났을때는 구글에 "build.command" failed 를 검색해보니 무슨 설정할때 Build command 에 CI= npm run build 를 붙이라는니 CI=true 라느니 CI=false 라느니 CI='' 라느니 해가지고 뻘짓을 했다.

그 다음에는 webpack 오류인줄 알고 또 한참 해맸다.

아무튼 Build command 는

여기에서 도메인 세팅을 들어가서 왼쪽에 Build&Deploy 를 클릭해서 Edit setting 에서 수정할 수 있다. 그런데 난 여기서 해결이 안됬다.

Error: Your API key is invalid, please check you have copied it correctly.] {
5:08:40 AM:   type: 't',
5:08:40 AM:   code: 'auth/invalid-api-key',
5:08:40 AM:   a: null
5:08:40 AM: }

머리를 쥐어짜고 있으니까 이부분이 눈에 들어왔다.
firebase 의 apikey를 env.local 에 저장하고 gitignore 해놓고 사용하고 있는데 netlify는 깃헙 레포를 클론해서 호스팅 되어 apikey 가 없는거구나. 머리가 띵 했다.
그래서 검색해보니까 아까 Build command 수정했던데 밑에 Enviroment 칸이 있었다. 거기에 env.local 에 있는 변수들을 다 입력해 줬다. 근데 이런식으로 하는게 맞나 싶었지만 일단 했다. 다른 에러가 또 발생하긴 했지만 일단 이거는 넘어갔다.

그전에 또 netlify.toml 파일을 만들어서

[build]
  command = "npm run build"
  publish = "out"

[[plugins]]
  package = "@netlify/plugin-nextjs"

  [context.production.environment]
NEXT_SERVERLESS = "true"
NODE_ENV = "production"

를 작성해서 푸시했다. 근데 안됬다. 지금 작성하면서 봤는데 파일 이름에 오타가 나있다.
암튼 에러가 여전히 있지만 다음 단계로 넘어갔다.

Error message
5:17:09 AM:   A Netlify Function is using "firebase-functions" but that dependency has not been installed yet.
5:17:09 AM: ​

얘는 한눈에 들어왔다.
yarn add firebase-finctions
해줬더니 이번에는

Error message
5:20:49 AM:   A Netlify Function is using "firebase-admin" but that dependency has not been installed yet.

이런건 한번에 알려주면 안되나 꿍시렁 대면서 설치해줬다.

 Netlify Build Complete                                        
5:24:33 AM: ────────────────────────────────────────────────────────────────
5:24:33 AM: ​
5:24:33 AM: (Netlify Build completed in 1m 26.6s)
5:24:33 AM: Caching artifacts
5:24:33 AM: Started saving node modules
5:24:33 AM: Finished saving node modules
5:24:33 AM: Started saving build plugins
5:24:33 AM: Finished saving build plugins
5:24:33 AM: Started saving yarn cache
5:24:33 AM: Finished saving yarn cache
5:24:33 AM: Started saving pip cache
5:24:33 AM: Finished saving pip cache
5:24:33 AM: Started saving emacs cask dependencies
5:24:33 AM: Finished saving emacs cask dependencies
5:24:33 AM: Started saving maven dependencies
5:24:33 AM: Finished saving maven dependencies
5:24:33 AM: Started saving boot dependencies
5:24:33 AM: Post processing - header rules
5:24:33 AM: Finished saving boot dependencies
5:24:33 AM: Started saving rust rustup cache
5:24:33 AM: Finished saving rust rustup cache
5:24:33 AM: Started saving go dependencies
5:24:33 AM: Finished saving go dependencies
5:24:33 AM: Post processing - redirect rules
5:24:33 AM: Post processing done
5:24:33 AM: Site is live ✨
5:24:36 AM: Build script success
5:25:07 AM: Finished processing build request in 2m54.957707574s

그리고 deploy 성공
몇가지 안적었지만 시간은 2시간쯤 걸렸다

정말 쉬운게 없다.

profile
개발자가 되고싶다...

0개의 댓글