SolidJSの世界: ビルドとデプロイ #5


## はじめに

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

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

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

## フロントエンドの世界 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-プロジェクト設定)
- [おわりに](#おわりに)

## デプロイ先

`SolidJS`では主に以下のプロバイダーに対して簡単にデプロイが行えます。

- [Firebase](https://firebase.google.com/?hl=ja)
- [AWS via Flightcontrol](https://www.flightcontrol.dev/docs)
- [AWS via SST](https://sst.dev/docs/)
- [Netlify](https://www.netlify.com/)
- [Railway](https://docs.railway.com/)
- [Vercel](https://vercel.com/)
- [Cloudflare](https://www.cloudflare.com/)
- [Stormkit](https://www.stormkit.io/docs/welcome/getting-started)
- [Zerops](https://docs.zerops.io/)

今回はも元々興味があった `Cloudflare` を選択しました。

(参考: [Deploy your app](https://docs.solidjs.com/guides/deploying-your-app))

## コードの修正

CSR アプリケーション・SSG アプリケーションを Cloudflare Pages へデプロイする場合、基本的にコード側で追加の設定は不要です。

※ もし [Solid Start](https://docs.solidjs.com/solid-start) を利用している場合は[公式ドキュメント](https://developers.cloudflare.com/pages/framework-guides/deploy-a-solid-site/)に従って設定を行ってください。

## 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-solidjs`というプロジェクト名で`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/solid-client
```

</details>

![スクリーンショット 2024-12-16 0.45.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3294810/45d26c9e-a7cd-b56b-89e2-eaeccf1793fa.png)

### デプロイ

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

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

## おわりに

追加設定なしで非常に簡単に SolidJS アプリケーションを Cloudflare Pages にデプロイすることができました。

軽量かつシンプルな SolidJS の特性と合わせると、とりあえず動くものを公開したいと言ったタイミングで、非常に高速なアプリケーション開発サイクルが回せそうだなと思いました。

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

---

この記事は [フロントエンドの世界 Advent Calendar 2024](https://qiita.com/advent-calendar/2024/frontend-assort-2024)の 17 記事目です。
次の記事はこちら [Qwik(City)の世界: Qwik とは？ #1](https://qiita.com/nuinteedev/private/b9ae999aa1ea425f4ddc)