连接到端口 80 上的 React docker 容器

Question

我正在尝试将 React 应用部署为 docker 撰写的一部分。如果我部署在3000端口上，它工作正常，但是当我使用端口80时，我无法连接。如果我手动运行 npm start，任何一个配置都可以正常工作，但是当运行宁作为 docker 图像时，我无法访问端口 80 版本。

我试过将 EXPOSE 80 添加到 docker 文件中，但似乎没有任何效果。有人可以指出我配置中的错误吗？

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 react-scripts@5.0.0 -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片段

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

Answer 1

对于linux你应该这样设置端口：

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

另一个解决方案是在主目录中创建一个名称为 .env (documentation) 的文件，并将 PORT 变量设置为所需的端口号：

PORT=80

还有一个解决方案。
您可以使用 cross-env 设置端口：

npm install cross-env -D

然后修改启动脚本package.json:

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

p.s.
但是要使用 docker 部署 React 应用程序，我建议您使用 nginx。

p.p.s.
docker 文件中的 EXPOSE 指令实际上并没有发布端口。它起到一种文档的作用。 expose documentation

连接到端口 80 上的 React docker 容器

Connecting to React docker container on port 80

npm

docker

reactjs

docker-compose