Angular and NX deployment with Docker

64 Views Asked by At

What do I want to achieve: I would like to use github actions to build docker images from my apps and deploy them to my privately hosted docker repository.

Initial situation: My docker repository is set up and works flawlessly with normal apps that do not run within an nx workspace.

I use the following package versions:

"@nx-tools/container-metadata": "^5.2.0",
"@nx-tools/nx-container": "^5.2.0",
"@nx/angular": "18.0.4",
"@angular/core": "~17.1.0",
"nx": "18.0.4"

Within my project.json of my AngularApp, the target is defined as follows:

"container": {
      "executor": "@nx-tools/nx-container:build",
      "dependsOn": ["build"],
      "options": {
        "engine": "docker",
        "metadata": {
          "images": ["**/appname"],
          "push": true,
          "tags": [
            "type=schedule",
            "type=ref,event=branch",
            "type=ref,event=tag",
            "type=ref,event=pr",
            "type=semver,pattern={{version}}",
            "type=semver,pattern={{major}}.{{minor}}",
            "type=semver,pattern={{major}}",
            "type=sha,prefix=sha-"
          ]
        }
      }
    }

My Dockerfile:

# Stage 1: Build the application
FROM node:20 AS build

# Set the working directory
WORKDIR /app

# Copy package.json and the lock file
COPY package.json yarn.lock ./

# Install dependencies
RUN yarn install

# Copy the rest of the application code
COPY . .

# Build the Angular app in production mode
RUN yarn nx build angular-app --configuration=production

# Stage 2: Serve the application from Nginx
FROM nginx:alpine

# Copy the build output to replace the default nginx contents.
COPY --from=build /app/dist/apps/angular-app /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start nginx
CMD ["nginx", "-g", "daemon off;"]

My GitHub Action:

name: Build Affected Projects

on: [push, pull_request]

jobs:
  build:
    runs-on: [self-hosted, windows]
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v2
      - name: Log in to Docker registry
        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login https://****** --username ${{ secrets.DOCKER_USERNAME }} --password-stdin
      - uses: actions/setup-node@v3
        with:
          cache: 'npm'
      - name: 'Install Dependencies'
        run: npm install
      - name: 'Build images'
        run: npx nx affected --base=$NX_BASE --head=$NX_HEAD --target=container --parallel=2

My basic problem now is that due to the nx workspace I don't have a package.json to build the image successfully. In the old version of nrwl, according to the documentation, it was possible to copy the package.json into the folder in the build step. Unfortunately I can't find the right documentation for this.

In addition, of course, no image can be pushed to the repository in the github action. does anyone here have an idea for a documentation or could give me a hint on how to solve this problem?

0

There are 0 best solutions below