8_4. 배포 및 비정상 동작 확인
nuxt.js
2023.03.04.
- vue 프로젝트 저장소
- github nuxt-shopping 배포 저장소 url
- 해봐야될거 + 문제점
- 나중에 아임포트 결재모듈도 붙여보기
- 문제점 1: 새로고침하면 장바구니에 담아놓은 목록들이 다 사라짐
- 해결책
- 브라우저 레벨에서 해결: 로컬스토리지, 세션스토리지, 쿠키
- 카트에 담았을 때, 해당 상품 데이터를 서버로 전송
- 카트 목록 페이지 들어갈 때마다 계정별로 해당 목록을 불러오는 방법
- 해결책
- 문제점 2: 이미 카트에 담은 목록 또 담을 수 있음
- json-server /carts POST API 알아서 같은 값이면 500 에러 뱉어줌
8_4. 배포 및 비정상 동작 확인
8_4_1. 히로쿠에서 디플로이(배포) 실행
위와 같은 상황이면 디플로이를 위한 준비는 다 마친 것이다.
이 상황에서 Deploy를 클릭하면 에러가 발생할 것이다.
추가적으로 또 설정해줄 것이 있기 때문이다.
그래도 Deploy를 클릭하자.
Deploy Branch를 눌러주면 된다.
8_4_2. 에러: Two different lockfiles found: package-lock.json and yarn.lock
8_4_3. 에러 해결 후 재배포
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment # 런타임 환경변수
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production # NODE_ENV 가 production 레벨로 설정되어 빌드되는 것을 알 수 있다.
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): unspecified
engines.npm (package.json): unspecified (use default)
Resolving node version 18.x...
Downloading and installing node 18.14.2...
Using default npm version: 9.5.0
-----> Installing dependencies
Installing node modules
npm notice
npm notice New minor version of npm available! 9.5.0 -> 9.6.0
npm notice Changelog: <https://github.com/npm/cli/releases/tag/v9.6.0>
npm notice Run `npm install -g npm@9.6.0` to update!
npm notice
npm ERR! code EUSAGE
npm ERR!
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR!
npm ERR! Missing: @nuxt/types@2.16.0 from lock file
npm ERR! Missing: @types/autoprefixer@9.7.2 from lock file
npm ERR! Missing: @types/babel__core@7.20.0 from lock file
npm ERR! Missing: @types/compression@1.7.2 from lock file
npm ERR! Missing: @types/connect@3.4.35 from lock file
npm ERR! Missing: @types/etag@1.8.1 from lock file
npm ERR! Missing: @types/file-loader@5.0.1 from lock file
npm ERR! Missing: @types/html-minifier@4.0.2 from lock file
npm ERR! Missing: @types/less@3.0.3 from lock file
npm ERR! Missing: @types/node@18.11.18 from lock file
npm ERR! Missing: @types/optimize-css-assets-webpack-plugin@5.0.5 from lock file
npm ERR! Missing: @types/pug@2.0.6 from lock file
npm ERR! Missing: @types/serve-static@1.15.0 from lock file
npm ERR! Missing: @types/terser-webpack-plugin@4.2.1 from lock file
npm ERR! Missing: @types/webpack-bundle-analyzer@4.6.0 from lock file
npm ERR! Missing: @types/webpack-dev-middleware@5.3.0 from lock file
npm ERR! Missing: @types/webpack-hot-middleware@2.25.6 from lock file
npm ERR! Missing: @types/browserslist@4.15.0 from lock file
npm ERR! Missing: postcss@7.0.39 from lock file
npm ERR! Missing: @types/babel__generator@7.6.4 from lock file
npm ERR! Missing: @types/babel__template@7.4.1 from lock file
npm ERR! Missing: @types/babel__traverse@7.18.3 from lock file
npm ERR! Missing: @types/express@4.17.17 from lock file
npm ERR! Missing: @types/body-parser@1.19.2 from lock file
npm ERR! Missing: @types/express-serve-static-core@4.17.33 from lock file
npm ERR! Missing: @types/qs@6.9.7 from lock file
npm ERR! Missing: @types/range-parser@1.2.4 from lock file
npm ERR! Missing: @types/clean-css@4.2.6 from lock file
npm ERR! Missing: @types/relateurl@0.2.29 from lock file
npm ERR! Missing: @types/mime@3.0.1 from lock file
npm ERR! Missing: tapable@2.2.1 from lock file
npm ERR! Missing: webpack@5.75.0 from lock file
npm ERR! Missing: tapable@2.2.1 from lock file
npm ERR! Missing: webpack@5.75.0 from lock file
npm ERR! Missing: picocolors@0.2.1 from lock file
npm ERR! Missing: @types/eslint-scope@3.7.4 from lock file
npm ERR! Missing: @types/estree@0.0.51 from lock file
npm ERR! Missing: @webassemblyjs/ast@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-edit@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-parser@1.11.1 from lock file
npm ERR! Missing: acorn-import-assertions@1.8.0 from lock file
npm ERR! Missing: enhanced-resolve@5.12.0 from lock file
npm ERR! Missing: es-module-lexer@0.9.3 from lock file
npm ERR! Missing: terser-webpack-plugin@5.3.6 from lock file
npm ERR! Missing: webpack-sources@3.2.3 from lock file
npm ERR! Missing: @webassemblyjs/helper-numbers@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-bytecode@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/floating-point-hex-parser@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-api-error@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-buffer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-section@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-gen@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-opt@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wast-printer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/ieee754@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/leb128@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/utf8@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-api-error@1.11.1 from lock file
npm ERR! Missing: terser@5.16.5 from lock file
npm ERR! Missing: @types/estree@0.0.51 from lock file
npm ERR! Missing: @webassemblyjs/ast@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-edit@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-parser@1.11.1 from lock file
npm ERR! Missing: enhanced-resolve@5.12.0 from lock file
npm ERR! Missing: terser-webpack-plugin@5.3.6 from lock file
npm ERR! Missing: webpack-sources@3.2.3 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-bytecode@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-buffer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-section@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-gen@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-opt@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wast-printer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/ieee754@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/leb128@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/utf8@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-api-error@1.11.1 from lock file
npm ERR! Missing: terser@5.16.5 from lock file
npm ERR!
npm ERR! Clean install a project
npm ERR!
npm ERR! Usage:
npm ERR! npm ci
npm ERR!
npm ERR! Options:
npm ERR! [-S|--save|--no-save|--save-prod|--save-dev|--save-optional|--save-peer|--save-bundle]
npm ERR! [-E|--save-exact] [-g|--global]
npm ERR! [--install-strategy <hoisted|nested|shallow|linked>] [--legacy-bundling]
npm ERR! [--global-style] [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--no-package-lock] [--foreground-scripts]
npm ERR! [--ignore-scripts] [--no-audit] [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR!
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR!
npm ERR! Run "npm help ci" for more info
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.J4vP6/_logs/2023-03-04T07_42_30_580Z-debug-0.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
Some possible problems:
- Node version not specified in package.json
https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed8_4_4. 에러: Build failed - Node version not specified in package.json (아마 노드 버전 때문인듯? 16버전으로 낮추자)
8_4_5. 에러 수정 후 재배포
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 16.19.0
engines.npm (package.json): 8.19.3
Resolving node version 16.19.0...
Downloading and installing node 16.19.0...
npm 8.19.3 already installed with node
-----> Installing dependencies
Installing node modules
npm ERR! code EUSAGE
npm ERR!
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR!
npm ERR! Missing: @nuxt/types@2.16.0 from lock file
npm ERR! Missing: @types/autoprefixer@9.7.2 from lock file
npm ERR! Missing: @types/babel__core@7.20.0 from lock file
npm ERR! Missing: @types/compression@1.7.2 from lock file
npm ERR! Missing: @types/connect@3.4.35 from lock file
npm ERR! Missing: @types/etag@1.8.1 from lock file
npm ERR! Missing: @types/file-loader@5.0.1 from lock file
npm ERR! Missing: @types/html-minifier@4.0.2 from lock file
npm ERR! Missing: @types/less@3.0.3 from lock file
npm ERR! Missing: @types/node@18.11.18 from lock file
npm ERR! Missing: @types/optimize-css-assets-webpack-plugin@5.0.5 from lock file
npm ERR! Missing: @types/pug@2.0.6 from lock file
npm ERR! Missing: @types/serve-static@1.15.0 from lock file
npm ERR! Missing: @types/terser-webpack-plugin@4.2.1 from lock file
npm ERR! Missing: @types/webpack-bundle-analyzer@4.6.0 from lock file
npm ERR! Missing: @types/webpack-dev-middleware@5.3.0 from lock file
npm ERR! Missing: @types/webpack-hot-middleware@2.25.6 from lock file
npm ERR! Missing: @types/browserslist@4.15.0 from lock file
npm ERR! Missing: postcss@7.0.39 from lock file
npm ERR! Missing: @types/babel__generator@7.6.4 from lock file
npm ERR! Missing: @types/babel__template@7.4.1 from lock file
npm ERR! Missing: @types/babel__traverse@7.18.3 from lock file
npm ERR! Missing: @types/express@4.17.17 from lock file
npm ERR! Missing: @types/body-parser@1.19.2 from lock file
npm ERR! Missing: @types/express-serve-static-core@4.17.33 from lock file
npm ERR! Missing: @types/qs@6.9.7 from lock file
npm ERR! Missing: @types/range-parser@1.2.4 from lock file
npm ERR! Missing: @types/clean-css@4.2.6 from lock file
npm ERR! Missing: @types/relateurl@0.2.29 from lock file
npm ERR! Missing: @types/mime@3.0.1 from lock file
npm ERR! Missing: tapable@2.2.1 from lock file
npm ERR! Missing: webpack@5.75.0 from lock file
npm ERR! Missing: tapable@2.2.1 from lock file
npm ERR! Missing: webpack@5.75.0 from lock file
npm ERR! Missing: picocolors@0.2.1 from lock file
npm ERR! Missing: @types/eslint-scope@3.7.4 from lock file
npm ERR! Missing: @types/estree@0.0.51 from lock file
npm ERR! Missing: @webassemblyjs/ast@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-edit@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-parser@1.11.1 from lock file
npm ERR! Missing: acorn-import-assertions@1.8.0 from lock file
npm ERR! Missing: enhanced-resolve@5.12.0 from lock file
npm ERR! Missing: es-module-lexer@0.9.3 from lock file
npm ERR! Missing: terser-webpack-plugin@5.3.6 from lock file
npm ERR! Missing: webpack-sources@3.2.3 from lock file
npm ERR! Missing: @webassemblyjs/helper-numbers@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-bytecode@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/floating-point-hex-parser@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-api-error@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-buffer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-section@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-gen@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-opt@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wast-printer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/ieee754@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/leb128@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/utf8@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-api-error@1.11.1 from lock file
npm ERR! Missing: terser@5.16.5 from lock file
npm ERR! Missing: @types/estree@0.0.51 from lock file
npm ERR! Missing: @webassemblyjs/ast@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-edit@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-parser@1.11.1 from lock file
npm ERR! Missing: enhanced-resolve@5.12.0 from lock file
npm ERR! Missing: terser-webpack-plugin@5.3.6 from lock file
npm ERR! Missing: webpack-sources@3.2.3 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-bytecode@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-buffer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-wasm-section@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-gen@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wasm-opt@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/wast-printer@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/ieee754@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/leb128@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/utf8@1.11.1 from lock file
npm ERR! Missing: @webassemblyjs/helper-api-error@1.11.1 from lock file
npm ERR! Missing: terser@5.16.5 from lock file
npm ERR!
npm ERR! Clean install a project
npm ERR!
npm ERR! Usage:
npm ERR! npm ci
npm ERR!
npm ERR! Options:
npm ERR! [-S|--save|--no-save|--save-prod|--save-dev|--save-optional|--save-peer|--save-bundle]
npm ERR! [-E|--save-exact] [-g|--global] [--global-style] [--legacy-bundling]
npm ERR! [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--no-package-lock] [--foreground-scripts]
npm ERR! [--ignore-scripts] [--no-audit] [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR!
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR!
npm ERR! Run "npm help ci" for more info
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.idEBY/_logs/2023-03-04T07_57_35_063Z-debug-0.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed8_4_6. 에러: npm ERR! code EUSAGE
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 16.19.0
engines.npm (package.json): 8.19.3
Resolving node version 16.19.0...
Downloading and installing node 16.19.0...
npm 8.19.3 already installed with node
-----> Installing dependencies
Installing node modules (package.json)
added 1475 packages, and audited 1476 packages in 40s
211 packages are looking for funding
run `npm fund` for details
8 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build
Running build
> learn-nuxt@1.0.0 build
> nuxt build
WARN webpack@5.75.0 is installed but ^4.46.0 is expected
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
ℹ Using components loader to optimize imports
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
FATAL Rule can only have one resource source (provided resource and test + include + exclude) in {
"type": "javascript/auto",
"use": [
{
"loader": "/tmp/build_af99b96d/node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": false,
"envName": "client",
"presets": [
[
"/tmp/build_af99b96d/node_modules/@nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-4.use[0]"
}
]
}
"type": "javascript/auto",
"use": [
{
"loader": "node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": false,
"envName": "client",
"presets": [
[
"node_modules/@nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-4.use[0]"
}
]
}
at checkResourceSource (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11)
at Function.normalizeRule (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4)
at node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (node_modules/@nuxt/webpack/node_modules/webpack/lib/RuleSet.js:104:24)
at new NormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:636:31)
at Compiler.newCompilationParams (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:653:30)
at Compiler.compile (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:661:23)
at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:321:11
at Compiler.readRecords (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:529:11)
at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:318:10
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/@nuxt/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook (node_modules/@nuxt/webpack/node_modules/tapable/lib/Hook.js:154:20)
at node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:315:19
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/@nuxt/webpack/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
at AsyncSeriesHook.lazyCompileHook (node_modules/@nuxt/webpack/node_modules/tapable/lib/Hook.js:154:20)
at Compiler.run (node_modules/@nuxt/webpack/node_modules/webpack/lib/Compiler.js:312:24)
at node_modules/pify/index.js:33:11
at new Promise (<anonymous>)
at Compiler.<anonymous> (node_modules/pify/index.js:6:9)
at Object.apply (node_modules/pify/index.js:85:19)
at WebpackBundler.webpackCompile (node_modules/@nuxt/webpack/dist/webpack.js:1812:34)
╭──────────────────────────────────────────────────────────────────────────────╮│ ││ ✖ Nuxt Fatal Error ││ ││ Error: Rule can only have one resource source (provided resource and ││ test + │�� include + exclude) in { ││ "type": "javascript/auto", ││ "use": [ ││ { ││ "loader": "/tmp/build_af99b96d/node_modules/babel-loader/lib/index.js", ││ "options": { ││ "configFile": false, ││ "babelrc": false, ││ "cacheDirectory": false, ││ "envName": "client", ││ "presets": [ ││ [ ││ "/tmp/build_af99b96d/node_modules/@nuxt/babel-preset-app/src/index.js", ││ { ││ "corejs": { ││ "version": 3 ││ } ││ } ││ ] ││ ] ││ }, ││ "ident": "clonedRuleSet-4.use[0]" ││ } ││ ] ││ } ││ │╰──────────────────────────────────────────────────────────────────────────────╯
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed8_4_7. 에러: 웹팩 버전 에러
위와 같이 다시 package-lock.json 파일을 다시 올려도 WARN webpack@5.75.0 is installed but ^4.46.0 is expected 에러 발생.
8_4_8. 에러: WARN
어떻게 해결해야될까?
뭔가 버전이 꼬인거 같아서 nuxt 버전.. (사실 이게 아닌거같긴한데,)
여튼 로컬에서 다시 npm i하고 npx audit fix인가도 하고 다시 올림.
npm update해서 nuxt 버전 3점대 버전으로 올라간거 때문에 위 웹팩 에러가 났던건지 제대로 확인은 안해봤지만, 여튼 다시 올리니깐 아래 에러 발생
8_4_9. 에러.. 아.. lock file 이 문젠가? 다시 봐야겠다..
아오 짜증.
package-lock.json 이따 다시보자.
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 16.19.0
engines.npm (package.json): 8.19.3
Resolving node version 16.19.0...
Downloading and installing node 16.19.0...
npm 8.19.3 already installed with node
-----> Installing dependencies
Installing node modules
npm ERR! code EUSAGE
npm ERR!
npm ERR! `npm ci` can only install packages when your package.json and package-lock.json or npm-shrinkwrap.json are in sync. Please update your lock file with `npm install` before continuing.
npm ERR!
npm ERR! Invalid: lock file's buffer@4.9.2 does not satisfy buffer@6.0.3
npm ERR! Missing: buffer@4.9.2 from lock file
npm ERR!
npm ERR! Clean install a project
npm ERR!
npm ERR! Usage:
npm ERR! npm ci
npm ERR!
npm ERR! Options:
npm ERR! [-S|--save|--no-save|--save-prod|--save-dev|--save-optional|--save-peer|--save-bundle]
npm ERR! [-E|--save-exact] [-g|--global] [--global-style] [--legacy-bundling]
npm ERR! [--omit <dev|optional|peer> [--omit <dev|optional|peer> ...]]
npm ERR! [--strict-peer-deps] [--no-package-lock] [--foreground-scripts]
npm ERR! [--ignore-scripts] [--no-audit] [--no-bin-links] [--no-fund] [--dry-run]
npm ERR! [-w|--workspace <workspace-name> [-w|--workspace <workspace-name> ...]]
npm ERR! [-ws|--workspaces] [--include-workspace-root] [--install-links]
npm ERR!
npm ERR! aliases: clean-install, ic, install-clean, isntall-clean
npm ERR!
npm ERR! Run "npm help ci" for more info
npm ERR! A complete log of this run can be found in:
npm ERR! /tmp/npmcache.cjw2O/_logs/2023-03-05T04_49_47_387Z-debug-0.log
-----> Build failed
We're sorry this build is failing! You can troubleshoot common issues here:
https://devcenter.heroku.com/articles/troubleshooting-node-deploys
If you're stuck, please submit a ticket so we can help:
https://help.heroku.com/
Love,
Heroku
! Push rejected, failed to compile Node.js app.
! Push failed8_4_10. 드디어 빌드 성공
-----> Building on the Heroku-22 stack
-----> Determining which buildpack to use for this app
-----> Node.js app detected
-----> Creating runtime environment
NPM_CONFIG_LOGLEVEL=error
NODE_VERBOSE=false
NODE_ENV=production
NODE_MODULES_CACHE=true
-----> Installing binaries
engines.node (package.json): 16.19.0
engines.npm (package.json): 8.19.3
Resolving node version 16.19.0...
Downloading and installing node 16.19.0...
npm 8.19.3 already installed with node
-----> Installing dependencies
Installing node modules
added 1398 packages, and audited 1399 packages in 19s
212 packages are looking for funding
run `npm fund` for details
8 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build
Running build
> learn-nuxt@1.0.0 build
> nuxt build
ℹ Production build
ℹ Bundling for server and client side
ℹ Target: server
ℹ Using components loader to optimize imports
ℹ Discovered Components: .nuxt/components/readme.md
✔ Builder initialized
✔ Nuxt files generated
ℹ Compiling Client
✔ Client: Compiled successfully in 8.84s
ℹ Compiling Server
✔ Server: Compiled successfully in 936.19ms
Hash: 6c1aa7afe7fe79684d34
Version: webpack 4.46.0
Time: 8843ms
Built at: 03/05/2023 9:13:07 AM
Asset Size Chunks Chunk Names
../server/client.manifest.json 13.3 KiB [emitted]
14647d7.js 234 KiB 1 [emitted] [immutable] commons/app
208228c.js 1.86 KiB 3 [emitted] [immutable] components/nuxt-logo
2d372f7.js 261 bytes 4 [emitted] [immutable] components/product-list
4b45029.js 1.2 KiB 5 [emitted] [immutable] components/search-input
73e3b88.js 2.39 KiB 11 [emitted] [immutable] runtime
7e2c936.js 426 bytes 8 [emitted] [immutable] pages/detail
82ed827.js 6.63 KiB 6 [emitted] [immutable] components/tutorial
LICENSES 622 bytes [emitted]
ba6362d.js 28.9 KiB 12 [emitted] [immutable] vendors/app
cc0a089.js 4.67 KiB 9, 5 [emitted] [immutable] pages/index
ce79f7b.js 2.02 KiB 10 [emitted] [immutable] pages/product/_id
d726331.js 49.2 KiB 0 [emitted] [immutable] app
de4f9ef.js 1.5 KiB 2 [emitted] [immutable] components/cart-list
f145783.js 2.52 KiB 7, 2 [emitted] [immutable] pages/cart
+ 2 hidden assets
Entrypoint app = 73e3b88.js 14647d7.js ba6362d.js d726331.js
Hash: bf0e901ab5e479d56cf5
Version: webpack 4.46.0
Time: 937ms
Built at: 03/05/2023 9:13:08 AM
Asset Size Chunks Chunk Names
components/cart-list.js 6.42 KiB 1 [emitted] components/cart-list
components/nuxt-logo.js 6.08 KiB 2 [emitted] components/nuxt-logo
components/product-list.js 1.83 KiB 3 [emitted] components/product-list
components/search-input.js 5.92 KiB 4 [emitted] components/search-input
components/tutorial.js 7.75 KiB 5 [emitted] components/tutorial
pages/cart.js 12.1 KiB 6, 1 [emitted] pages/cart
pages/detail.js 1.88 KiB 7 [emitted] pages/detail
pages/index.js 13.8 KiB 8, 4 [emitted] pages/index
pages/product/_id.js 7 KiB 9 [emitted] pages/product/_id
server.js 88 KiB 0 [emitted] app
server.manifest.json 1.08 KiB [emitted]
+ 10 hidden assets
Entrypoint app = server.js server.js.map
ℹ Ready to run nuxt start
-----> Caching build
- npm cache
-----> Pruning devDependencies
up to date, audited 1181 packages in 4s
180 packages are looking for funding
run `npm fund` for details
8 high severity vulnerabilities
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
-----> Build succeeded!
-----> Discovering process types
Procfile declares types -> (none)
Default types for buildpack -> web
-----> Compressing...
Done: 56.1M
-----> Launching...
Released v4
https://nuxt-shopping-app.herokuapp.com/ deployed to Heroku
8_4_11. 빌드 성공 후
위와 같이 빌드 성공이 되었다고 뜬다.
위에서 View 버튼을 누르면
위와 같이 아직 페이지가 안 보인다.
이러한 현상은 당연한 현상이기 때문에 이 부분에 대해서 수정을 하고 다시 배포를 진행해보겠다.
8_4_12. View 관련 수정
빌드를 성공했음에도 nuxt-shopping-app.herokuapp.com url 에 접속할 수 없는 이유는 nuxt.config.js에다가 포트를 변경을 해놨는데(8080)
이를 기준으로 heroku에서 배포를 해버린다.
아마 heroku 서버 내부에서는 아마 우리가 외부에서 접근할 수 있는 포트를 열어놨을텐데, 이 8080번 포트로 열어놓진 않았을 것이다.
따라서 이 server setup쪽을 개발할 때만 8080으로 쓰고, 실제 배포할 때는 이 포트를 변경하지않고 그대로 놔두는 형식으로 변경을 해볼 것이다.
명령어에 따라서 포트가 설정되거나 기본값으로 설정되거나 하게끔 바꿔보도록 하겠다.
8_4_13. 에러 회고 - npm update 명령어 조심
중간에 npm update 명령어를 실행해 넉스트 버전업 되면서 버전명시가 꼬인거 같다.
그래서 웹팩 버전 에러나고.. 그래서 웹팩을 삭제하고 다시 설치하는 식으로 해결을 했다.