Sites estáticos e SPAs

Frameworks como Vite, Create React App, Vue, Angular e Astro (modo estático) geram uma pasta de arquivos HTML, CSS e JavaScript. Na Zenifra, um servidor HTTP leve entrega essa pasta.

Qual caminho escolher

Opção 1: GitHub com o runtime Node.js

npm install serve

A opção -s faz o serve responder com o index.html para rotas desconhecidas, o que é necessário para SPAs com React Router, Vue Router ou Angular Router. Em sites com várias páginas HTML, como Astro, remova o -s.

Variáveis de ambiente em sites estáticos

Variáveis como VITE_API_URL são embutidas no JavaScript durante a build. Na Zenifra, as variáveis do projeto existem na build, então funcionam normalmente. Depois de alterar uma delas, faça uma nova publicação para gerar outro pacote. Nunca coloque segredos nessas variáveis: elas ficam visíveis no navegador.

Opção 2: Imagem OCI com NGINX

Use a imagem oficial do NGINX, que escuta na porta 80:

FROM node:22-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL
RUN npm run build

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80

server {
  listen 80;
  root /usr/share/nginx/html;

  location /assets/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  location / {
    try_files $uri $uri/ /index.html;
  }
}

Construa, publique no seu registry e crie um projeto Imagem OCI com Porta 80. Veja Dockerfiles prontos para os comandos de build e push e Deploy via imagem OCI para os campos do console.

Domínio e HTTPS

O projeto recebe uma URL *.clients.zenifra.com com HTTPS. Para usar o seu domínio, siga Domínio personalizado.

Problemas comuns

Próximos passos

• Next.js para sites com renderização no servidor
• Ambientes de Preview
• Guias por framework