Packaging Angular 16 App in Docker Container and Deploying on Web Server – Connection Refused

I have an Angular 16 app that builds my website.

I want to package it into a Docker container and deploy it on a web server. Later, I also plan to add SSL encryption using Let's Encrypt.

However, I'm encountering the following error:

This site can’t be reached localhost refused to connect.

Here is the associated Dockerfile:

# ----------------------------
# build from source
# ----------------------------
FROM node:18 AS build

WORKDIR /app

COPY package*.json .
RUN npm install

COPY . .
RUN npm run build

# ----------------------------
# run with nginx
# ----------------------------
FROM nginx

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build /app/dist/portfolio /usr/share/nginx/html

EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]


And the nginx.conf:

server {
listen 80;
server_name localhost;

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

error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}


The Dockerfile is located in the same directory level as package.json.

Can someone help me make the Angular app visible on the web, ideally with SSL encryption using Let's Encrypt?

Additional Information:

Docker is installed correctly and I can run other containers without issues. The Angular app runs locally without Docker without problems.

Continue reading...