How to deploy webpack-ed static content while container image is build, e. g. after npm build was run

Hey!

Here’s a guide on how to achieve reliable deployment of your webpack-ed static content to a DigitalOcean Space during the container image build process:

1. Dockerfile Setup:

• Multi-Stage Build: Employ a multi-stage build process in your Dockerfile to optimize efficiency and reduce the image size.

Here’s an example Dockerfile:

# Stage 1: Build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ ./
RUN npm run build

# Stage 2: Production stage
FROM nginx:alpine
COPY --from=build-stage /app/build /usr/share/nginx/html # Copy build output

# -- Optional: Configure Nginx as needed --

2. Workflow Automation (CI/CD)

• Integrate with CI/CD: Set up a CI/CD pipeline (e.g., GitHub Actions, GitLab CI/CD) to automate the build and deployment process.

Here’s a basic example using GitHub Actions:

name: Build and Deploy to App Platform and Spaces

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      - name: Build Docker Image
        run: docker build -t my-image:latest .
      - name: Login to DigitalOcean Container Registry
        uses: docker/login-action@v2
        with:
          registry: registry.digitalocean.com
          username: ${{ secrets.DO_ACCESS_TOKEN }}
          password: ${{ secrets.DO_ACCESS_TOKEN }}
      - name: Push to Container Registry
        run: docker push my-image:latest
      - name: Deploy to App Platform
        uses: digitalocean/action-doctl@v2
        with:
          token: ${{ secrets.DO_ACCESS_TOKEN }}
          app: ${{ secrets.DO_APP_ID }} # Replace with your App ID
          spec: ${{ path/to/your/app.yaml }}
      - name: Upload to Spaces
        uses: digitalocean/spaces-upload-action@v1
        with:
          spaces_access_id: ${{ secrets.DO_SPACES_ACCESS_ID }}
          spaces_secret_key: ${{ secrets.DO_SPACES_SECRET_KEY }}
          space: ${{ secrets.DO_SPACES_NAME }}
          region: ${{ secrets.DO_SPACES_REGION }}
          source_dir: build/  # Output from Webpack
          dest_dir: /static/${{ github.event.repository.name }}/${{ github.sha }}

Explanation:

• Environment Variables: Store your DigitalOcean API keys, Space details, app ID, etc. as secrets within your CI/CD pipeline.
• Spaces Upload Action: The ‘spaces-upload-action’ simplifies the upload to your Space.
• Dynamic Path: The dest_dir ensures assets from each build are in unique folders, helping with versioning if needed.

Best,

Bobby