はじめに

はじめまして、WEB フロントエンドエンジニアの nuintee です。

この度かねてより関心があった Qwik に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。

Qwik に少しでも興味のある方は、ぜひご覧ください。

フロントエンドの世界 2024 について

「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

もくじ

はじめに
フロントエンドの世界 2024 について
もくじ
デプロイ先
アダプター
コードの修正
ローカル環境の立ち上げ確認
Cloudflare プロジェクトの追加
Github リポジトリとの連携
Cloudflare プロジェクト設定
おわりに

デプロイ先

Qwikは以下の中から選んだランタイムに対し、最適化されたビルドを行うことができます。

今回は元々気になっていた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ブランチを自動デプロイ対象に選択します。

ビルド設定

Build command

npm run build

Build output directory

dist

Root Directory

なし

モノレポの場合 (省略可能)

本アプリケーションで使用しているTurborepoとpnpmを用いた設定例です。

Build command

pnpm build

Build output directory

dist

Root Directory

apps/qwik-client

デプロイ

ここまでの設定を完了し"Save and Deploy"を押すとデプロイ処理が実行されます。
数分程度待ち、無事にデプロイが完了したことを確認できました。

もしデプロイが完了しているので何も表示されない場合は、ビルド対象ファイルが合っているか・重複したソースが無いかご確認ください

おわりに

cloudflare-pages アダプターの設定コマンドを実行するだけで、コードの追加・修正なしで簡単に Cloudflare Pages へデプロイすることができました。

Qwik は最適化されるデプロイ先の候補も多く、設定も基本的に自動で完了するので、
ビルド周りも力が入っているなと感じました。

また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！

この記事はフロントエンドの世界 Advent Calendar 2024の 22 記事目です。
次の記事はこちらフロントエンドの世界 2024: 4 つのフレームワークを Turborepo でモノレポ管理 (おまけ)