Dev/Nuxt3 5

[Nuxt3] 빌드 시 cdnURL 사용(preload, prefetch)

일단 시작! 시작이 반!한 사이트에서 프로젝트를 분리하고 Nginx 프록시를 통해 root 경로를 설정하다 보니, 절대 경로로 적용된 assets들이 올바른 경로를 찾지 못하는 문제가 발생했다. 웹사이트 볼륨이 커지면서 assets를 효율적으로 관리하기 위해 CDN을 도입할 필요가 생겼다. 개발 시에는 로컬의 assets들이 /assets/과 /public/을 바라본다신경쓸 부분 없이 잘 나온다.빌드 시 cdn을 바라보게 설정 시작Nuxt 공식문서에 나온 cdnURL 설정 적용https://nuxt.com/docs/api/nuxt-config#cdnurl Nuxt ConfigurationDiscover all the options you can use in your nuxt.config.ts file.n..

Dev/Nuxt3 2024.05.22

[Nuxt3] 런타임 시 public폴더로 scss파일 css로 컴파일하기

/assets/scss 파일 /public/css로 보내기 public폴더의 css, images 파일의 CDN적용을 위한 설정 public/css/ public/images/ 조건 :빌드 시점이 아닌 런타임 시에도 public폴더로 css가 컴파일 되면 좋겠음. npm 설치 sass가 설치되어있지 않으면 설치 npm install --save-dev sass package.json 수정 /* package.json */ "scripts": { // assts/scss 폴더 scss파일을 public/css 폴더 css파일로 "compile-scss": "sass assets/scss:public/css", // assts/scss 폴더 내 변경 감지 watch하기 public/css 로 보내기 "com..

Dev/Nuxt3 2024.04.10

[Nuxt3] proxy 설정 (다중 설정)

Nuxt3 프로젝트에서 여러 도메인의 api를 호출할 때 설정 /server/middleware/proxy.ts export default defineEventHandler(async (event) => { let target // 요청 URL에 따라 target URL 설정 if (event.req.url?.startsWith('/api')) { //api url: https://api도메인1.com/api/test/apiData target = new URL(event.req.url.replace('/api', ''), 'https://api도메인1.com') } else if (event.req.url?.startsWith('/branapi')) { //api url: https://api도메인2...

Dev/Nuxt3 2024.02.27