skip to Main Content

I have developed my project on Google cloud using Nodejs,Angular, MongoDB and Express. I have successfully built the Authentication part for Express and Node.js. Now I am trying to integrate Angular. I have setup Ingress-NGINX using Google cloud and am utilizing Google cloud shell to create the code.

I followed the steps below for setup

Steps for setting up Ingress-NGINX on Google Cloud

  1. Create a project blog-dev
  2. Create cluster blog-dev with 3 N1-g1 small instances in us-central1-c zone
  3. Navigate to https://kubernetes.github.io/ingress-nginx/deploy/#gce-gke
  4. On the Google cloud account, open the cloud shell and navigate to BPB_MEAN_Framework directory in terminal
  5. Execute the command
    gcloud init, reinitialize the cluster, select the account, project and the region
  6. Execute the command gcloud container clusters get-credentials blog-dev
  7. Execute the command kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.0.3/deploy/static/provider/cloud/deploy.yaml to configure ingress-nginx
  8. Go to Network Services -> Load Balancing and check that the Load Balancer has got created. Note the ip of the Load Balancer
  9. Open the hosts.ini file and update as shown below
    130.211.113.34 blog.dev
    8.1)
    kubectl create secret generic jwt-secret –from-literal=JWT_KEY=asdf
  10. Run scaffold dev
  11. Go to http://blog.dev/api/users/currentuser in a browser and get the ‘Privacy Error’ page. Click ‘Advanced’ here
  12. Type thisisunsafe on keyboard

The various files are listed below

Listed below is the Kubernetes deployment yaml

apiVersion: apps/v1
kind: Deployment
metadata: 
  name: client-depl
spec: 
  replicas: 1
  selector: 
    matchLabels:
      app: client
  template: 
    metadata:
      labels:
        app: client 
    spec:
      containers:
        - name: client
          image: us.gcr.io/blog-dev-326403/client:project-latest
---
apiVersion: v1
kind: Service
metadata:
  name: client-srv
spec:
  selector:
    app: client
  ports: 
    - name: client
      protocol: TCP
      port: 4200
      targetPort: 4200    

Listed below is the Ingress service

apiVersion: extensions/v1beta1
kind: Ingress
metadata: 
  name: ingress-service
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: 'true'
spec:
  rules:
    - host: blog.dev
      http:
        paths:
          - path: /api/users/?(.*)
            backend:
              serviceName: auth-srv
              servicePort: 3100
          - path: /?(.*)
            backend:
              serviceName: client-srv
              servicePort: 4200

Listed below is the Skaffold yaml

apiVersion: skaffold/v2alpha3
kind: Config
deploy:
  kubectl: 
    manifests:
      - ./infra/k8s/*
build:
  #local:
   # push: false
  googleCloudBuild:
    projectId: blog-dev-326403
  artifacts:
    - image: us.gcr.io/blog-dev-326403/auth
      context: auth
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/.ts'
            dest: .
    - image: us.gcr.io/blog-dev-326403/client
      context: client
      docker:
        dockerfile: Dockerfile
      sync:
        manual:
          - src: 'src/**/.ts'
            dest: .

The angular folder structure is shown below
Angular project folder structure

I added the Google cloud Load Balancer ip followed by blog.dev in hosts.ini file.

When I run skaffold dev, there are no errors. When I try to access blog.dev, I get a 502 bad gateway.

When I navigate to client directory and type npm start and access preview in Google cloud shell, I get my website as shown
Application in preview mode in Google cloud
Please help…This is a showstopper for me

2

Answers


  1. Chosen as BEST ANSWER

    I found out the answer myself. Here is my solution

    Package.json

    The package.json entry is given below

    "prod": "ng build --prod",
    

    Angular Dockerfile

    FROM node:16.4.0 as build
    WORKDIR /app
    COPY package.json ./
    RUN npm install
    COPY . .
    RUN npm run prod
    
    FROM nginx:1.19
    COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
    COPY --from=build /app/dist/Angular-Mean/ /usr/share/nginx/html
    

    I put an nginx configuration file as below

    worker_processes  1;
    
    events {
      worker_connections  1024;
    }
    
    http {
      server {
        listen 80;
        server_name  localhost;
    
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;
    
        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript 
        application/x-javascript text/xml application/xml application/xml+rss 
        text/javascript;
    
        location / {
          try_files $uri $uri/ /index.html;
        }
      }
    

    }

    The deployment file is shown below

    apiVersion: apps/v1
    kind: Deployment
    metadata: 
      name: client-depl
    spec: 
      replicas: 1
      selector: 
        matchLabels:
          app: client
      template: 
        metadata:
          labels:
            app: client 
        spec:
          containers:
            - name: client
              image: us.gcr.io/blog-dev-326403/client:project-latest
              ports:
              - containerPort: 4200
    ---
    apiVersion: v1
    kind: Service
    metadata:
      name: client-srv
    spec:
      selector:
        app: client
      type: LoadBalancer
      ports: 
        - name: client
          protocol: TCP
          port: 80
          targetPort: 80
          nodePort: 31000
         
    

    The final artifact is ingress service

    apiVersion: extensions/v1beta1
    kind: Ingress
    metadata: 
      name: ingress-service
      annotations:
        kubernetes.io/ingress.class: nginx
        nginx.ingress.kubernetes.io/use-regex: 'true'
    spec:
      rules:
        - host: blog.dev
          http:
            paths:
              - path: /api/users/?(.*)
                backend:
                  serviceName: auth-srv
                  servicePort: 3100
              - path: /?(.*)
                backend:
                  serviceName: client-srv
                  servicePort: 80
    

    Rest of the configuration remains same. Please use this configuration and navigate to https://blog.dev and you get the output as shownBlog Website


  2. Try to open the container port from deployment

    ports:
    - containerPort: 80
    

    deployment

    apiVersion: apps/v1
    kind: Deployment
    metadata: 
      name: client-depl
    spec: 
      replicas: 1
      selector: 
        matchLabels:
          app: client
      template: 
        metadata:
          labels:
            app: client 
        spec:
          containers:
            - name: client
              image: us.gcr.io/blog-dev-326403/client:project-latest
              ports:
              - containerPort: 4200
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search