我有一个用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本身,但这没有任何区别。
我也试过同时删除映像和容器并删除卷,也没有任何结果。
任何帮助或指导将不胜感激。
1条答案
按热度按时间ioekq8ef1#
我将它放在这里,因为这是别人很容易犯的错误。我在启动服务器时忘记将文件夹切换到
./build
,npx http-server
默认运行./public
文件夹而不是./build
这种情况下的解决方案是添加指向build文件夹的
WORKDIR
: