🉐

Qwikを素振りしてCloudflare Pagesにデプロイしてみる

2022/10/25に公開約3,800字

はじめに

https://github.com/BuilderIO/qwik

最近何かと話題の Qwik をいったん素振りとして Cloudflare Pages にデプロイして満足してみました。

こういうのは思いついたら試すのが大事ですね。

Qwikプロジェクトを作る

今回の成果物はこちらです。

https://github.com/hisasann/qwik-app

以下のページを見ながらやったのですが、 npm run qwik add の部分がなかったからなのかビルドは成功するのですが、ページにアクセスしても何も表示されなかったので、そこも記載しています。

https://developers.cloudflare.com/pages/framework-guides/deploy-a-qwik-site/

$ npm create qwik@latest

npm install もするか聞かれたので Yes としました。
No を選択した場合は以下のように npm install してください。

cd [whatever you named the project]
npm install
npm start

コード量が少ないのもありますが、 Vite が爆速すぎて感動してしまいました。

https://twitter.com/hisasann/status/1584848072546611200

npm starthttp://localhost:5173/ が開いてくれるので、なんだかこの感じ懐かしいです。

IntegrationとしてのSSGビルドを追加する

$ npm run qwik add

で、以下の SSG を選択して追加します。

Static Generator (SSG)

このあたりは、 Getting Started - Qwik こちらを見てやり方を知りました。

Cloudflare Pagesにプロジェクトを作成する

https://developers.cloudflare.com/pages/framework-guides/deploy-a-qwik-site/#deploying-with-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 と、

https://qwik-app-bj3.pages.dev/

git push ごとの URL もできて、これは最近よくありますが、ありがたいかぎりです。

https://6be7358c.qwik-app-bj3.pages.dev/

あとがき

最近ジワジワきている Resumable という概念をちょっとずつ理解し始めているのですが、まだ全然わかっていません。

ハイドレーションしないけど React っぽく扱えるという新しいものです。

こういうのドキドキしますよね。

ではでは。

参考記事

https://www.docswell.com/s/kawamataryo/K4GW15-qwik-resumable?utm_source=twitter&utm_medium=social&utm_campaign=singlepage#p1

https://lealog.hateblo.jp/entry/2022/01/11/142734

https://zenn.dev/aiji42/articles/fafa354f79660d

https://lealog.hateblo.jp/entry/2022/02/02/094743

Discussion

ログインするとコメントできます