React

Dockerfile

Por estandar se define los puertos de las aplicaciones frontend como 9000

Packages

Las imagenes base contienen la configuración para poder autenticarse con GitHub Packages en las organizaciones (@customer-experience, @operations-innovation y @architecture-it)

Runtime Environment Variables

Debemos asegurarnos de que nuestro proyecto utilice las variables en tiempo de ejecución por lo tanto debemos configurar la librería @architecture-it/react-env que nos construye en tiempo de ejecución las variables del ambiente.

Info

Implementación.

---

Archivos Dockerfile

ViteNextJS

Dockerfile

FROM ghcr.io/architecture-it/react:node-20 AS builder
WORKDIR /app

COPY . .

RUN \
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
elif [ -f package-lock.json ]; then npm ci --no-audit --silent --no-optional; \
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
else \
    echo "ERROR: Falta archivo lockfile. Ver más en https://architecture-it.github.io/docs/Platform/Front/#manejo-de-dependencias"; \
    exit 1; \
fi

RUN yarn build

FROM ghcr.io/architecture-it/nginx:latest

COPY --from=builder --chown=nginx:nginx /app/dist .

CMD ["/bin/sh", "-c", "react-env --prefix VITE -d ./ -- && nginx -g \"daemon off;\""]

Version Requerida >=12.2.3

configura los permisos sobre los archivos necesarios para poder hacer ISR y uso de las mejora en performance de las imagenes efectivamente.

• 1 Debemos garantizar que tiene la siguiente configuración (output en standalone), dentro de next.config.js.

next.config.js

const path = require("path");

/** @type {import('next').NextConfig} */
module.exports = {
webpack: (config) => {
    config.resolve.modules.push(path.resolve("./src"));

    return config;
},
output: "standalone",
};

• 2 El Dockerfile debe ser:

Dockerfile

FROM ghcr.io/architecture-it/react:node-18 AS deps
WORKDIR /app

RUN apk add --no-cache libc6-compat

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

RUN \
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
elif [ -f package-lock.json ]; then npm ci --no-progress --silent --maxsockets 1; \
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
else \
    echo "ERROR: Falta archivo lockfile. Ver más en https://architecture-it.github.io/docs/Platform/Front/#manejo-de-dependencias"; \
    exit 1; \
fi

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN yarn build

FROM ghcr.io/architecture-it/nextjs:latest AS runner

COPY --from=builder /app/next.config.js ./
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

# WORKAROUND si se tiene problemas con permisos, (Evitar)
# RUN touch ./public/__ENV.js && chmod 777 ./public/__ENV.js

CMD ["/bin/sh", "-c", "react-env --prefix NEXT_PUBLIC -- && node server.js"]

Deprecated

Dockerfile

FROM ghcr.io/architecture-it/react:node-16 AS deps
WORKDIR /app

RUN apk add --no-cache libc6-compat

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

RUN \
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
elif [ -f package-lock.json ]; then npm ci --no-progress --silent --maxsockets 1; \
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
else echo "Lockfile not found." && exit 1; \
fi

FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN yarn build

FROM ghcr.io/architecture-it/nextjs:latest AS runner

COPY --from=builder /app/next.config.js ./
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
COPY --from=builder /app/package.json ./package.json
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next

CMD ["/bin/sh", "-c", "react-env --prefix NEXT_PUBLIC -- && npm run start"]

---

CRA Deprecated

Info

Incluye la configuración de npm para registrarse en los scopes de: fontawesome @customer-experience @architecture-it y @operations-innovation

pnpm yarn npm

FROM ghcr.io/architecture-it/react:node-18 AS deps
WORKDIR /app

RUN apk add --no-cache libc6-compat

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

RUN \
if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
elif [ -f package-lock.json ]; then npm ci --no-progress --silent --maxsockets 1; \
elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
else \
    echo "ERROR: Falta archivo lockfile. Ver más en https://architecture-it.github.io/docs/Platform/Front/#manejo-de-dependencias"; \
    exit 1; \
fi

FROM ghcr.io/architecture-it/react:node-18 AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN yarn build

FROM ghcr.io/architecture-it/nginx:latest
COPY --from=builder /app/build .
# WORKAROUND si se tiene problemas con permisos, (Evitar)
# RUN touch ./public/__ENV.js && chmod 777 ./public/__ENV.js

CMD ["/bin/sh", "-c", "react-env -d ./ -- && nginx -g \"daemon off;\""]

npm

FROM ghcr.io/architecture-it/react:node-16 as builder
WORKDIR /app
COPY . .
RUN npm ci --no-audit --silent --no-optional
RUN npm run build && \
    npm install --production --ignore-scripts --prefer-offline

FROM ghcr.io/architecture-it/nginx:latest
COPY --from=builder /app/build .

# WORKAROUND si se tiene problemas con permisos, (Evitar)
# RUN touch __ENV.js && chmod 777 __ENV.js

CMD ["/bin/sh", "-c", "react-env -d ./ -- && nginx -g \"daemon off;\""]

Debugging

Para poder efectuar debugging se puede habilitar el modo verboso en el paso dónde se requiera, de npm ci (install) o de npm run build, para ello sólo debemos agregar --verbose y quitar el flag --silent y --log-level si este se encontrara.

Lineas a cambiar

RUN npm ci --no-audit --silent --no-progress --log-level=error
RUN npm run build && \ 
    npm install --production --ignore-scripts --prefer-offline

por

RUN npm ci --no-audit --no-progress --verbose
RUN npm run build --verbose && \ 
    npm install --production --ignore-scripts --prefer-offline

---