基本上,我正在运行一个具有以下堆栈的webapp:

The backend is connecting to the database via localhost, and is being served on the public ip
I can access it at just fine at mydomain.com:8000/api

然而,当我try 访问mydomain.com时,docker设置为将端口3000转发到端口80,但它无法请求react,我得到ERR_CONNECTION_REFUSED错误

在许多类似的问题中,人们忘记将端口3000转发到80,但我正在这样做...

此外,当我安装npm&我的Ubuntu服务器上的react项目,前端可以通过mydomain.com:3000访问

在docker compose中.当我将端口从"REACT\u PORT:80"更改为"3000:3000",并且可以通过我们的公共ip访问时,yml.

我是否应该在主linux服务器上向前移植3000到80?如何做?

Docker Files

前端docker文件

# pull official base image for node
FROM node:16-buster-slim

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to PATH
ENV PATH /app/node_modules/.bin:$PATH

# install dependencies
COPY 包裹json ./
COPY package-lock.json ./
RUN npm i -g npm@latest
RUN npm install

# copy all src files to the container
COPY . .

# Expose port
EXPOSE 3000
EXPOSE 80

# start the web app
CMD ["npm", "run", "start"]

docker编写.yml公司

version: "3.9"

services:
  db:
    image: mysql:${MYSQL_VERSION}
    restart: always
    environment:
      - MYSQL_DATABASE=${MYSQL_DB}
      - MYSQL_USER=${MYSQL_USERNAME}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
    ports:
      - "${MYSQL_PORT}:${MYSQL_PORT}"
    expose:
      - "${MYSQL_PORT}"
    volumes:
      - db:/var/lib/mysql
    networks:
      - mysql_network

  backend:
    container_name: fastapi-backend
    build: ./backend/app
    volumes:
      - ./backend:/code
    ports:
      - "${FASTAPI_PORT}:${FASTAPI_PORT}"
    env_file:
      - .env
    depends_on:
      - db
    networks:
      - mysql_network
      - backend
    restart: always

  frontend:
    container_name: react-frontend
    build: ./frontend/client
    ports:
#This doesn't work for some reason?
      - "${REACT_PORT}:80"
#When I do this, I can access react via public ip just fine..:
      - "3000:3000"
    depends_on:
      - backend
    networks:
      - backend
    restart: always

volumes:
  db:
    driver: local

networks:
  backend:
    driver: bridge
  mysql_network:
    driver: bridge


React/NPM Files

包裹json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.8.2",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.1.1",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "universal-cookie": "^4.0.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Ubuntu UFW status

root@localhost:~/director# ufw status verbose
Status: active
Logging: on (low)
Default: deny (incoming), allow (outgoing), deny (routed)
New profiles: skip

To                         Action      From
--                         ------      ----
3306/tcp                   ALLOW IN    Anywhere
22/tcp                     ALLOW IN    Anywhere
80/tcp                     ALLOW IN    Anywhere
443                        ALLOW IN    Anywhere
3000                       ALLOW IN    Anywhere
3306/tcp (v6)              ALLOW IN    Anywhere (v6)
22/tcp (v6)                ALLOW IN    Anywhere (v6)
80/tcp (v6)                ALLOW IN    Anywhere (v6)
443 (v6)                   ALLOW IN    Anywhere (v6)
3000 (v6)                  ALLOW IN    Anywhere (v6)

正在执行curl-l mydomain.com:8000

curl -l domain.com:8000
{"detail":"Not authenticated"} 

我们的后端工作正常且公开

docker inspect react\u前端

