Static websites

Static websites are all the rage when it comes to fast-loading frontend applications. They're cheap to operate because they can easily be cached by your favorite CDNs for edge distribution.

In this guide, you'll learn all about testing and debugging static websites using Architect and employing common CDNs for improved production performance. If you want to skip the tutorial and start from a working project, feel free to run architect init to have everything done for you.

Creating the service

The interesting thing about developing static sites is that they're never static when they're actively being worked on. If you're making code changes, the whole site needs to be recompiled before it can be rendered.

Fortuntely, Architect makes it easy for developers to create components with different behavior for dev and production deployments. Developers can use different dockerfiles or commands using the debug block to facilitate hot-reloading in their favorite languages and frameworks.

Select a tabarchitect.ymlDockerfileDockerfile.dev

services:
  api:
    build:
      context: ./
    interfaces:
      main:
        port: 8080
    debug:
      build:
        dockerfile: Dockerfile.dev
      volumes:
        src:
          mount_path: /app/src
          host_path: ./src

# Reference from nextjs repo: https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile

# Install dependencies only when needed
FROM node:16-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json package-lock.json ./
RUN npm ci

# Rebuild the source code only when needed
FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN npm run build

# Production image, copy all the files and run next
FROM node:16-alpine AS runner

RUN apk add --no-cache curl

WORKDIR /app

ENV NODE_ENV production

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

CMD ["node", "server.js"]

FROM node:16-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat curl
WORKDIR /app

COPY package.json package-lock.json ./
RUN npm ci

COPY . .

CMD ["npm", "run", "dev"]

Setup caching w/ Cloudflare