How to deploy Angular 4 app with Docker and Azure Web App on Linux

Question

I am trying to follow this documentation on deploying my angular 4 web app with docker.

Below is what my Docker File currently looks like:

# Create image based on the official Node 6 image from dockerhub
FROM node:6
# Create a directory where our app will be placed
RUN mkdir -p /usr/src/app
# Change directory so that our commands run inside this new directory
WORKDIR /usr/src/app
# Copy dependency definitions
COPY package.json /usr/src/app
# Install dependecies
RUN npm install
# Get all the code needed to run the app
COPY . /usr/src/app
# Expose the port the app runs in
EXPOSE 80 
# Serve the app
CMD ["npm", "start"]

My package.json currenly has this under scripts "start": "ng serve -H 0.0.0.0",

I am able to create the Web App on Linux and push my image but i am getting the following when trying to browse the web application:

Invalid Host header

Am I missing something in my docker file? I am kinda stuck at this point so any help would be appreciated.

Why do you need to run it with ng serve? This is in theory only static content, right? — Grimmy
– Grimmy, Commented Jul 20, 2017 at 19:03

Grimmy · Accepted Answer · 2017-07-21 22:24:09Z

2

If you are just serving the generated app, make it as simple as possible. Do you really need ng-cli in the container and all the node modules in the image? The node modules alone is at least 200 MB.

Build the app locally with ng-build --prod. This generates the dist folder and this is the only thing you need.

You end up with a very simple Dockerfile:

FROM nginx:stable-alpine
ADD dist /usr/share/nginx/html
ADD default.conf /etc/nginx/conf.d/

The basic nginx conf to handle urls in angular default.conf:

server {
    listen       80;
    server_name  localhost;
    root /usr/share/nginx/html;
    charset utf-8;

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

This gives you a tiny image of maybe 30 MB based on the size of your app instead of 250 MB+ with all the tools and dependencies.

edited Jul 21, 2017 at 22:24

answered Jul 20, 2017 at 19:17

Grimmy

4,17725 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

seanmt13 Over a year ago

Thanks for pointing me in the right direction this ended up being quite a bit simpler and easier to use.

Jinna Baalu Over a year ago

Step 3/3 : ADD ./default.conf /etc/nginx/conf.d/ ADD failed: stat /var/lib/docker/tmp/docker-builder762125057/default.conf: no such file or directory. I am facing this issue with this configuration

Grimmy Over a year ago

Did you create default.conf? Also don't use ./. You could also put the conf file in a etc/nginx/conf.d dir-structure and just do ADD etc /etc instead. Also nginx image docs hub.docker.com/_/nginx

Grimmy Over a year ago

Also make sure you create a .dockerignore file and exclude the paths that don't need part of the context uploaded to docker engine when build. That way you can build in seconds instead of minutes.

Thomas · Accepted Answer · 2017-07-20 19:07:27Z

I assume that the built in webserver expects a different host. You can try to use "ng serve -host 0.0.0.0" instead of the npm-start command. For production use I suggest to take a different approach, though: I would use nginx (or any other) production webserver to serve the angular application and build an image containing just the final application delivery. If you want to use docker as built container, I would separate these reponsibilities and consider docker multi-stage builds. Example for a docker multi-stage build

FROM trion/ng-cli:latest AS ngcli
WORKDIR /app
COPY . .                          
RUN npm install
RUN ng build --prod --aot --progress=false

FROM nginx:alpine AS app           
ENV PORT=8080
EXPOSE 8080
COPY --from=ngcli dist /usr/share/nginx/html/ 
COPY nginx/default.conf /etc/nginx/conf.d/default.conf.template
RUN chown -R nginx /etc/nginx

CMD ["/bin/sh","-c",\
"cp /etc/nginx/conf.d/default.conf.template \
 /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]

The nginx config (from nginx/default.conf) could look like this

server {
  listen 8080;

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

So you get two distinct containers: One just for building the app, one just for serving the app.

Collectives™ on Stack Overflow

How to deploy Angular 4 app with Docker and Azure Web App on Linux

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related