Angular app image running with docker-compose but not in kubernetes deployment

Question

I have simple Dockerfile for Angular 10 app.

FROM node:12.2.0-alpine
WORKDIR /usr/src/app/e-wallet-web

COPY package*.json ./

RUN npm install -g @angular/cli@10.0.1 @angular-devkit/build-angular @angular/material@10.0.1 @angular/flex-layout@10.0.0-beta.32 && npm install

EXPOSE 4200

CMD ng serve --host 0.0.0.0

Now I created docker-compose to deploy with other app like backend, database.

When I run docker-compose up command, it is working fine. Now I want to deploy on kubernetes , for that I created a deployment.yml file like this.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: walletaweb-deployment
  namespace: ewallet
spec:
  selector:
    matchLabels:
      app: walletaweb-pod
  template:
    metadata:
      labels:
        app: walletaweb-pod
    spec:
      containers:
      - name: ewalletweb
        image: ewalletweb:latest
        imagePullPolicy: IfNotPresent
        resources:
          limits:
            memory: "128Mi"
            cpu: "500m"
        ports:
        - containerPort: 80

It is not working. When I see the logs of that pod, it is showing error The serve command requires to be run in an Angular project, but a project definition could not be found.

Pod description:

PS > kubectl describe -n ewallet pod walletaweb-deployment-6789b56ccf-prmbk
Name:         walletaweb-deployment-6789b56ccf-prmbk
Namespace:    ewallet
Priority:     0
Node:         docker-desktop/192.168.65.3
Start Time:   Tue, 21 Jul 2020 12:58:42 +0600
Labels:       app=walletaweb-pod
              pod-template-hash=6789b56ccf
Annotations:  <none>
Status:       Running
IP:           10.1.0.58
IPs:
  IP:           10.1.0.58
Controlled By:  ReplicaSet/walletaweb-deployment-6789b56ccf
Containers:
  ewalletweb:
    Container ID:   docker://fa1daff061031490043d83d322c11da7ba308a333deb61c6fdbee4fa21e96e26
    Image:          ewalletweb:latest
    Image ID:       docker://sha256:21bf5c443bd740aaab1fd66ce3342d8093648f884a91b1ccf6b4d76d20d11304
    Port:           80/TCP
    Host Port:      0/TCP
    State:          Waiting
      Reason:       CrashLoopBackOff
    Last State:     Terminated
      Reason:       Error
      Exit Code:    1
      Started:      Tue, 21 Jul 2020 13:20:10 +0600
      Finished:     Tue, 21 Jul 2020 13:20:11 +0600
    Ready:          False
    Restart Count:  9
    Limits:
      cpu:     500m
      memory:  128Mi
    Requests:
      cpu:        500m
      memory:     128Mi
    Environment:  <none>
    Mounts:
      /var/run/secrets/kubernetes.io/serviceaccount from default-token-fz7rk (ro)
Conditions:
  Type              Status
  Initialized       True
  Ready             False
  ContainersReady   False
  PodScheduled      True
Volumes:
  default-token-fz7rk:
    Type:        Secret (a volume populated by a Secret)
    SecretName:  default-token-fz7rk
    Optional:    false
QoS Class:       Guaranteed
Node-Selectors:  <none>
Tolerations:     node.kubernetes.io/not-ready:NoExecute for 300s
                 node.kubernetes.io/unreachable:NoExecute for 300s
Events:
  Type     Reason     Age                 From                     Message
  ----     ------     ----                ----                     -------
  Normal   Scheduled  <unknown>           default-scheduler        Successfully assigned ewallet/walletaweb-deployment-6789b56ccf-prmbk to docker-desktop
  Normal   Pulled     20m (x5 over 21m)   kubelet, docker-desktop  Container image "ewalletweb:latest" already present on machine
  Normal   Created    20m (x5 over 21m)   kubelet, docker-desktop  Created container ewalletweb
  Normal   Started    20m (x5 over 21m)   kubelet, docker-desktop  Started container ewalletweb
  Warning  BackOff    96s (x92 over 21m)  kubelet, docker-desktop  Back-off restarting failed container

Answer 1

Your Dockerfile doesn't COPY the Angular application into the image, so it's not there when ng serve runs. You need to add to your Dockerfile, after the RUN npm install line, something along the lines of

COPY . .

Make sure you also have a .dockerignore file that causes the host's node_modules directory to be excluded from the build.

It looks like your docker-compose.yml file injects your host's code into the container, and then tells Docker to use some (potentially old) version of the node_modules tree to overwrite what the Dockerfile does. You will get the same error if you delete the volumes: block there. (That's generally good practice: if you're replacing all of the code and the entire app directory in the container, what you're running in Compose is fundamentally different from what you're trying to run in Kubernetes.)

You approximately can't replicate this developer-oriented setup in Kubernetes. (In principle you can, but only on a single-node cluster like Minikube, and the YAML to do it is as long as the deployment spec you currently have.) Images must be self-contained and include all of their code and dependencies.