[
    {
        "Id": "533f96d538bcf28827d5ad5ead69dc97b97c79bfef1d1e31e3847f15ceb0621f",
        "Created": "2022-06-27T04:00:18.459838372Z",
        "Path": "docker-entrypoint.sh",
        "Args": [
            "npm",
            "start"
        ],
        "State": {
            "Status": "running",
            "Running": true,
            "Paused": false,
            "Restarting": false,
            "OOMKilled": false,
            "Dead": false,
            "Pid": 57578,
            "ExitCode": 0,
            "Error": "",
            "StartedAt": "2022-06-27T04:00:20.253120387Z",
            "FinishedAt": "0001-01-01T00:00:00Z"
        },
        "Image": "sha256:698f3ce60c6ba12f39dcf371bd4be556c1cb4aac9c7f95fd4589c079ec4e337b",
        "ResolvConfPath": "/var/lib/docker/containers/533f96d538bcf28827d5ad5ead69dc97b97c79bfef1d1e31e3847f15ceb0621f/resolv.conf",
        "HostnamePath": "/var/lib/docker/containers/533f96d538bcf28827d5ad5ead69dc97b97c79bfef1d1e31e3847f15ceb0621f/hostname",
        "HostsPath": "/var/lib/docker/containers/533f96d538bcf28827d5ad5ead69dc97b97c79bfef1d1e31e3847f15ceb0621f/hosts",
        "LogPath": "/var/lib/docker/containers/533f96d538bcf28827d5ad5ead69dc97b97c79bfef1d1e31e3847f15ceb0621f/533f96d538bcf28827d5ad5ead69dc97b97c79bfef1d1e31e3847f15ceb0621f-json.log",
        "Name": "/react-frontend",
        "RestartCount": 0,
        "Driver": "overlay2",
        "Platform": "linux",
        "MountLabel": "",
        "ProcessLabel": "",
        "AppArmorProfile": "docker-default",
        "ExecIDs": null,
        "HostConfig": {
            "Binds": [],
            "ContainerIDFile": "",
            "LogConfig": {
                "Type": "json-file",
                "Config": {}
            },
            "NetworkMode": "scheduleplatform_backend",
            "PortBindings": {
                "80/tcp": [
                    {
                        "HostIp": "",
                        "HostPort": "3000"
                    }
                ]
            },
            "RestartPolicy": {
                "Name": "always",
                "MaximumRetryCount": 0
            },
            "AutoRemove": false,
            "VolumeDriver": "",
            "VolumesFrom": [],
            "CapAdd": null,
            "CapDrop": null,
            "CgroupnsMode": "private",
            "Dns": null,
            "DnsOptions": null,
            "DnsSearch": null,
            "ExtraHosts": null,
            "GroupAdd": null,
            "IpcMode": "private",
            "Cgroup": "",
            "Links": null,
            "OomScoreAdj": 0,
            "PidMode": "",
            "Privileged": false,
            "PublishAllPorts": false,
            "ReadonlyRootfs": false,
            "SecurityOpt": null,
            "UTSMode": "",
            "UsernsMode": "",
            "ShmSize": 67108864,
            "Runtime": "runc",
            "ConsoleSize": [
                0,
                0
            ],
            "Isolation": "",
            "CpuShares": 0,
            "Memory": 0,
            "NanoCpus": 0,
            "CgroupParent": "",
            "BlkioWeight": 0,
            "BlkioWeightDevice": null,
            "BlkioDeviceReadBps": null,
            "BlkioDeviceWriteBps": null,
            "BlkioDeviceReadIOps": null,
            "BlkioDeviceWriteIOps": null,
            "CpuPeriod": 0,
            "CpuQuota": 0,
            "CpuRealtimePeriod": 0,
            "CpuRealtimeRuntime": 0,
            "CpusetCpus": "",
            "CpusetMems": "",
            "Devices": null,
            "DeviceCgroupRules": null,
            "DeviceRequests": null,
            "KernelMemory": 0,
            "KernelMemoryTCP": 0,
            "MemoryReservation": 0,
            "MemorySwap": 0,
            "MemorySwappiness": null,
            "OomKillDisable": null,
            "PidsLimit": null,
            "Ulimits": null,
            "CpuCount": 0,
            "CpuPercent": 0,
            "IOMaximumIOps": 0,
            "IOMaximumBandwidth": 0,
            "MaskedPaths": [
                "/proc/asound",
                "/proc/acpi",
                "/proc/kcore",
                "/proc/keys",
                "/proc/latency_stats",
                "/proc/timer_list",
                "/proc/timer_stats",
                "/proc/sched_debug",
                "/proc/scsi",
                "/sys/firmware"
            ],
            "ReadonlyPaths": [
                "/proc/bus",
                "/proc/fs",
                "/proc/irq",
                "/proc/sys",
                "/proc/sysrq-trigger"
            ]
        },
        "GraphDriver": {
            "Data": {
                "LowerDir": "/var/lib/docker/overlay2/f9449860ca28f3641e74ef010fa6bb54383a33a975dce28519f5cfe609ff61d2-init/diff:/var/lib/docker/overlay2/7d8ad12b25cf6e4e0093e811370194cc6c1f72aa443d7d8f0ab69e97715f4c82/diff:/var/lib/docker/overlay2/b530ee218be07eb3a58df7a2f134b4e23cd22ad04b35dc7cbb75f3f07a206280/diff:/var/lib/docker/overlay2/94b5584c91af3dda4376092abdb9b7ff80937311741b96deca22e4b3aaf3a7c7/diff:/var/lib/docker/overlay2/4d8194094b484dfd94ca7473e3e13bfa5962879fd81942710f0aa096199a87c3/diff:/var/lib/docker/overlay2/aeb4c3cd54338efa1d44e1fc24c8a8f91bf672e47771fd0e308b3f65ab753f07/diff:/var/lib/docker/overlay2/9ddac11aa66b2d843b2391c3ad0798f8e372adfffeaec87882322de663b398e5/diff:/var/lib/docker/overlay2/e874192d15482d34ed8a80ef205b55005c84fcad0a7726822de258963191ec10/diff:/var/lib/docker/overlay2/8b162bdb3415e166a91518df47e1bed0bfff2d89568a2653f74e66cb3931773a/diff:/var/lib/docker/overlay2/a18946af0ee112612099819a9db0a3cbef5d1e2264904e6a8405868ab111634a/diff:/var/lib/docker/overlay2/b94b4e7d1af7280ad586d6f3366a161ec0d5cf9f858f0f20139b2ab0a72acfb7/diff:/var/lib/docker/overlay2/052c70a96ef76a7c32d609b98ec679ad7c6a74a28623b870bd729447bbc6086c/diff",
                "MergedDir": "/var/lib/docker/overlay2/f9449860ca28f3641e74ef010fa6bb54383a33a975dce28519f5cfe609ff61d2/merged",
                "UpperDir": "/var/lib/docker/overlay2/f9449860ca28f3641e74ef010fa6bb54383a33a975dce28519f5cfe609ff61d2/diff",
                "WorkDir": "/var/lib/docker/overlay2/f9449860ca28f3641e74ef010fa6bb54383a33a975dce28519f5cfe609ff61d2/work"
            },
            "Name": "overlay2"
        },
        "Mounts": [],
        "Config": {
            "Hostname": "533f96d538bc",
            "Domainname": "",
            "User": "",
            "AttachStdin": false,
            "AttachStdout": false,
            "AttachStderr": false,
            "ExposedPorts": {
                "3000/tcp": {},
                "80/tcp": {}
            },
            "Tty": false,
            "OpenStdin": false,
            "StdinOnce": false,
            "Env": [
                "PATH=/app/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
                "NODE_VERSION=16.15.1",
                "YARN_VERSION=1.22.19"
            ],
            "Cmd": [
                "npm",
                "start"
            ],
            "Image": "scheduleplatform_frontend",
            "Volumes": null,
            "WorkingDir": "/app",
            "Entrypoint": [
                "docker-entrypoint.sh"
            ],
            "OnBuild": null,
            "Labels": {
                "com.docker.compose.config-hash": "a02c886422905cf77d66a479bb9967d4a85bdd8c3ed0369665dae6afc9b34099",
                "com.docker.compose.container-number": "1",
                "com.docker.compose.oneoff": "False",
                "com.docker.compose.project": "scheduleplatform",
                "com.docker.compose.project.config_files": "docker编写.yml公司",
                "com.docker.compose.project.working_dir": "/root/SchedulePlatform",
                "com.docker.compose.service": "frontend",
                "com.docker.compose.version": "1.29.2"
            }
        },
        "NetworkSettings": {
            "Bridge": "",
            "SandboxID": "014cba17fd5ce070c42b6257a05149d7c78b7556d941d5f790c8c0f27e70a8b1",
            "HairpinMode": false,
            "LinkLocalIPv6Address": "",
            "LinkLocalIPv6PrefixLen": 0,
            "Ports": {
                "3000/tcp": null,
                "80/tcp": [
                    {
                        "HostIp": "0.0.0.0",
                        "HostPort": "3000"
                    },
                    {
                        "HostIp": "::",
                        "HostPort": "3000"
                    }
                ]
            },
            "SandboxKey": "/var/run/docker/netns/014cba17fd5c",
            "SecondaryIPAddresses": null,
            "SecondaryIPv6Addresses": null,
            "EndpointID": "",
            "Gateway": "",
            "GlobalIPv6Address": "",
            "GlobalIPv6PrefixLen": 0,
            "IPAddress": "",
            "IPPrefixLen": 0,
            "IPv6Gateway": "",
            "MacAddress": "",
            "Networks": {
                "scheduleplatform_backend": {
                    "IPAMConfig": null,
                    "Links": null,
                    "Aliases": [
                        "533f96d538bc",
                        "frontend"
                    ],
                    "NetworkID": "9a6ff7cb0c0d725de46e21e309cd0e5708995faffb00f099c8980127f8a9c68c",
                    "EndpointID": "c6c22efd535ee4beaa732730143268a4d372d2cecb2537f00013a7b057416852",
                    "Gateway": "172.20.0.1",
                    "IPAddress": "172.20.0.3",
                    "IPPrefixLen": 16,
                    "IPv6Gateway": "",
                    "GlobalIPv6Address": "",
                    "GlobalIPv6PrefixLen": 0,
                    "MacAddress": "02:42:ac:14:00:03",
                    "DriverOpts": null
                }
            }
        }
    }
]

