콘텐츠를 불러오는 중입니다.
사이트 URL을 환경변수로 통합하고 Node·이미지·보안 설정과 Vercel 배포 체크리스트를 정리한 작업
metadata 기준 주소가 아직 확정되지 않은 buildnlearn.dev로 고정되어 있었습니다. 모바일 검색 버튼의 두 글자가 줄바꿈될 수 있었고 배포 순서를 따라갈 문서도 없었습니다. 사이트 Log에는 실제 작업이 아닌 placeholder 글 6개가 함께 노출됐습니다.
로컬과 Vercel 임시 주소, 미래의 실제 도메인에서 같은 코드가 동작하도록 사이트 주소를 한곳에서 계산했습니다. 배포에 필요한 Node와 이미지 설정을 점검하고 실제 작업 기록만 Log에 남겼습니다.
사이트 주소가 코드에 직접 적혀 있어 배포 환경에 따라 바뀔 수 없었습니다. 검색 버튼에는 줄바꿈 금지와 최소 너비가 없었습니다. 예시 콘텐츠는 UI 검증용으로 추가됐지만 실제 작업 Log와 함께 계속 공개되고 있었습니다.
src/lib/site.tsdocs/deployment/DEPLOY.mdnext.config.ts의 외부 이미지 도메인 안내package.json의 Node 24.x 지정SITE_URL 사용buildnlearn.dev 주소실제 도메인이 정해지기 전에는 Vercel이 배포마다 제공하는 주소를 사용해야 미리보기 배포의 metadata와 sitemap이 깨지지 않습니다. 실제 도메인이 생기면 코드 대신 환경변수만 바꿔 재배포할 수 있습니다.
환경변수는 코드 밖에서 환경마다 다른 값을 전달하는 방법입니다. 로컬에서는 localhost, Vercel에서는 자동 주소, 실제 서비스에서는 커스텀 도메인을 사용해도 같은 코드를 유지할 수 있습니다.
npm run lintnpm run type-checknpm run format:checknpm run buildsrc/lib/site.tssrc/app/layout.tsxsrc/app/robots.tssrc/app/sitemap.tssrc/styles/globals.cssnext.config.tspackage.json.gitignoredocs/deployment/DEPLOY.mdsrc/content/logs/실제 Vercel 프로젝트 생성, GitHub push, 배포, 도메인 구매와 DNS 연결은 사용자가 직접 진행합니다.
실제 배포 후 docs/deployment/DEPLOY.md의 화면·모바일·SEO 체크리스트를 확인합니다.
댓글 0개
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.
로그인 후 학습 기록에 댓글을 남길 수 있습니다.