【qwik】qwikを動かすdocker環境の構築手順

はじめに

最近注目されているフロンドエンド、qwikをdocker環境で作ります。
公式の手順は下記にありますが、dockerで動かそうとしたとき若干苦戦したのでメモです。
Getting Started Qwikly

手順

1. docker-compose.ymlの準備

version: '3.9'

services:
  qwik:
    image: node:latest
    ports:
      - "5173:5173"
    volumes:
      - .:/app
    tty: true

imageはnodeの最新版を、qwikは5173ポートを使用するのでつなげておきます。
仮想環境での開発は、/app/qwik-appディレクトリを使用する想定です。

2. qwikのインストール

1. 仮想環境にログインします

$ docker compose up -d
$ docker compose exec qwik bash

2. qwikをインストールします

$ cd /app
# qwikのインストール。表示される選択肢は、お好みで
$ npm create qwik@latest
$ cd /app/qwik-app
$ npm install

3. 手直し

1. vite --openをやめる

package.json

  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.types": "tsc --incremental --noEmit",
    "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
--    "preview": "qwik build preview && vite preview --open",
++    "preview": "qwik build preview && vite preview",
--    "start": "vite --open --mode ssr",
++    "start": "vite --mode ssr",
    "qwik": "qwik"
  },

仮想環境はCLI環境なので、ブラウザを開こうとしたらエラーが発生します。
ので、そういった挙動は削除しておきます。

2. ホスト環境からアクセスできるようにする

package.json

  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.types": "tsc --incremental --noEmit",
    "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
--    "start": "vite --mode ssr",
++    "start": "vite --mode ssr --host=0.0.0.0",
    "qwik": "qwik"
  },

仮想環境内からだけアクセスできてもしょうがないので、
外(ホストサーバ)からでもアクセスできるように設定します。

3. 完成

サーバを立ち上げ、ホスト環境から確認します

1. サーバ立ち上げ

$ npm start

2. アクセス

ホスト環境から、ブラウザを使い下記にアクセス
http://localhost:5173/