docker 停靠的React构建呈现空页面

mmvthczy  于 2022-12-29  发布在  Docker
关注(0)|答案(1)|浏览(108)

我有一个用create-react-app初始化的React项目,我正在Docker容器中构建和部署该项目。当容器运行时,构建完成,没有任何错误,构建的文件夹在其中创建,我可以部署并到达index.html。问题是,index.html似乎不调用任何内置的JavaScript。另一方面,在主机上并非如此,在那里构建工作没有任何问题。没有环境变量,我知道关闭(我没有手动添加任何),应该在主机系统上,影响这一点。
我将忽略React代码,因为它在主机和构建上工作,没有引发任何错误。
这是我的docker-compose.yml

# docker compose -f docker-compose.yml --env-file ./env/prod.env up -d --build
version: "3.9"
services:
  admin-console:
    env_file: ./env/prod.env
    image: "eaap-admin-console"
    volumes:
      - ./modules/admin-console:/usr/src/app:delegated
      - /usr/src/app/node_modules
    build: 
      context: ./modules/admin-console
      target: ${BUILD_TARGET}
      args:
        - ADMIN_CONSOLE_CONTAINER_PORT=${ADMIN_CONSOLE_CONTAINER_PORT}

这是prod.env

# =====================================
# GLOBAL
# =====================================
BUILD_TARGET=prod
# =====================================
# admin-console
# =====================================
# ----------------------------------------
# General:
# ---
ADMIN_CONSOLE_BASE_URL=http://host.docker.internal:3012
# ----------------------------------------
# Environment:
# ---

# ----------------------------------------
# Ports:
# ---

# Port on which app runs on host machine
ADMIN_CONSOLE_CONTAINER_PORT=8080
# Port on which app runs on inside container
ADMIN_CONSOLE_HOST_PORT=3012

这是我的Dockerfile

# =====================================
#               BASE
# =====================================
ARG ADMIN_CONSOLE_CONTAINER_PORT=80
FROM node:16-alpine3.15 as base
# Create app directory
WORKDIR /usr/src/app
# =====================================
#               INSTALL
# =====================================
FROM base as install
COPY ./package*.json ./
RUN npm install
COPY . .
# =====================================
#               DEVINSTALL
# =====================================
# Dev install is using a volume to copy source
FROM install as devInstall
RUN npm install
# =====================================
#               TEST
# =====================================
FROM install as test
RUN CI=true npm run test 
# =====================================
#               PROD
# =====================================
FROM install as prod
RUN npm run build
CMD ["npx", "http-server"]

这是package.json

{
  "name": "react-boilerplate",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/material": "^5.10.5",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.45",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "eslint-config-prettier": "^8.5.0",
    "install": "^0.13.0",
    "npm": "^8.19.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-flow-renderer": "^10.3.16",
    "react-router": "^6.3.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "socket.io-client": "^4.5.2",
    "styled-components": "^5.3.6",
    "web-vitals": "^2.1.4",
    "zustand": "^4.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src --fix"
  },
  "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"
    ]
  },
  "devDependencies": {
    "@testing-library/react": "^13.3.0",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-standard-with-typescript": "^23.0.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-n": "^15.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "http-server": "^14.1.1",
    "typescript": "^4.8.4"
  }
}

我连接到它从主机浏览器上的URL:http://localhost:3012
有一个异常我已经注意到,这是<link>manifest.json是:

<link rel="manifest" href="%PUBLIC_URL%/manifest.json">

当然哪一点不存在,而当构建运行并部署在主机上时,使用相同的方法,它是:

<link href="/static/css/main.8cd4d5c3.css" rel="stylesheet">

这是每个标签导入数据的情况,我试过将homepage添加到package.json,将PUBLIC_URL环境变量添加到build-args和container本身,但这没有任何区别。
我也试过同时删除映像和容器并删除卷,也没有任何结果。
任何帮助或指导将不胜感激。

ioekq8ef

ioekq8ef1#

我将它放在这里,因为这是别人很容易犯的错误。我在启动服务器时忘记将文件夹切换到./buildnpx http-server默认运行./public文件夹而不是./build
这种情况下的解决方案是添加指向build文件夹的WORKDIR

FROM install as prod
RUN npm run build
WORKDIR /usr/src/app/build
CMD ["npx", "http-server"]

相关问题