执行npm run build时public文件夹未打包，Nginx部署显示默认页面求助

问题描述 #

执行npm run build后，系统生成了dist文件夹并编译了src目录下的所有文件，但public文件夹中的文件均未被包含在内。使用Nginx部署站点时，页面显示标准的"Welcome to nginx"提示信息。

相关配置 #

package.json片段 #

...
"scripts": {
    "start": "react-scripts start",
    "build": "tsc -p tsconfig.json",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "plugins": [
      "react-hooks",
      "@typescript-eslint"
    ],
    "rules": {
      "react-hooks/exhaustive-deps": 0
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/dateformat": "^5.0.0",
    "@types/glidejs__glide": "^3.4.0",
    "@types/google-map-react": "^2.1.2",
    "@types/jsonwebtoken": "^8.5.8",
    "@types/react-dates": "^21.8.3",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-sticky": "^6.0.4",
    "autoprefixer": "^10.4.7",
    "file-loader": "^6.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.0.24"
  },
...

tsconfig.json配置 #

{
  "compilerOptions": {
    "baseUrl": "./src",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx",
    "outDir": "./dist",
    "typeRoots": [
      "./node_modules/@types"
    ]
  },
  "include": [
    "src"
  ]
}

Dockerfile配置 #

# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install --force
COPY . .
RUN npm run build

# production stage
FROM nginx:1.16.0-alpine
COPY --from=build-stage /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

项目结构 #

app
|-- node_modules
|-- public
|-- src
|-- package.json
|-- README.md
|-- etc...

解决方案 #

1. 修正build命令 #

你的build脚本直接使用tsc编译TypeScript文件，这只会处理src目录下的代码，不会触发Create React App的完整构建流程（包括复制public文件夹静态资源、生成入口index.html等）。将package.json中的build命令改为：

"build": "react-scripts build"

2. 调整Dockerfile的复制路径 #

Create React App默认将构建产物输出到build文件夹，因此需要修改Dockerfile中的复制路径：

# 替换原有的复制命令
COPY --from=build-stage /app/build /usr/share/nginx/html

如果坚持要将产物输出到dist文件夹，可以通过设置环境变量实现，在build命令前添加BUILD_PATH=dist：

"build": "BUILD_PATH=dist react-scripts build"

此时Dockerfile中的复制路径保持/app/dist即可。

3. 验证public文件夹内容 #

确保public目录下存在index.html文件，这是CRA构建时生成页面入口的模板文件。如果缺失，构建后的产物将没有正确的入口页面，Nginx会因找不到默认页面而显示欢迎界面。

内容的提问来源于stack exchange，提问作者Pablo T