Nasazení do produkce

Ve vývoji máme často zapnuté různé debug nástroje, hot reload, nepřehledný kód... to všechno chceme před produkcí odstranit. V této kapitole se podíváme na to, jak připravit React aplikaci na nasazení, jak ji zabalit do Dockeru a kam ji následně nahrát.

Build nástroje

Konfigurace Vite

Vite používá vite.config.ts soubor, kde můžeš snadno upravit produkční build.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'esbuild',
    sourcemap: false,
  }
})

Build spustíš jednoduše:

npm run build

Tím vznikne složka dist/, která obsahuje finální web.

Docker pro nasazení

Pro nasazení na vlastní server nebo cloud se často používá Docker. Níže jsou ukázky Dockerfile pro Vite i Next.js aplikaci.

Dockerfile pro Vite

FROM node:20 AS build
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80

Pokud používáš React bez backendu, Vite build je čistě statický web – ideální pro hostování přes CDN.

Dockerfile pro Next.js

FROM node:20 AS build
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=build /app ./
ENV NODE_ENV production
EXPOSE 3000
CMD ["npm", "start"]

Hosting a CI/CD

Pokud si ale nevíš rady s dockerem můžu Vám doporučit Vercel, Netlify nebo Cloudflare Pages. Všechny tyto služby podporují Git-based deploy tudíš stačí pouze připojit GitHub účet a o zbytek se postarají oni.

Bundle velikost a analýza

A na závěr malý bonus pokud jste si vybaril nexjs, můžete použít next-bundle-analyzer který vám umožní lehce si zobrazit velikost vašich závislostí. Může vám to pomoct při optimalizaci.

npm install @next/bundle-analyzer

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
module.exports = withBundleAnalyzer({});

Spustíš:

ANALYZE=true npm run build