Not able to make angular app to listen to port?

1

I am trying to deploy a ng angular application using the nginx. But it doesn’t seem to listen to the right port for whatever reason.
To better explain, I use this dockerfile to create a docker container after I ran ng build --configuration=production:

FROM nginx:latest

# Copy the built Angular app into the Nginx web server directory

COPY ./dist/angular_template /usr/share/nginx/html

# Expose the default Nginx port

EXPOSE 80

# Start Nginx when the container starts

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

Then I use the fly deploy --image "name/of/image"

and this is my fly.toml configuration:

# fly.toml app configuration file generated for frontend-bikes4all on 2023-11-23T16:09:14+02:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = "frontend-bikes4all"
primary_region = "otp"

[build]
  image = "ghcr.io/inginerie-software-2023-2024/proiect-inginerie-software-ando-foro/bikes4all-frontend:latest"

[http_service]
  internal_port = 8080
  force_https = true
  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
  processes = ["app"]

I get this log when I try to deploy using fly deploy --image

You can fix this by configuring your app to listen on the following addresses:
  - 0.0.0.0:8080g that 17811e16f20d58 [app] is up and running
Found these processes inside the machine with open listening sockets:
  PROCESS                                    | ADDRESSES
---------------------------------------------*---------------------------------------
  nginx: master process nginx -g daemon off; | 0.0.0.0:80, [::]:80
  /.fly/hallpass                             | [fdaa:2:8f90:a7b:1ad:55db:f54d:2]:22
  nginx: worker process                      | 0.0.0.0:80, [::]:80

I don’t really understand what seems to be the problem here, cause it seems that nginx master porcess is listening to 0.0.0.0:80 so why is this not connecting?

this shows in the logs of the fly monitoring:

instance refused connection. is your app listening on 0.0.0.0:8080? make sure it is not only listening on 127.0.0.1 (hint: look at your startup logs, servers often print the address they are listening on)
2

Hi @dragosp33

nginx needs to listed on port 8080, not 80, as this is what configured in fly.toml:

internal_port = 8080

Alternatively, you can set internal_port = 80 in the config.

1 Like
3

Hi, so - your app is listening on port 80 (nginx listening on its default port), but you’re saying in your fly.toml that it’s listening on port 8080 :slight_smile:

There’s a bit of extra info on how to debug this kind of issue here:

  • Daniel
4

Got it now, also, it came to an end as I noticed that routing isn’t working pretty well with default ng, so now I am trying to use a node.js express server to serve the build. This is my server.js:

const path = require('path');

const express = require('express');

const app = express();

app.use(express.static(path.join(__dirname, './dist/angular_template')));

app.get('*', (req, res) => {

res.sendFile(path.join(__dirname, './dist/angular_template', 'index.html'));

});

app.listen(80, () => {

console.log('SERVER RUNNING');

});

And i tested it, and node server.js works perfectly. Now my question is of course, how to modify the Dockerfile to get the build and serve the node.js?

I thought there should be more details to it, I need a dockerfile so I can push the image to a git registry, and then pull that image and use fly deploy --local-only because the git package is private, so it can’t be built remotely. thanks

5

If you run our fly app dockerfile-node it will suggest a Dockerfile for you. Give it a try!

1 Like
6

Thank you for your help. I’ll reply in case of anyone relating to this issue or wanting to deploy an angular app, it turned out to be more simple than I thought. This is the Docker config I’m running to deploy the express server that serves the angular build:


ARG NODE_VERSION=20.4.0
FROM node:${NODE_VERSION}-slim as base

LABEL fly_launch_runtime="Node.js"

# Set the working directory
WORKDIR /app


# Copy the built Angular build - or run ng build 
COPY ./dist/angular_template ./dist/angular_template

# Copy the server handler
COPY ./server.js ./

#COPY ./package.json ./
#COPY ./package-lock.json ./
#RUN npm install
RUN npm install express

# Expose the default Nginx port
EXPOSE 80



# Start Nginx when the container starts
CMD ["node", "server.js"]

Remember to add ng build , package.json and run npm install if it’s the case. I didn’t because I export this to a workflow where the machine already imports and installs those

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.