推荐答案

我放弃了docker,现在使用NGINX将端口80指向3000...

基本上,在我的docker compose中.yml I将react端口指向自身,如下所示:

  frontend:
    container_name: react-frontend
    build: ./frontend/client
    ports:
      - "${REACT_PORT}:${REACT_PORT}"
    depends_on:
      - backend
    networks:
      - backend
    restart: always

使用NGINX,我编辑配置文件,执行以下操作:

然后在这个配置的http{}部分,我删除了include /etc/nginx/sites-enabled/*;

并添加

server {
        listen 80;
        location / {proxy_pass http://localhost:3000/; }
        }

然后重新加载nginx,现在docker正在端口3000转发,nginx指向该端口80.

这个方法很有效,我仍然不明白为什么Docker无法转发,我甚至判断了我的netstat,但在端口80上什么都没有运行...

Reactjs相关问答推荐

TypeError:b不是React.js中的函数错误

react 路由GUGUD Use Effect无法通过useNavigate正常工作

在React Create App TS项目中安装material UI

不同步渲染

需要特定的数学函数来标准化动画持续时间

为什么在页面重新加载时Location.State变得未定义?

悬停轴时重新绘制自定义参照线

获取类别和页面的参数

使用以Jest 的方式返回 Promise 的方法来模拟可构造的 API 类时出现问题

生产部署:控制台中 Firebase 无效 api 密钥错误

React-chartjs-2:红色和绿色之间的差距

找不到名称setCometChat

验证 Yup 中的对象项

React Context API 在 Next.js 中更改路由时获取默认数据

Mui DataGrid 在第二页和前一页上显示项目时出现问题

我可以同时使用 Gatsby 和 NEXT.JS 吗?

在 React-Select 中显示多值的倒序

FlatList 不在 React Native 中呈现项目

使用 react pro 侧边栏展开折叠菜单

Lodash 在命名导入中导入整个包