Qwik(City)の世界: ビルドとデプロイ #5


## はじめに

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

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

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

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

「[フロントエンドの世界 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)」は普段 [`Next.js`](https://nextjs.org/) を書いている筆者が、同じフロントエンドライブラリである [`Svelte(Kit)`](https://svelte.jp/docs/introduction), [`Remix`](https://remix.run/docs/en/main) ,[`SolidJS`](https://docs.solidjs.com/), [`Qwik(City)`](https://qwik.dev/)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。

![frontend-assort-2024-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/7666d209-1aef-9ce5-c298-d8e60847e830.png)

## もくじ

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

## デプロイ先

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

- [Azure SWA](https://qwik.dev/docs/deployments/azure-swa/)
- [AWS Lambda](https://qwik.dev/docs/deployments/aws-lambda/)
- [Firebase Hosting](https://qwik.dev/docs/deployments/firebase/)
- [Google Cloud Run](https://qwik.dev/docs/deployments/gcp-cloud-run/)
- [Cloudflare Pages](https://qwik.dev/docs/deployments/cloudflare-pages/)
- [Deno](https://qwik.dev/docs/deployments/deno/)
- [Bun](https://qwik.dev/docs/deployments/bun/)
- [Netlify Edge](https://qwik.dev/docs/deployments/netlify-edge/)
- [Node](https://qwik.dev/docs/deployments/node/)
- [Vercel Edge](https://qwik.dev/docs/deployments/vercel-edge/)
- [SSG 環境](https://qwik.dev/docs/deployments/static/)

今回は元々気になっていた`Cloudflare Pages`を選択しました。

(参考: [Deployments](https://qwik.dev/docs/deployments/))

## アダプター

[Cloudflare Pages](https://pages.cloudflare.com/) へのビルド・デプロイ用 アダプターを設定します。

(参考: [Cloudflare Pages Adapter](https://qwik.dev/docs/deployments/cloudflare-pages/))

```shell
# turborepoを使用している場合 (ルートで実行)
pnpm --filter qwik-client run qwik add cloudflare-pages
```

```shell
# 通常インストール
npm run qwik add cloudflare-pages
```

### 自動セットアップの選択

自動で cloudflare-pages デプロイに向けた設定を行うか聞かれるので、「Yes」を選択します。

```shell:実行ログ全文
│  📜 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
└
```

### 実行ログ

```shell:実行完了ログ
> 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 のアダプター追加コマンドを実行済みの場合、自動で必要な設定が行われるので基本的に手動でコード追加や修正は不要です。

## ローカル環境の立ち上げ確認

### ビルド

立ち上げ前にビルドを行います。
アダプターのセットアップ時にビルドコマンドがいくつか追加されている事がわかると思います。

```shell
# turborepoの場合
pnpm --filter qwik-client build
```

```shell
# 通常ビルド
npm run build
```

### 立ち上げ

cloudflare-pages アダプターのセットアップ時に [wrangler](https://developers.cloudflare.com/workers/wrangler/commands/)による serve コマンドが追加されているので、そちらを使用してビルドファイルの立ち上げ確認を行います。

```shell
# turborepoを使用している場合 (ルートで実行)
pnpm --filter qwik-client serve
```

```shell
# 通常立ち上げ
npm run serve
```

http://localhost:8788/ で立ち上がれば成功です。

## Cloudflare プロジェクトの追加

右上の「+ Add」から新しい `Pages` プロジェクトを追加します。

![cloudflare-add-pages.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/2ec21aef-6f81-be0e-82bd-94ce1c62955b.png)

## Github リポジトリとの連携

デプロイアセットの連携方法を聞かれるので今回は `Connect to Git`から `Github` を選択します。

![スクリーンショット 2024-11-27 0.51.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/ed3153b9-6517-f01b-7dc2-d26d10d493cc.png)

連携したい `Github` アカウントとリポジトリを選択します。

今回は本記事用に作成した `frontend-assort-2024`というリポジトリを選択し、「Begin setup」からセットアップを開始します。

![cloudflare-github.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/ecfb6c05-afa9-7de6-9229-8eba921b6e8b.png)

## Cloudflare プロジェクト設定

### プロジェクト名と対象ブランチの選択

任意のプロジェクト名を入力し、自動デプロイの対象ブランチを選択します。

今回は `frontend-assort-2024-qwik`というプロジェクト名で`main`ブランチを自動デプロイ対象に選択します。

### ビルド設定

```shell:Build command
npm run build
```

```shell:Build output directory
dist
```

```shell:Root Directory
なし
```

<details>
  <summary>モノレポの場合 (省略可能)</summary>

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

```shell:Build command
pnpm build
```

```shell:Build output directory
dist
```

```shell:Root Directory
apps/qwik-client
```

</details>

![スクリーンショット 2024-12-21 17.17.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/5b9b69ec-a7f4-1355-4b86-8628362db2b8.png)

### デプロイ

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

https://frontend-assort-2024-qwik.pages.dev/

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

## おわりに

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

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

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

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 22 記事目です。
次の記事はこちら [フロントエンドの世界 2024: 4 つのフレームワークを Turborepo でモノレポ管理 (おまけ)](https://qiita.com/nuinteedev/private/16e32b0518bf2409a2b7)