はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった Qwik に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
Qwik に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
- はじめに
- フロントエンドの世界 2024 について
- もくじ
- デプロイ先
- アダプター
- コードの修正
- ローカル環境の立ち上げ確認
- Cloudflare プロジェクトの追加
- Github リポジトリとの連携
- Cloudflare プロジェクト設定
- おわりに
デプロイ先
Qwikは以下の中から選んだランタイムに対し、最適化されたビルドを行うことができます。
- Azure SWA
- AWS Lambda
- Firebase Hosting
- Google Cloud Run
- Cloudflare Pages
- Deno
- Bun
- Netlify Edge
- Node
- Vercel Edge
- SSG 環境
今回は元々気になっていたCloudflare Pagesを選択しました。
(参考: Deployments)
アダプター
Cloudflare Pages へのビルド・デプロイ用 アダプターを設定します。
(参考: Cloudflare Pages Adapter)
# turborepoを使用している場合 (ルートで実行)
pnpm --filter qwik-client run qwik add cloudflare-pages
# 通常インストール
npm run qwik add cloudflare-pages
自動セットアップの選択
自動で cloudflare-pages デプロイに向けた設定を行うか聞かれるので、「Yes」を選択します。
│ 📜 New pnpm script:
│ - pnpm build.server
│ - pnpm deploy
│ - pnpm serve
│
◆ Ready to apply the cloudflare-pages updates to your app?
│ ● Yes looks good, finish update!
│ ○ Nope, cancel update
└
実行ログ
> qwik-client@ qwik **/apps/qwik-client
> qwik "add" "cloudflare-pages"
............
.::: :--------:.
.:::: .:-------:.
.:::::. .:-------.
::::::. .:------.
::::::. :-----:
::::::. .:-----.
:::::::. .-----.
::::::::.. ---:.
.:::::::::. :-:.
..::::::::::::
...::::
............
.::: :--------:.
.:::: .:-------:.
.:::::. .:-------.
::::::. .:------.
::::::. :-----:
::::::. .:-----.
:::::::. .-----.
::::::::.. ---:.
.:::::::::. :-:.
..::::::::::::
...::::
┌ 🦋 Add Integration cloudflare-pages
│
◇ 👻 Ready? Add cloudflare-pages to your app?
│
│ 🐬 Modify
│ - package.json
│ - .gitignore
│ - README.md
│
│ 🌟 Create
│ - public/_headers
│ - public/_redirects
│ - src/entry.cloudflare-pages.tsx
│ - adapters/cloudflare-pages/vite.config.ts
│
│ 💾 Install pnpm dependency:
│ - wrangler ^3.0.0
│
│ 📜 New pnpm script:
│ - pnpm build.server
│ - pnpm deploy
│ - pnpm serve
│
◇ Ready to apply the cloudflare-pages updates to your app?
│ Yes looks good, finish update!
│
◇ App updated
│
◇ New scripts added ───╮
│ │
│ - pnpm build.server │
│ - pnpm deploy │
│ - pnpm serve │
│ │
├───────────────────────╯
│
◇ 🟣 Next Steps ───────────────────────────────────────────────────────╮
│ │
│ Now you can build and deploy to Cloudflare Pages with: │
│ │
│ - pnpm run build: production build for Cloudflare │
│ - pnpm run deploy: it will use the Cloudflare CLI to deploy your site │
│ │
├─────────────────────────────────────────────────────────────────────────╯
│
└ 🦄 Success! Added cloudflare-pages to your app
コードの修正
※ cloudflare-pages のアダプター追加コマンドを実行済みの場合、自動で必要な設定が行われるので基本的に手動でコード追加や修正は不要です。
ローカル環境の立ち上げ確認
ビルド
立ち上げ前にビルドを行います。
アダプターのセットアップ時にビルドコマンドがいくつか追加されている事がわかると思います。
# turborepoの場合
pnpm --filter qwik-client build
# 通常ビルド
npm run build
立ち上げ
cloudflare-pages アダプターのセットアップ時に wranglerによる serve コマンドが追加されているので、そちらを使用してビルドファイルの立ち上げ確認を行います。
# turborepoを使用している場合 (ルートで実行)
pnpm --filter qwik-client serve
# 通常立ち上げ
npm run serve
http://localhost:8788/ で立ち上がれば成功です。
Cloudflare プロジェクトの追加
右上の「+ Add」から新しい Pages プロジェクトを追加します。
Github リポジトリとの連携
デプロイアセットの連携方法を聞かれるので今回は Connect to Gitから Github を選択します。
連携したい Github アカウントとリポジトリを選択します。
今回は本記事用に作成した frontend-assort-2024というリポジトリを選択し、「Begin setup」からセットアップを開始します。
Cloudflare プロジェクト設定
プロジェクト名と対象ブランチの選択
任意のプロジェクト名を入力し、自動デプロイの対象ブランチを選択します。
今回は frontend-assort-2024-qwikというプロジェクト名でmainブランチを自動デプロイ対象に選択します。
ビルド設定
npm run build
dist
なし
モノレポの場合 (省略可能)
本アプリケーションで使用しているTurborepoとpnpmを用いた設定例です。
pnpm build
dist
apps/qwik-client
デプロイ
ここまでの設定を完了し"Save and Deploy"を押すとデプロイ処理が実行されます。
数分程度待ち、無事にデプロイが完了したことを確認できました。
もしデプロイが完了しているので何も表示されない場合は、ビルド対象ファイルが合っているか・重複したソースが無いかご確認ください
おわりに
cloudflare-pages アダプターの設定コマンドを実行するだけで、コードの追加・修正なしで簡単に Cloudflare Pages へデプロイすることができました。
Qwik は最適化されるデプロイ先の候補も多く、設定も基本的に自動で完了するので、
ビルド周りも力が入っているなと感じました。
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 22 記事目です。
次の記事はこちら フロントエンドの世界 2024: 4 つのフレームワークを Turborepo でモノレポ管理 (おまけ)