Qwikを素振りしてCloudflare Pagesにデプロイしてみる
はじめに
最近何かと話題の Qwik をいったん素振りとして Cloudflare Pages にデプロイして満足してみました。
こういうのは思いついたら試すのが大事ですね。
Qwikプロジェクトを作る
今回の成果物はこちらです。
以下のページを見ながらやったのですが、 npm run qwik add の部分がなかったからなのかビルドは成功するのですが、ページにアクセスしても何も表示されなかったので、そこも記載しています。
$ npm create qwik@latest
npm install もするか聞かれたので Yes としました。
No を選択した場合は以下のように npm install してください。
cd [whatever you named the project]
npm install
npm start
コード量が少ないのもありますが、 Vite が爆速すぎて感動してしまいました。
npm start で http://localhost:5173/ が開いてくれるので、なんだかこの感じ懐かしいです。
IntegrationとしてのSSGビルドを追加する
$ npm run qwik add
で、以下の SSG を選択して追加します。
Static Generator (SSG)
このあたりは、 Getting Started - Qwik こちらを見てやり方を知りました。
Cloudflare Pagesにプロジェクトを作成する
以下のように設定をして、デプロイを開始してみました。
Configuration option Value
Production branch main
Framework preset Qwik
Build command npm run build
Build directory dist
と思ったら以下のようなエラー。
19:08:52.931 SyntaxError: Unexpected token '?'
19:08:52.931 at wrapSafe (internal/modules/cjs/loader.js:1054:16)
19:08:52.931 at Module._compile (internal/modules/cjs/loader.js:1102:27)
19:08:52.932 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
19:08:52.932 at Module.load (internal/modules/cjs/loader.js:986:32)
19:08:52.932 at Function.Module._load (internal/modules/cjs/loader.js:879:14)
19:08:52.932 at Module.require (internal/modules/cjs/loader.js:1026:19)
19:08:52.932 at require (internal/modules/cjs/helpers.js:72:18)
19:08:52.932 at Object.<anonymous> (/opt/buildhome/repo/node_modules/@builder.io/qwik/qwik.cjs:2:14)
19:08:52.932 at Module._compile (internal/modules/cjs/loader.js:1138:30)
19:08:52.932 at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
19:08:52.936 npm ERR! code ELIFECYCLE
19:08:52.936 npm ERR! errno 1
19:08:52.937 npm ERR! my-qwik-basic-starter@ build: `qwik build`
19:08:52.937 npm ERR! Exit status 1
19:08:52.937 npm ERR!
19:08:52.937 npm ERR! Failed at the my-qwik-basic-starter@ build script.
19:08:52.937 npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
19:08:52.946
19:08:52.947 npm ERR! A complete log of this run can be found in:
19:08:52.947 npm ERR! /opt/buildhome/.npm/_logs/2022-10-25T10_08_52_941Z-debug.log
19:08:52.955 Failed: build command exited with code: 1
19:08:53.816 Failed: an internal error occurred
Build command が間違えていました。
$ npm run build && npm run ssg
とする必要があるようです。
さらに、 Cloudflare がデフォルトで使う node.js のバージョンが低いので環境変数で調整していきます。
Currently, Cloudflare uses Node 12.18.0 in the Pages build environment, but Qwik requires a newer node version >14.0.0 to build on Cloudflare Pages. To set the Node version, go to Settings in your Pages project > Environment Variables > Production and add NODE_VERSION in your Production option with a value of 14 or greater.
と書いてあったので、環境変数に NODE_VERSION: 14 を入れてデプロイを再試行しました。
できた！
プロジェクトの URL と、
git push ごとの URL もできて、これは最近よくありますが、ありがたいかぎりです。
あとがき
最近ジワジワきている Resumable という概念をちょっとずつ理解し始めているのですが、まだ全然わかっていません。
ハイドレーションしないけど React っぽく扱えるという新しいものです。
こういうのドキドキしますよね。
ではでは。
参考記事
Discussion