19. Деплой

Qwik City поддерживает деплой на множество платформ через систему адаптеров. Каждый адаптер оптимизирует приложение для конкретной среды исполнения.

Адаптеры деплоя

# Cloudflare Pages/Workers
npm run qwik add cloudflare-pages

# Vercel Edge Functions
npm run qwik add vercel-edge

# Netlify Edge Functions
npm run qwik add netlify-edge

# Node.js (Express/Fastify)
npm run qwik add express
npm run qwik add fastify

# Статический сайт (SSG)
npm run qwik add static

Cloudflare Pages

Cloudflare — рекомендуемая платформа для Qwik. Бесплатный tier очень щедрый, и Workers работают на edge по всему миру.

adapters/cloudflare-pages/vite.config.ts

import { cloudflarePagesAdapter } from '@builder.io/qwik-city/adapters/cloudflare-pages/vite';
import { extendConfig } from '@builder.io/qwik-city/vite';
import baseConfig from '../../vite.config';

export default extendConfig(baseConfig, () => ({
  build: {
    ssr: true,
    rollupOptions: { input: ['src/entry.cloudflare-pages.tsx'] },
  },
  plugins: [cloudflarePagesAdapter()],
}));

# Деплой на Cloudflare Pages
npm run build
npx wrangler pages deploy dist

wrangler.toml:

name = "my-qwik-app"
pages_build_output_dir = "dist"
compatibility_date = "2024-01-01"

[vars]
API_URL = "https://api.example.com"

Vercel Edge Functions

adapters/vercel-edge/vite.config.ts

import { vercelEdgeAdapter } from '@builder.io/qwik-city/adapters/vercel-edge/vite';
import { extendConfig } from '@builder.io/qwik-city/vite';
import baseConfig from '../../vite.config';

export default extendConfig(baseConfig, () => ({
  build: {
    ssr: true,
    rollupOptions: { input: ['src/entry.vercel-edge.tsx'] },
  },
  plugins: [vercelEdgeAdapter()],
}));

vercel.json:

{
  "framework": "qwik",
  "buildCommand": "npm run build",
  "outputDirectory": ".vercel/output"
}

Node.js сервер

adapters/express/vite.config.ts

import { nodeServerAdapter } from '@builder.io/qwik-city/adapters/node-server/vite';
import { extendConfig } from '@builder.io/qwik-city/vite';
import baseConfig from '../../vite.config';

export default extendConfig(baseConfig, () => ({
  build: {
    ssr: true,
    rollupOptions: { input: ['src/entry.express.tsx'] },
  },
  plugins: [nodeServerAdapter({ name: 'express' })],
}));

// Запуск
// server/express.js (автогенерируется)
import express from 'express';
import { handle } from '../server/entry.express';

const app = express();
app.use(handle);
app.listen(3000, () => console.log('Сервер запущен на :3000'));

Docker деплой

# Dockerfile
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runner
WORKDIR /app
COPY --from=builder /app/server ./server
COPY --from=builder /app/dist ./dist
COPY package*.json ./
RUN npm ci --only=production

EXPOSE 3000
CMD ["node", "server/entry.express.js"]

Переменные окружения

// В routeLoader$ или routeAction$
export const useConfig = routeLoader$(async ({ env }) => {
  const apiKey = env.get('API_KEY');      // Серверная переменная
  const publicUrl = env.get('PUBLIC_API_URL');  // Публичная

  return { publicUrl };
});

.env.local

API_KEY=secret-key
PUBLIC_API_URL=https://api.example.com
VITE_APP_NAME=MyQwikApp  # Доступна в клиентском коде через import.meta.env

Playground: Конфигуратор деплоя