Home > Software design >  Docker container on EC2 frontend doesn't connect to backend
Docker container on EC2 frontend doesn't connect to backend

Time:11-26

I have deployed a single docker container with a backend and a frontend on it. For various reasons, it is much easier for me to do it this way.

The docker container works fine locally and the FE and BE interact. However, once it's deployed to the EC2 device, only the FE is accessible and it can't connect to the BE.

The FE is a react-app running on port 3000. The BE is a node/express backend with a nodemon server running on port 5000. I know nodemon should be in a dev environment, but if I got it running locally on a docker container there's no reason it shouldn't work on the EC2 device, right?

I have security groups configured correctly for both ports, and I've checked that the container is running on those ports. Which it is.

I feel a bit out of my depth here and, aside from the entire application, is there anything I can provide here that would better help identify what is at issue here?

Dockerfile:

FROM node:16.17.0

WORKDIR /client
COPY ./client/package.json ./client/package.json
RUN npm i
COPY ./client ./client

WORKDIR /server
COPY ./server/package.json ./server/package.json
RUN npm i
COPY ./server ./server

EXPOSE 3000 5000

WORKDIR /client
CMD ["npm", "run", "remote-start"]

The remote start script launches the servers of client and server in tandem. As said, this works fine locally.

I also have configured in the client's package.json the following:

"proxy": "http://<IP-Address>:5000"

That works fine for the local docker container when it's localhost:5000

CodePudding user response:

How to Start a React App and Express Backend in One Docker Container on EC2

OK, I've looked at this. The way to get a react FE and node BE to connect on an EC2 device is the following. This presumes the structure I assume you have from your dockerfile:

client
  - package.json (starts a server on p 3000)
  - all client files
server
  - package.json (starts a server on p 5000)
  - all server files
  1. Use the docker file you've posted above

  2. In the react-app client, use your proxy line in the client's package.json with the public IP address of the EC2 device

"proxy": "http://<IP-Address>:5000"
  1. Make sure ports 3000 and 5000 are accessible in your EC2 security groups

  2. There's no need to alter anything with where express listens

app.listen(5000, () => {
  1. To start two servers at once, you need a script to support your docker CMD(I assume your npm run remote start is like this) that can start them concurrently:
    "remote-start": "cd .. && cd server && npm run dev & react-scripts start"

Now both the BE and the FE will be running when the container is deployed to your EC2 device and will be accessible via the IP address of the EC2 device.

In testing this, I found the EC2 device might freeze when the container starts. Give it some time and it should work fine.

As mentioned by Zac Anger, you can curl to the ports but use the IP address of the EC2 device to test if its running.

  • Related