Docker apache and angular

Question

I have an Apache server (in docker) that distributes to several applications. I have an application in Angular that I want to deploy on my server, but when accessing through the domain, it is giving a 502 error when retrieving the static files:

www.mydomain.com => 200
www.mydomain.com/assets/css/mycss.css => 502
www.mydomain.com/.../*.js => 502

This is my Angular Dockerfile:

FROM node:14.5.0-alpine As builder

WORKDIR /usr/src/app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

RUN npm install @angular/cli -g
RUN ng build --prod

FROM nginx:1.15.8-alpine

COPY --from=builder /usr/src/app/dist/angular-app/ /usr/share/nginx/html

My (simplified) Apache configuration (mydomain.conf):

<VirtualHost *:443>
        ServerName www.mydomain.com
        ServerAlias www.mydomain.com

        SSLProxyEngine on
        SSLProxyVerify none
        SSLProxyCheckPeerCN off
        SSLProxyCheckPeerName off
        SSLProxyCheckPeerExpire off

        RewriteEngine on
        RewriteOptions inherit

        ProxyPreserveHost On

        # angular-app is the name of container, it is in same network that apache
        ProxyPass / http://angular-app Keepalive=On
        ProxyPassReverse / http://angular-app

</VirtualHost>

If I directly access the IP:port the application works correctly.

Any suggestions? Thanks in advance

Answer 1

You have two FROM statements

FROM node:14.5.0-alpine As builder
FROM nginx:1.15.8-alpine

A FROM statement is used to define the image that docker should start with. Once you use a FROM the subsequent statements can be only to ADD, RUN or COPY items onto the container. In your case you are are instructing to Docker from the node image and then after a few statements start from the nginx image.

When building docker images ensure that it addresses only one concern. If you plan to have an angular application start from the node image. If you want to serve the angular application build it and copy it to an nginx image.`