Deploy docker image to GAE for angular

Question

I have been trying to build docker container with nginx as sever which oerfectly works fine in local but for some reason I can't deploy that to Google's App engine. Could you please let me know if it is possible in the first place? If its possible could you please guide me as well. I have the image in the container repo of GCP as well but could'nt find a way to get it deployed to GAE

Here is my docker

  #STEP1
  # we name it as builder so as to use in the following instructions 
  further
 FROM node:8.12.0-alpine as builder

 #Now install angular cli globally
 RUN npm install -g @angular/cli@6.2.1
  #Install git and openssh because alpine image doenst have git and all 
  modules in npm has the dependicies which are all uploaded in git
  #so to use them we need to be able git
 RUN apk add --update git openssh

  #create a new direcotry for the prj and change its directory to it
 RUN mkdir ./adtech-prj

  #copy the package json #dont copy package.lock json now
 COPY package.json package-lock.json ./adtech-prj/

  #this is required to place all our files inside this directory
 WORKDIR ./adtech-prj

 #this copies all files to the working directory
  COPY . .
  # --RUN pwd && ls

  RUN npm cache clear --force && npm i


  RUN $(npm bin)/ng build --prod --aot

  ### STAGE 2: Setup ###

  FROM nginx:1.15-alpine
  RUN apk update && apk add ca-certificates && rm -rf /var/cache/apk/*
  ## Copy our default nginx config
  COPY nginx.conf /etc/nginx/conf.d/

  ## Remove default nginx website
  RUN rm -rf /usr/share/nginx/html/*

  RUN pwd && ls 

  COPY --from=builder /adtech-prj/dist /usr/share/nginx/html



   EXPOSE 80

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

And here is my nginx configuration - a simple one

 server {


      listen 80 default_server;

      #server_name *.adtechportal.com;
      sendfile on;

      default_type application/octet-stream;



      root /usr/share/nginx/html;


      location / {
        try_files $uri $uri/ /index.html =404;
        #proxy_pass: "http://localhost:8080/AdTechUIContent"
        #uncomment to include naxsi rules
        #include /etc/nginx/naxsi.rules
       }

    }

Answer 1

Thanks to Guillermo. I did find an answer to it. The reason I wasn't able to successfully deploy the previous docker images is that I was trying to expose a port that is not 8080

The App engine by default listens to port 8080 and it expects the nginx configuration file to be using the same "listen"ing port for that Also SSL is provided by default by the app engine so there is no need to use nginx with SSL.

Here is the modified versions of nginx.conf

events {
    worker_connections 768;
}

http {
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # Logs will appear on the Google Developer's Console when logged to this
    # directory.
    access_log /var/log/app_engine/app.log;
    error_log /var/log/app_engine/app.log;

    root /usr/share/nginx/html;

    server {
        # Google App Engine expects the runtime to serve HTTP traffic from
        # port 8080.
        listen 8080;

        location / {
            try_files $uri $uri/ /index.html =404;
        }      
    }
}

Here is the new Docker file

FROM node:8.12.0-alpine as builder

#Now install angular cli globally
RUN npm install -g @angular/cli

RUN apk add --update git openssh

#create a new direcotry for the prj and change its directory to it
RUN mkdir ./test

#copy the package json #dont copy package.lock json now
COPY package.json package-lock.json ./adtech-prj/

#this is required to place all our files inside this directory
WORKDIR ./test

#this copies all files to the working directory
COPY . .

RUN ng set -g warnings.versionMismatch=false
RUN npm cache clear --force && npm i


#Build the angular app in production mode and store the artifacts in dist 
folder
RUN $(npm bin)/ng build --prod

### STAGE 2: Setup ###

FROM nginx:1.15-alpine
RUN apk update && apk add ca-certificates && rm -rf /var/cache/apk/*

COPY nginx.conf /etc/nginx/conf.d/


# create log dir configured in nginx.conf
RUN mkdir -p /var/log/app_engine

RUN mkdir -p /usr/share/nginx/_ah && \
echo "healthy" > /usr/share/nginx/_ah/health

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*


COPY --from=builder /adtech-prj/dist /usr/share/nginx/html


RUN chmod -R a+r /usr/share/nginx/html

One of the major thing to note is that I did not expose the port 80 here. The app engine as per design (I am guess a Kubernetes orchestration is happening but not sure) exposes the port 8080 to access the app. If we are to expose our own port, it doesn't work. If someone has an exact answer to it, you are most welcome to provide the reason.

Also one other thing to note is that app engine doesn't take into account , if any compose files are present. Currently no containers are created based on that

Answer 2

It's definitely possible to deploy to Google App Engine with a Dockerfile and an nginx server in Google Cloud Platform. Custom runtimes were implemented for this purpose.

To create a custom runtime, you create a Dockerfile with a base image of your choice, and then add the docker commands that build your desired runtime environment.

Test it by following the custom runtimes in GAE Flex quickstart. It uses a Dockerfile to define the environment and also launches an nginx web server to App Engine. After seeing how the quickstart example works, replace the Dockerfile and nginx.conf files with yours. You may need to tweak them a bit.