QwikをDocker環境で構築する

Qwikとは

Qwikは、新しいタイプのWebフレームワークで、アプリケーションの規模や複雑さに関係なく、瞬時にロードされるWebアプリケーションを提供できます。Qwikを使用することで、どんなに複雑なアプリケーションでも約1kbのJavaScriptで起動し、スケールに応じた一貫したパフォーマンスを実現できます。

動作環境

Rails 7 +MySQLのDocker環境構築 で構築した環境にFrontとして追加します。

環境構築

compose.ymlにFront環境の追加

compose.yml

services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      TZ: "Asia/Tokyo"
    volumes:
      - ./db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./db/data:/var/lib/mysql
    ports:
      - '3306:3306'
    restart: always
  api:
    build:
      context: .
      dockerfile: ./api/Dockerfile
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -e development -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/api
    ports:
      - '3000:3000'
    depends_on:
      - db
    stdin_open: true
    tty: true
+ front:
+   image: node:20
+   volumes:
+     - ./front:/app/front
+   ports:
+     - 5173:5173
+   stdin_open: true
+   tty: true

Qwikアプリケーションの作成

ターミナル

# コンテナの作成と起動
docker compose up -d front
# 実行中のコンテナに入る
docker compose exec front bash
# インストールディレクトリに移動
cd /app/front
# Qwikのインストール
npm create qwik@latest

# 実行結果
Need to install the following packages:
create-qwik@1.5.7
Ok to proceed? (y) y

> npx
> create-qwik

      ............
    .::: :--------:.
   .::::  .:-------:.
  .:::::.   .:-------.
  ::::::.     .:------.
 ::::::.        :-----:
 ::::::.       .:-----.
  :::::::.     .-----.
   ::::::::..   ---:.
    .:::::::::. :-:.
     ..::::::::::::
             ...::::

┌  Let's create a  Qwik App  ✨ (v1.5.7)
│
◇  Where would you like to create your new project? (Use '.' or './' for current directory)
│  ./
│
●  Creating new project in  /app/front  ... 🐇
│
◇  Select a starter
│  Basic App (Qwik City + Qwik)
│
◇  Would you like to install npm dependencies?
│  Yes
│
◇  Initialize a new git repository?
│  No
│
◇  Finishing the install. Wanna hear a joke?
│  Yes
│
◇  🙈 ───────────────────────────────────────────────╮
│                                                    │
│  Why doesn't Hollywood make more Big Data movies?  │
│  Had a byte!                                       │
│                                                    │
├────────────────────────────────────────────────────╯
│
◇  App Created 🐰
│
◐  Installing npm dependencies.│
■  EXDEV: cross-device link not permitted, rename '/app/.create-qwik-rdkd57d57a/node_modules' -> '/app/front/node_modules'
│  
│  
│
■   npm install failed 
│   You might need to run "npm install" manually inside the root of the project.
│  
│  
◇  Failed to install npm dependencies 📋
│
◇  Result ────────────────────────────────────────────────╮
│                                                         │
│  🦄  Success!                                           │
│                                                         │
│  🤍 Integrations? Add Netlify, Cloudflare, Tailwind...  │
│     npm run qwik add                                    │
│                                                         │
│  📄 Relevant docs:                                      │
│     https://qwik.dev/docs/getting-started/              │
│                                                         │
│  💬 Questions? Start the conversation at:               │
│     https://qwik.dev/chat                               │
│     https://twitter.com/QwikDev                         │
│                                                         │
│  👀 Presentations, Podcasts and Videos:                 │
│     https://qwik.dev/media/                             │
│                                                         │
│  🐰 Next steps:                                         │
│     npm install                                         │
│     npm start                                           │
│                                                         │
│                                                         │
├─────────────────────────────────────────────────────────╯
│
└  Happy coding! 🎉

npm notice
npm notice New minor version of npm available! 10.7.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice To update run: npm install -g npm@10.8.1
npm notice

# パッケージのインストール
npm install

Dockerfileの準備

front/Dockerfile

FROM node:20
ENV TZ Asia/Tokyo

RUN apt update && apt install -y xdg-utils --fix-missing
COPY ./front /app/front
RUN npm install -g npm@10.8.1 
WORKDIR /app/front
RUN npm install

compose.yml修正

compose.yml

services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      TZ: "Asia/Tokyo"
    volumes:
      - ./db/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./db/data:/var/lib/mysql
    ports:
      - '3306:3306'
    restart: always
  api:
    build:
      context: .
      dockerfile: ./api/Dockerfile
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -e development -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/api
    ports:
      - '3000:3000'
    depends_on:
      - db
    stdin_open: true
    tty: true
  front:
-   image: node:20
+   build:
+     context: .
+     dockerfile: ./front/Dockerfile
    volumes:
      - ./front:/app/front
    ports:
      - 5173:5173
+   command:
+     sh -c 'npm run dev -- --host 0.0.0.0'
+   environment:
+     - CHOKIDAR_USEPOLLING=true
    stdin_open: true
    tty: true

再構築

docker compose build front
docker compose up -d front

ブラウザでhttp://localhost:5173/にアクセスしてページが表示されるのを確認