How to host angular application in Docker?

Question

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

In addition to a correct Dockerfile, you need to properly run the container. If you want to access your service on localhost:8080 from a browser running on your machine, you will need to publish that port, which is something that happens at runtime. That's not something that gets baked into your Dockerfile. — larsks
– larsks, Commented Jan 9, 2021 at 18:54
Your final COPY line is copying to /app in the Nginx image, not the WORKDIR you set in the line previous. Did you mean to have the arguments in the opposite order, COPY --from=builder /app .? — David Maze
– David Maze, Commented Jan 9, 2021 at 20:09

Transformer · Accepted Answer · 2021-01-09 19:32:36Z

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.

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

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

docker run -p 4200:4200 test:latest

IHAFURR · Accepted Answer · 2024-07-17 19:51:49Z

Dockerfile

# Build
FROM node:latest AS build
WORKDIR /usr/local/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

# Run
FROM nginx:latest
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/local/app/dist/appname/browser /usr/share/nginx/html

# Expose port 80
EXPOSE 80

use COPY --from=build /usr/local/app/dist if ng build has all files in this folder, otherwise copy files from /usr/local/app/dist/appname/browser folder in case ssr is enabled

nginx.conf

events{}
http {
    include /etc/nginx/mime.types;
    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Collectives™ on Stack Overflow

How to host angular application in Docker?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related