はじめに
はじめまして、WEB フロントエンドエンジニアの nuintee です。
この度かねてより関心があった SolidJS に入門する覚悟が出来たので、
その学習過程をアドベントカレンダーにしてみました。
SolidJS に少しでも興味のある方は、ぜひご覧ください。
フロントエンドの世界 2024 について
「フロントエンドの世界 2024」は普段 Next.js を書いている筆者が、同じフロントエンドライブラリである Svelte(Kit), Remix ,SolidJS, Qwik(City)の 4 つにアソート形式で触れ、理解を深めていく様子を収めたアドベントカレンダーです。
もくじ
- はじめに
- フロントエンドの世界 2024 について
- もくじ
- デプロイ先
- コードの修正
- Cloudflare プロジェクトの追加
- Github リポジトリとの連携
- Cloudflare プロジェクト設定
- おわりに
デプロイ先
SolidJSでは主に以下のプロバイダーに対して簡単にデプロイが行えます。
今回はも元々興味があった Cloudflare を選択しました。
(参考: Deploy your app)
コードの修正
CSR アプリケーション・SSG アプリケーションを Cloudflare Pages へデプロイする場合、基本的にコード側で追加の設定は不要です。
※ もし Solid Start を利用している場合は公式ドキュメントに従って設定を行ってください。
Cloudflare プロジェクトの追加
右上の「+ Add」から新しい Pages プロジェクトを追加します。
Github リポジトリとの連携
デプロイアセットの連携方法を聞かれるので今回は Connect to Gitから Github を選択します。
連携したい Github アカウントとリポジトリを選択します。
今回は本記事用に作成した frontend-assort-2024というリポジトリを選択し、「Begin setup」からセットアップを開始します。
Cloudflare プロジェクト設定
プロジェクト名と対象ブランチの選択
任意のプロジェクト名を入力し、自動デプロイの対象ブランチを選択します。
今回は frontend-assort-2024-solidjsというプロジェクト名でmainブランチを自動デプロイ対象に選択します。
ビルド設定
npm run build
dist
なし
モノレポの場合 (省略可能)
本アプリケーションで使用しているTurborepoとpnpmを用いた設定例です。
pnpm build
dist
apps/solid-client
デプロイ
ここまでの設定を完了し"Save and Deploy"を押すとデプロイ処理が実行されます。
数分程度待ち、無事にデプロイが完了したことを確認できました。
おわりに
追加設定なしで非常に簡単に SolidJS アプリケーションを Cloudflare Pages にデプロイすることができました。
軽量かつシンプルな SolidJS の特性と合わせると、とりあえず動くものを公開したいと言ったタイミングで、非常に高速なアプリケーション開発サイクルが回せそうだなと思いました。
また本シリーズを通してお気軽にコメントお待ちしております。
また完走賞も目指しているので是非応援お願いします！
この記事は フロントエンドの世界 Advent Calendar 2024の 17 記事目です。
次の記事はこちら Qwik(City)の世界: Qwik とは？ #1