Qwik app CloudFlare에 손쉽게 배포하는법

qwik을 cloudflare에 배포하는 방법

준비: cloudflare 계정

1. qwik에서 제공하는 cloudflare integration 추가

npm run qwik add cloudflare-pages

설치된 파일

• adaptors/cloudflare-pages/vite.config.ts

• src/entry.cloudflare-pages.tsx

package.json에

"build": "qwik build",

"serve": "wrangler pages dev ./dist",

"deploy": "wrangler pages publish ./dist",

2. production용 깃 브런치 정하고 푸쉬

3. cloudflare pages로 배포

   1. cloudflare dashboard > workers & pages > create 클릭

   2. pages 탭 클릭

   3. connect to git

   4. github account 연동

   5. 업로드할 git repository 선택

   6. 프로젝트 이름과 production용 브런치 선택

   7. framework preset 선택후, 필요한 설정 변경

   8. Environment Variables설정

   9. save and deploy 클릭!(자동으로 배포가 진행된다)

나같은 경우는 npm install 하는 단계에서 --force가 필요해서 기본적으로 실행되는 dependency install을 skip(아래 env참고)하고 빌드에서 해줌.

pandacss도 빌드 해줘야해서 먼저 빌드

사용할 node version도 환경변수로 제어가능

4. 빌드 성공시 deployments탭에서 미리보기 가능

5. custom domains탭에서 인증된 도메인 연동 가능

6. settings > builds & deployments 에서 configure preview deployments 수정 > Custom branches만 auto deploy 하게 하고 preview 브랜치를 추가했다.

회고

• npm install --force하는법에 대한 정보가 웹에 없어서 많이 헤멨었다. cloudflare discord에서 다행히 관련 문제에 대한 힌트가 있어서 해결함!

• 요새 정보 보면 discord가 확실히 빠르고 양도 많은거 같다.

참고

• https://qwik.dev/docs/deployments/cloudflare-pages/#cloudflare-pages-adapter

• https://developers.cloudflare.com/pages/framework-guides/deploy-a-qwik-site/

• https://discord.com/invite/cloudflaredev