[{"data":1,"prerenderedAt":754},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-project-brolog-vercel-deploy1":181,"-ko-project-brolog-vercel-deploy1-surround":749},[4,114,167],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":27},"Note (개발 지식)","emojione-v1:note-pad","\u002Fko\u002Fnote","ko\u002F1.note",[10,28,42,68,78,88,104],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":27},"Spring","logos:spring-icon","\u002Fko\u002Fnote\u002Fspring","ko\u002F1.note\u002F0.spring",[16],{"title":17,"icon":18,"path":19,"stem":20,"children":21,"page":27},"Spring Ai","custom:ai","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai",[22],{"title":23,"path":24,"stem":25,"icon":26},"Spring AI 핵심 개념과 LLM 애플리케이션 구조 이해","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai\u002F1.spring-ai","lucide:file-text",false,{"title":29,"icon":30,"path":31,"stem":32,"children":33,"page":27},"Javascript","skill-icons:javascript","\u002Fko\u002Fnote\u002Fjavascript","ko\u002F1.note\u002F1.javascript",[34,38],{"title":35,"path":36,"stem":37,"icon":26},"Promise.all과 구조 분해 할당을 활용한 데이터 처리 패턴","\u002Fko\u002Fnote\u002Fjavascript\u002Fdestructuring","ko\u002F1.note\u002F1.javascript\u002F1.destructuring",{"title":39,"path":40,"stem":41,"icon":26},"JavaScript 배열 고차 함수와 데이터 처리 패턴 이해","\u002Fko\u002Fnote\u002Fjavascript\u002Ffilter","ko\u002F1.note\u002F1.javascript\u002F2.filter",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":27},"Nuxt4","logos:nuxt-icon","\u002Fko\u002Fnote\u002Fnuxt4","ko\u002F1.note\u002F2.nuxt4",[48,52,56,60,64],{"title":49,"path":50,"stem":51,"icon":26},"Nuxt 4를 선택한 이유와 아키텍처 및 실무 가이드","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-info","ko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info",{"title":53,"path":54,"stem":55,"icon":26},"Nuxt useAsyncData 동작 원리와 SSR 데이터 페칭 최적화","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-use_async_data","ko\u002F1.note\u002F2.nuxt4\u002F2.nuxt-use_async_data",{"title":57,"path":58,"stem":59,"icon":26},"Nuxt Content v3 데이터 모델과 Query 시스템 이해","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-content-v3","ko\u002F1.note\u002F2.nuxt4\u002F3.nuxt-content-v3",{"title":61,"path":62,"stem":63,"icon":26},"Nuxt Auto-imports 내부 동작과 컴파일 과정 분석","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-auto-import","ko\u002F1.note\u002F2.nuxt4\u002F4.nuxt-auto-import",{"title":65,"path":66,"stem":67,"icon":26},"Nuxt 렌더링 방식 이해: SSR, SSG, ISR, CSR 구현 방법","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","ko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":27},"Nitro","unjs:nitro","\u002Fko\u002Fnote\u002Fnitro","ko\u002F1.note\u002F3.nitro",[74],{"title":75,"path":76,"stem":77,"icon":26},"Nitro 아키텍처와 서버 엔진 구조","\u002Fko\u002Fnote\u002Fnitro\u002Fnitro","ko\u002F1.note\u002F3.nitro\u002Fnitro",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":27},"Devops","vscode-icons:file-type-pipeline","\u002Fko\u002Fnote\u002Fdevops","ko\u002F1.note\u002F4.devops",[84],{"title":85,"path":86,"stem":87,"icon":26},"서버사이드 WebAssembly(Wasm)와 차세대 실행 환경","\u002Fko\u002Fnote\u002Fdevops\u002Fwebassembly","ko\u002F1.note\u002F4.devops\u002F1.webAssembly",{"title":89,"icon":90,"path":91,"stem":92,"children":93,"page":27},"Tooling","lucide:wrench","\u002Fko\u002Fnote\u002Ftooling","ko\u002F1.note\u002F4.tooling",[94],{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":27},"Package Manager","devicon:npm","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager","ko\u002F1.note\u002F4.tooling\u002F1.package-manager",[100],{"title":101,"path":102,"stem":103,"icon":26},"Package Lock 파일의 역할과 의존성 관리 원리","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager\u002Fpackage-lock","ko\u002F1.note\u002F4.tooling\u002F1.package-manager\u002F1.package-lock",{"title":105,"icon":106,"path":107,"stem":108,"children":109,"page":27},"Web","streamline-plump:web","\u002Fko\u002Fnote\u002Fweb","ko\u002F1.note\u002F4.web",[110],{"title":111,"path":112,"stem":113,"icon":26},"웹 애플리케이션 렌더링 아키텍처 이해","\u002Fko\u002Fnote\u002Fweb\u002Frendering-modes","ko\u002F1.note\u002F4.web\u002F2.rendering-modes",{"title":115,"icon":116,"path":117,"stem":118,"children":119,"page":27},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[120],{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[126,130,134,138,142,146,150,154,159,163],{"title":127,"path":128,"stem":129,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":131,"path":132,"stem":133,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (3) - Runtime 기능 문제 분석과 AI Assistant 전환","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy3-ai-integration","ko\u002F2.project\u002F1.brolog\u002F10.vercel-deploy3-ai-integration",{"title":135,"path":136,"stem":137,"icon":26},"[Brolog] AI Assistant 적용 과정 - Agent 구조와 API 사용량 관리 시 고려사항","\u002Fko\u002Fproject\u002Fbrolog\u002Fai-assistant-application-process","ko\u002F2.project\u002F1.brolog\u002F11.ai-assistant-application-process",{"title":139,"path":140,"stem":141,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":143,"path":144,"stem":145,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":147,"path":148,"stem":149,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":151,"path":152,"stem":153,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":155,"path":156,"stem":157,"icon":158},"[Brolog] 브랜드 아이덴티티 적용 - Custom 404 페이지와 Default No Image 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-error-and-default-thumbnail","ko\u002F2.project\u002F1.brolog\u002F6.custom-error-and-default-thumbnail","lucide:image",{"title":160,"path":161,"stem":162,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":164,"path":165,"stem":166,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (2) - Build Pipeline 오류 분석과 Nuxt 실행 구조 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy2-error-analyze","ko\u002F2.project\u002F1.brolog\u002F9.vercel-deploy2-error-analyze",{"title":168,"icon":169,"path":170,"stem":171,"children":172,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[173],{"title":121,"icon":122,"path":174,"stem":175,"children":176,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[177],{"title":178,"path":179,"stem":180,"icon":26},"[Nuxt Content] Nuxt Icon 오류 해결과 Custom Collection 기반 오프라인 아이콘 구성","\u002Fko\u002Ftrouble-shooting\u002Fbrolog\u002Fnuxt-icon-restricted-network-troubleshooting","ko\u002F3.trouble-shooting\u002F1.brolog\u002F1.nuxt-icon-restricted-network-troubleshooting",{"id":182,"title":160,"body":183,"date":734,"description":735,"extension":736,"links":737,"meta":738,"navigation":744,"path":161,"seo":745,"stem":162,"__hash__":748},"docs_ko\u002Fko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1.md",{"type":184,"value":185,"toc":731},"minimark",[186,727],[187,188,190,195,199,202,205,208,211,214,219,222,233,243,253,255,259,262,265,268,275,278,311,314,317,320,323,330,343,349,352,354,358,365,431,441,444,459,462,468,471,473,477,484,487,490,493,496,502,505,508,510,514,517,522,525,528,564,567,573,576,579,586,589,595,598,600,604,607,634,637,643,650,657,660,673,682,685,687,691,694,697,703,709,712,715,721,724],"u-page-card",{":spotlight":189},"true",[191,192,194],"h1",{"id":193},"brolog-vercel-배포를-시작하며","🚀 Brolog Vercel 배포를 시작하며",[196,197,198],"p",{},"Brolog는 Nuxt 4 기반으로 제작한 개인 개발 블로그 프로젝트다.",[196,200,201],{},"처음 프로젝트를 만들 때부터 단순히 블로그 기능만 구현하는 것보다, 앞으로 진행할 프로젝트와 기술 학습 내용을 지속적으로 기록할 수 있는 개발 환경을 만드는 것을 목표로 했다.",[196,203,204],{},"현재 Brolog는 Nuxt Docus Theme 기반으로 구성되어 있으며, 공통 기능과 설정을 별도의 Nuxt Layer로 분리하는 Multi Layer 구조를 사용하고 있다.",[196,206,207],{},"로컬 개발 환경에서는 정상적으로 동작하고 있었지만, 실제 서비스를 제공하기 위해 Vercel 배포를 진행하면서 예상하지 못했던 몇 가지 문제를 만나게 되었다.",[196,209,210],{},"이번 글에서는 처음 Vercel 환경을 구성하면서 확인했던 과정을 기록한다.",[212,213],"hr",{},[215,216,218],"h2",{"id":217},"프로젝트-구조","📂 프로젝트 구조",[196,220,221],{},"현재 프로젝트는 다음과 같은 구조로 구성되어 있다.",[223,224,230],"pre",{"className":225,"code":227,"language":228,"meta":229},[226],"language-text","Brolog\n\n├── docs\n│   ├── pages\n│   ├── content\n│   ├── app.vue\n│   └── nuxt.config.ts\n│\n├── layer\n│   ├── components\n│   ├── composables\n│   ├── middleware\n│   └── nuxt.config.ts\n│\n└── package.json\n","text","",[231,232,227],"code",{"__ignoreMap":229},[196,234,235,238,239,242],{},[231,236,237],{},"docs","는 실제 배포 대상이 되는 Nuxt 애플리케이션이며,\n",[231,240,241],{},"layer","는 공통 컴포넌트와 설정을 제공하는 확장 레이어 역할을 한다.",[196,244,245,246,248,249,252],{},"즉, 최종적으로 실행되는 Nuxt 애플리케이션은 ",[231,247,237],{}," 단독이 아니라,\n",[231,250,251],{},"docs + layer","가 결합된 형태이다.",[212,254],{},[191,256,258],{"id":257},"_1차-배포-시도와-build-error-발생","🚨 1차 배포 시도와 Build Error 발생",[196,260,261],{},"Brolog 프로젝트를 Vercel에 배포하기 위해 먼저 GitHub 저장소를 연결하고 기본 배포 설정을 확인했다.",[196,263,264],{},"Vercel은 프로젝트 구조를 기준으로 일부 설정값을 자동으로 감지하고 있었고, 당시에는 별도의 설정 변경 없이 기본값으로 배포를 진행했다.",[196,266,267],{},"초기 설정은 다음과 같았다.",[223,269,273],{"className":270,"code":271,"filename":272,"language":228,"meta":229},[226],"Root Directory : docs\n","Vercel Settings",[231,274,271],{"__ignoreMap":229},[196,276,277],{},"Build Command는 Vercel에서 제공하는 기본 설정값을 그대로 사용했다.",[223,279,284],{"className":280,"code":281,"filename":282,"language":283,"meta":229,"style":229},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm run build or nuxt build\n","Terminal","bash",[231,285,286],{"__ignoreMap":229},[287,288,291,295,299,302,305,308],"span",{"class":289,"line":290},"line",1,[287,292,294],{"class":293},"sBMFI","npm",[287,296,298],{"class":297},"sfazB"," run",[287,300,301],{"class":297}," build",[287,303,304],{"class":297}," or",[287,306,307],{"class":297}," nuxt",[287,309,310],{"class":297}," build\n",[196,312,313],{},"처음에는 로컬 환경에서 정상적으로 동작하고 있었기 때문에, 기본 빌드 명령어만으로도 배포가 가능할 것이라고 판단했다.",[196,315,316],{},"하지만 실제 Vercel 빌드 환경에서는 예상하지 못한 오류가 발생했고, 단순한 설정 문제가 아닌 Nuxt Multi Layer 구조와 빌드 과정 자체를 확인해야 했다.",[196,318,319],{},"처음에는 단순한 Vercel 설정 문제라고 생각했지만, 오류 메시지를 확인하면서 문제가 Nuxt Multi Layer 구조와 빌드 과정에 있다는 것을 알게 되었다.",[196,321,322],{},"발생한 오류는 다음과 같다.",[223,324,328],{"className":325,"code":326,"filename":327,"language":228,"meta":229},[226],"Nuxt build error:\n\nTSConfckParseError:\n[vite:esbuild] parsing\n\n\u002Fvercel\u002Fpath0\u002Flayer\u002F.nuxt\u002Ftsconfig.app.json\n\nfailed:\n\nENOENT: no such file or directory\n","Error Log",[231,329,326],{"__ignoreMap":229},[196,331,332,333,335,336,338,339,342],{},"오류 위치를 보면 실제 서비스 애플리케이션인 ",[231,334,237],{},"가 아니라 ",[231,337,241],{}," 디렉토리 내부의 ",[231,340,341],{},".nuxt"," 파일을 찾고 있었다.",[196,344,345,346,348],{},"로컬 환경에서는 이미 개발 과정에서 Nuxt prepare 과정이 실행되면서 ",[231,347,341],{}," 관련 파일들이 생성되어 있었지만,",[196,350,351],{},"Vercel은 새로운 빌드 컨테이너에서 시작하기 때문에 기존 생성 파일이 존재하지 않는다.",[212,353],{},[191,355,357],{"id":356},"_1-packagejson의-build-script-확인","1. package.json의 build script 확인",[196,359,360,361,364],{},"오류 원인을 찾기 위해 프로젝트의 ",[231,362,363],{},"package.json","을 다시 확인했다.",[223,366,370],{"className":367,"code":368,"filename":363,"language":369,"meta":229,"style":229},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"scripts\": {\n    \"docs:build\": \"nuxt build docs --extends ..\u002Flayer\"\n  }\n}\n","json",[231,371,372,378,397,419,425],{"__ignoreMap":229},[287,373,374],{"class":289,"line":290},[287,375,377],{"class":376},"sMK4o","{\n",[287,379,381,384,388,391,394],{"class":289,"line":380},2,[287,382,383],{"class":376},"  \"",[287,385,387],{"class":386},"spNyl","scripts",[287,389,390],{"class":376},"\"",[287,392,393],{"class":376},":",[287,395,396],{"class":376}," {\n",[287,398,400,403,406,408,410,413,416],{"class":289,"line":399},3,[287,401,402],{"class":376},"    \"",[287,404,405],{"class":293},"docs:build",[287,407,390],{"class":376},[287,409,393],{"class":376},[287,411,412],{"class":376}," \"",[287,414,415],{"class":297},"nuxt build docs --extends ..\u002Flayer",[287,417,418],{"class":376},"\"\n",[287,420,422],{"class":289,"line":421},4,[287,423,424],{"class":376},"  }\n",[287,426,428],{"class":289,"line":427},5,[287,429,430],{"class":376},"}\n",[196,432,433,434,436,437,440],{},"기존 프로젝트 구조에서는 ",[231,435,237],{}," 애플리케이션을 빌드하면서 ",[231,438,439],{},"..\u002Flayer","를 extends 하는 방식이었다.",[196,442,443],{},"그래서 Vercel Build Command를 다음과 같이 변경해보았다.",[223,445,447],{"className":280,"code":446,"filename":282,"language":283,"meta":229,"style":229},"pnpm run docs:build\n",[231,448,449],{"__ignoreMap":229},[287,450,451,454,456],{"class":289,"line":290},[287,452,453],{"class":293},"pnpm",[287,455,298],{"class":297},[287,457,458],{"class":297}," docs:build\n",[196,460,461],{},"하지만 결과는 동일했다.",[223,463,466],{"className":464,"code":465,"language":228,"meta":229},[226],"layer\u002F.nuxt\u002Ftsconfig.app.json not found\n",[231,467,465],{"__ignoreMap":229},[196,469,470],{},"처음에는 build 명령어가 문제라고 생각했지만, 실제 원인은 다른 곳에 있었다.",[212,472],{},[191,474,476],{"id":475},"_2-root-directory를-비웠을-때-발생한-새로운-문제","2. Root Directory를 비웠을 때 발생한 새로운 문제",[196,478,479,480,483],{},"다음으로 Vercel Root Directory를 기본값인 프로젝트 루트(",[231,481,482],{},".\u002F",")로 변경했다.",[196,485,486],{},"그러자 빌드는 진행되었지만 예상하지 못한 결과가 나왔다.",[196,488,489],{},"배포된 페이지는 내가 제작한 Brolog 페이지가 아니라 Nuxt 기본 Welcome 페이지였다.",[196,491,492],{},"처음에는 빌드 성공처럼 보였지만, 실제로는 다른 Nuxt 프로젝트를 대상으로 빌드하고 있었다.",[196,494,495],{},"즉:",[223,497,500],{"className":498,"code":499,"filename":272,"language":228,"meta":229},[226],"Root Directory: .\u002F\n\n↓\n\n프로젝트 루트 기준 Nuxt 실행\n\n↓\n\ndocs 애플리케이션이 아닌 기본 Nuxt 앱 빌드\n",[231,501,499],{"__ignoreMap":229},[196,503,504],{},"가 발생한 것이다.",[196,506,507],{},"이 경험을 통해 Vercel의 Root Directory 설정은 단순히 파일 위치를 지정하는 옵션이 아니라, 실제 Nuxt 프로젝트의 기준점을 결정하는 중요한 설정이라는 것을 확인했다.",[212,509],{},[191,511,513],{"id":512},"_3-nuxi-prepare-과정의-필요성-확인","3. nuxi prepare 과정의 필요성 확인",[196,515,516],{},"여러 시도 끝에 이번 프로젝트 구조에서는",[196,518,519,521],{},[231,520,241],{}," 역시 별도의 Nuxt 프로젝트 컨텍스트로 처리되기 때문에,",[196,523,524],{},"배포 과정에서 먼저 Layer의 Nuxt 준비 과정이 필요하다는 점을 확인했다.",[196,526,527],{},"최종적으로 성공한 Build Command는 다음이었다.",[223,529,531],{"className":280,"code":530,"filename":282,"language":283,"meta":229,"style":229},"npx nuxi prepare ..\u002Flayer && npx nuxi generate --extends ..\u002Flayer\n",[231,532,533],{"__ignoreMap":229},[287,534,535,538,541,544,547,550,553,555,558,561],{"class":289,"line":290},[287,536,537],{"class":293},"npx",[287,539,540],{"class":297}," nuxi",[287,542,543],{"class":297}," prepare",[287,545,546],{"class":297}," ..\u002Flayer",[287,548,549],{"class":376}," &&",[287,551,552],{"class":293}," npx",[287,554,540],{"class":297},[287,556,557],{"class":297}," generate",[287,559,560],{"class":297}," --extends",[287,562,563],{"class":297}," ..\u002Flayer\n",[196,565,566],{},"Vercel 설정은:",[223,568,571],{"className":569,"code":570,"filename":272,"language":228,"meta":229},[226],"Root Directory\n\ndocs\n",[231,572,570],{"__ignoreMap":229},[196,574,575],{},"로 유지했다.",[196,577,578],{},"동작 흐름은 다음과 같다.",[223,580,584],{"className":581,"code":582,"filename":583,"language":228,"meta":229},[226],"Vercel Build 시작\n\n↓\n\ndocs 기준 실행\n\n↓\n\nlayer prepare 실행\n\n↓\n\nlayer\u002F.nuxt 생성\n\n↓\n\ndocs + layer 병합\n\n↓\n\nNuxt generate 실행\n\n↓\n\n정적 결과물 생성\n","Build Flow",[231,585,582],{"__ignoreMap":229},[196,587,588],{},"기존 오류의 원인이었던:",[223,590,593],{"className":591,"code":465,"filename":592,"language":228,"meta":229},[226],"Build Log",[231,594,465],{"__ignoreMap":229},[196,596,597],{},"문제가 해결되었다.",[212,599],{},[191,601,603],{"id":602},"_4-build-방식도-시도해보았지만-발생한-문제","4. build 방식도 시도해보았지만 발생한 문제",[196,605,606],{},"generate 이전에 다음 명령어도 테스트했다.",[223,608,610],{"className":280,"code":609,"filename":282,"language":283,"meta":229,"style":229},"npx nuxi prepare ..\u002Flayer && npx nuxi build --extends ..\u002Flayer\n",[231,611,612],{"__ignoreMap":229},[287,613,614,616,618,620,622,624,626,628,630,632],{"class":289,"line":290},[287,615,537],{"class":293},[287,617,540],{"class":297},[287,619,543],{"class":297},[287,621,546],{"class":297},[287,623,549],{"class":376},[287,625,552],{"class":293},[287,627,540],{"class":297},[287,629,301],{"class":297},[287,631,560],{"class":297},[287,633,563],{"class":297},[196,635,636],{},"하지만 결과는 다음과 같았다.",[223,638,641],{"className":639,"code":640,"filename":327,"language":228,"meta":229},[226],"Error: Command exited with SIGKILL\n\nOut of Memory event was detected during the build.\n",[231,642,640],{"__ignoreMap":229},[196,644,645,646,649],{},"즉, ",[231,647,648],{},"build"," 과정 자체가 Vercel 빌드 컨테이너의 메모리 제한을 초과한 상황이었다.",[196,651,652,653,656],{},"처음에는 Vercel 환경에서 Node 메모리 제한을 조정하는 방식(",[231,654,655],{},"NODE_OPTIONS=--max-old-space-size"," 등)으로 해결할 수 있을지 고민했다.",[196,658,659],{},"하지만 현재 Brolog 프로젝트의 목적은 별도의 서버 런타임이 필요한 애플리케이션 운영이 아니라, 개발 과정과 기술 기록을 제공하는 정적 콘텐츠 중심의 블로그 서비스였다.",[196,661,662,663,665,666,669,670,672],{},"따라서 서버 빌드 방식인 ",[231,664,648],{},"를 유지하기보다 정적 생성 방식인 ",[231,667,668],{},"generate","가 현재 배포 목적에 더 적합하다고 판단했고, 최종적으로 ",[231,671,668],{}," 방식을 선택하게 되었다.",[196,674,675,676,678,679,681],{},"다만 이 과정에서 ",[231,677,648],{},"와 ",[231,680,668],{},"가 단순히 명령어 차이가 아니라 Nuxt 애플리케이션을 배포하는 방식 자체의 차이라는 점을 확인할 필요가 생겼다.",[196,683,684],{},"해당 내용은 다음 글에서 별도로 정리한다.",[212,686],{},[191,688,690],{"id":689},"_7-이번-배포-과정에서-확인한-핵심-내용","7. 이번 배포 과정에서 확인한 핵심 내용",[196,692,693],{},"이번 문제는 단순한 Vercel 설정 문제가 아니었다.",[196,695,696],{},"핵심 원인은 다음 세 가지였다.",[223,698,701],{"className":699,"code":700,"language":228,"meta":229},[226],"Nuxt Multi Layer 구조\n\n+\n\n새로운 Vercel 빌드 환경\n\n+\n\nLayer 생성 컨텍스트 준비 과정 부재\n",[231,702,700],{"__ignoreMap":229},[196,704,705,706,708],{},"로컬 환경에서는 이미 생성되어 있던 ",[231,707,341],{}," 관련 파일들이 있었지만,",[196,710,711],{},"Vercel에서는 항상 초기 상태에서 프로젝트를 준비하기 때문에 Layer 역시 별도의 준비 과정이 필요했다.",[196,713,714],{},"최종 배포 흐름은 다음과 같이 정리할 수 있다.",[223,716,719],{"className":717,"code":718,"language":228,"meta":229},[226],"docs Root Directory\n\n↓\n\nlayer prepare\n\n↓\n\nNuxt generate\n\n↓\n\nVercel Static Deployment\n",[231,720,718],{"__ignoreMap":229},[196,722,723],{},"이번 과정을 통해 Nuxt Layer 구조에서는 단순히 build 명령어만 실행하는 것이 아니라,",[196,725,726],{},"프로젝트 구조에 맞는 준비 과정과 배포 방식을 함께 고려해야 한다는 점을 확인했다.",[728,729,730],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":229,"searchDepth":380,"depth":380,"links":732},[733],{"id":217,"depth":380,"text":218},"2026-07-21","Nuxt Multi Layer 구조로 구성된 Brolog 프로젝트를 Vercel에 배포하며 발생한 빌드 오류와 해결 과정을 기록","md",null,{"tags":739,"image":743},[121,43,740,741,742],"Vercel","Deployment","Multi Layer","\u002Fimages\u002Fbro-build-thumbnail.png",{"icon":26},{"title":746,"description":747},"Nuxt Multi Layer 프로젝트 Vercel 배포 과정과 빌드 오류 해결 기록","Nuxt Layer 기반 프로젝트를 Vercel 환경에 배포하며 발생한 layer .nuxt 오류, Root Directory 설정 문제, 최종 배포 성공 과정을 정리합니다.","9usgJ5C8vy4jjFLhc23NMRE1OECwvrL9wEVEOK2To48",[750,752],{"title":155,"path":156,"stem":157,"description":751,"icon":158,"children":-1},"Brolog 캐릭터를 활용해 브랜드 리소스를 제작하고, Nuxt Docus Layer Override 구조를 활용해 Custom Error Page와 게시글 Default Image를 적용한 과정을 기록합니다.",{"title":164,"path":165,"stem":166,"description":753,"icon":26,"children":-1},"Nuxt Multi Layer 프로젝트에서 발생한 layer .nuxt 생성 오류를 기반으로 Nuxt 실행 구조, nuxi prepare 과정, build와 generate의 차이를 분석",1785297529780]