Плохой шлюз при развертывании dockerfile с angular в GAE

Question

Как и другие 502 Bad Gateway при развертывании в GAE У меня тоже есть такая же проблема 502 Bad Gateway, но на этот раз при развертывании приложения angular через Dockerfile в GAE.

Вот мой app.yaml

service: app-name
runtime: custom
env: flex

automatic_scaling:
  min_num_instances: 1

Это 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

Я пробовал выше - с и без --disable-host-check. Хотя я не совсем понимаю, что это должно быть

Все предыдущие поиски в SO указывали на то, что файл nginx .conf является виновником, поэтому я скопировал именно файл nginx из документации GAE для пользовательских сред выполнения

так что 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;

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;
}

}

Конечно, сборка и приложение docker работают нормально при развертывании с localhost
Как angular веб-приложение, которое должно быть развернуто с Docker?

Answer 1

Окей, у вас есть несколько проблем:

1 - вы никогда не должны использовать "ng-serve" для производства
2 - вам нужно собрать свои приложения и получить dist forlder
3 - Запустите nginx после настройки config

. Сначала необходимо собрать приложение, используя ng build --prod, и настроить конфигурацию docker для сборки.

Пример Dockerfile для приложения angular :

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;"]

Пример для nginx config:

server {
  listen 80;

  location / {
    root /usr/share/nginx/html;
    index index.html index.htm;
    try_files $uri $uri/ /index.html =404;
  }
}

Вы должны понимать, что приложение Angular Building * дает нам папку с именем "dist", содержащую. html файл и несколько. js файлов. Это тот файл. html, который обслуживается nginx.

ng serve используется только для разработки.

Надеюсь, это поможет. Удачи!