Search code examples
angulardockernginxdevops

How to host angular application in Docker?

I am looking for a solution for correct docker file but when I write localhost:8080 on browser I can see nginx but I can not see default angular website on the browser. What can I do with my Docker file. What it is wrong ?


FROM node:12.8-alpine AS builder

WORKDIR /app
RUN npm install
COPY . .
RUN npm run build

# Step 2: Use build output from 'builder'
FROM nginx:stable-alpine
LABEL version="1.0"

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

WORKDIR /usr/share/nginx/html
COPY --from=builder . /app

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

enter image description here

Solution
    1. Right off the bat I see a couple things, like EXPOSE

    First, in your Docker config you are missing the Expose option/line such as:

    EXPOSE 4200

    Insert it before your last RUN command in the docker file, to allow the port in the container (for e.g. port 4200) so the mapping from compose works (80:4200)

    Its forwarding port 80 to 4200, essentially mapping your angular app.

    1. Update your config file: A good ref sample of sanitized docker config. You should compare your image with this to update your install with yarn, and copy to the correct output dir. etc.
    FROM node:13.3.0 AS compile-image
// install
RUN npm install -g yarn

WORKDIR /opt/ng
COPY .npmrc package.json yarn.lock ./
RUN yarn install

ENV PATH="./node_modules/.bin:$PATH" 

# configure your expose port
#expose the port
   EXPOSE 4200
COPY . ./
RUN ng build --prod

FROM nginx
COPY docker/nginx/default.conf /etc/nginx/conf.d/default.conf
COPY --from=compile-image /opt/ng/dist/app-name /usr/share/nginx/html

    1. You may need to forward the port from the container to your system / host :

      docker run -p 4200:4200 test:latest