Connecting to React docker container on port 80-CodePudding

I'm trying to deploy a React app as part of a docker compose. It works fine if I deploy on port 3000, but when I use port 80, I cannot connect. If I run npm start manually, either config works fine, but I cannot access the port 80 version when running as a docker image.

I've tried adding EXPOSE 80 to the dockerfile, but it did not seem to have any effect. Can someone point out the error in my config?

Dockerfile:

FROM node:17-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
COPY package-lock.json ./

RUN npm install
RUN npm install [email protected] -g

COPY . .

CMD ["npm", "start"]

docker-compose.yaml

version: "3.8"
services:
  solvle:
    build: ./
    container_name: solvle_c
    ports:
      - '8081:8081'
  solvle_front:
    build: ./solvle-front
    container_name: solvle_front_c
    ports:
      - '80:80'
    stdin_open: true
    tty: true

package.json fragment

  "scripts": {
    "start": "set PORT=80 && react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

CodePudding user response：

For linux you should set port in this way:

"start": "export PORT=80 && react-scripts start"

Another solution is create a file with name .env (documentation) in the main directory and set PORT variable to desired port number:

PORT=80

One more solution.
You could use cross-env to set the port:

npm install cross-env -D

and then modify start script package.json:

"start": "cross-env PORT=80 react-scripts start",

p.s.
But for deploy react app with docker I woud recomend you to use nginx.

p.p.s.
The EXPOSE instruction in dockerfile does not actually publish the port. It functions as a type of documentation. expose documentation