Just like others 502 Bad Gateway while deploying in GAE i too am having the same problem 502 Bad Gateway but this time, deploying an angular app through Dockerfile in GAE.
Here is my app.yaml
service: app-name
runtime: custom
env: flex
automatic_scaling:
min_num_instances: 1
This is the DockerFile
FROM node:10-alpine as buildContainer
WORKDIR /app
COPY ./package.json ./package-lock.json /app/
RUN npm install
RUN npm install -g @angular/cli@7.3.9
COPY . /app
# Expose the port the app runs in
EXPOSE 8080
# Serve the app
CMD ng serve --host 0.0.0.0 --port 8080 --disable-host-check
COPY nginx.conf /etc/nginx/nginx.conf
I tried the above - with and without --disable-host-check. Though I dont really understand what it should be
All previous searches on SO pointed to nginx.conf file as being the culprit - so i copied exactly the nginx file from the GAE docs for custom runtimes
so nginx.conf is
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;
gzip on;
gzip_disable "msie6";
server {
# Google App Engine expects the runtime to serve HTTP traffic from
# port 8080.
listen 8080;
root /usr/share/nginx/www;
index index.html index.htm;
}
}
Of course, the docker build and app is working fine when deployed from localhost
How is an angular web app supposed to be deployed with Docker ?
Okey, you have several problems :
1- You should never use "ng-serve" for production
2- You need to build your app firs and get the dist forlder
3- Launch nginx after setting config
You need to build your app first using ng build --prod and configure your docker config for build.
Example of Dockerfile for an angular app :
FROM nginx:1.15.12-alpine
# Removing nginx default page.
RUN rm -rf /usr/share/nginx/html/*
# Copying nginx configuration.
COPY /nginx/nginx.conf /etc/nginx/conf.d/default.conf
# Copying source into web server root.
COPY /dist /usr/share/nginx/html
# Exposing ports.
EXPOSE 80
# Starting server.
CMD ["nginx", "-g", "daemon off;"]
Example for nginx config :
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}
You need to understand that building Angular App gives us a folder called "dist" containing the .html file and several .js files. It is that .html file that gets served by nginx.
The ng serve is used for development only.
Hope it helps. Good Luck !