Docker部署React路由应用显示Nginx欢迎页问题求助

我开发的React应用使用react-router管理路由，本地执行npm start启动完全正常，但Docker化并用Nginx部署后，打开页面只显示“Welcome to nginx!”默认页。已尝试多种Nginx配置仍无法解决，附上相关代码文件请求排查原因。

路由实现代码 #

function WallieRoutes() {

  return (
    <BrowserRouter>
      <Routes>
        <Route path={Locations.DEFAULT} element={<Landing />} />
        <Route path={Locations.LOGIN} element={<Login />} />
        <Route path={Locations.SIGN_UP} element={<SignUp />} />
        <Route path={Locations.VALIDATE} element={<ValidateUser />} />
        <Route path={Locations.VERIFICATE} element={<VerificateCode />} />
        <Route path={Locations.FORGOTPASSWORD} element={<ForgotPassword />} />
        <Route path={Locations.RESETPASSWORD} element={<ResetPassword />} />
        <Route path={Locations.HOME} element={
          <PrivateRoute>
            <Homepage />
          </PrivateRoute>
        } />
        <Route path={Locations.EXPENSES} element={
          <PrivateRoute>
            <Expenses />
          </PrivateRoute>
        } />
        <Route path={Locations.INCOMES} element={
          <PrivateRoute>
            <Incomes />
          </PrivateRoute>
        } />
        <Route path={Locations.INVESTMENTS} element={
          <PrivateRoute>
            <Investments />
          </PrivateRoute>
        } />
        <Route path={Locations.CONFIGURATION} element={
          <PrivateRoute>
            <Configuration />
          </PrivateRoute>
        } />
        <Route path={Locations.FINANCIAL_PROFILE} element={
          <PrivateRoute>
            <FinancialProfile />
          </PrivateRoute>
        } />
        <Route path={Locations.CARDS} element={
          <PrivateRoute>
            <Cards />
          </PrivateRoute>
        } />
        <Route path={Locations.SUBSCRIPTION} element={
          <PrivateRoute>
            <Subscription />
          </PrivateRoute>
        } />
        <Route path={Locations.SUBSCRIPTION_PROCESS} element={
          <PrivateRoute>
            <SubscriptionProcess />
          </PrivateRoute>
        } />
        <Route path={Locations.PREEXISTING_EXPENSES} element={
          <PrivateRoute>
            <PreexistingExpenses />
          </PrivateRoute>
        } />
        <Route path={Locations.ASK_WALLIE} element={
          <PrivateRoute>
            <AskWallie />
          </PrivateRoute>
        } />
        <Route path={Locations.GROUPS} element={
          <PrivateRoute>
            <Groups />
          </PrivateRoute>
        } />
        <Route path={Locations.CALENDAR} element={
          <PrivateRoute>
            <ExpenseCalendar />
          </PrivateRoute>
        } />
        <Route path={Locations.CASH_OR_CREDIT} element={
          <PrivateRoute>
            <CashOrCredit />
          </PrivateRoute>
        } />
        <Route path={Locations.INVESTMENTS_LANDING} element={
          <PrivateRoute>
            <InvestmentsLanding />
          </PrivateRoute>
        } />
        {/* <Route path={Locations.USER_INVESTMENT} element={
          <PrivateRoute>
            <UserInvestments />
          </PrivateRoute>
        } /> */}
        <Route path="*" element={<NotFound />} />
        <Route path={Locations.PROJECTIONS} element={
          <PrivateRoute>
            <Projections />
          </PrivateRoute>
        } />
        <Route path="*" element={<NotFound />} />
        <Route path={Locations.EXCHANGE_RATES} element={
          <PrivateRoute>
            <ExchangeRates />
          </PrivateRoute>
        } />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Dockerfile #

FROM node:16.17.0 AS build

WORKDIR /app

COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:1.19

COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build /app/build /user/share/nginx/html

nginx.conf配置文件 #

worker_processes  1;

events {
  worker_connections  1024;
}

http {
  server {
    listen 80;
    server_name  localhost;

    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;

    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

    location / {
      try_files $uri $uri/ /index.html;
    }
  }
}

• 修复Dockerfile路径错误：Dockerfile中拷贝build文件的路径写为/user/share/nginx/html，正确路径应为/usr/share/nginx/html（user多写了一个s），这个错误会导致React打包产物没有被放到Nginx的静态文件目录，从而加载默认欢迎页。修正后的拷贝命令应为：

  COPY --from=build /app/build /usr/share/nginx/html
  

• 清除Nginx默认配置冲突：部分Nginx镜像会默认加载/etc/nginx/conf.d/default.conf，若该文件存在会与自定义的nginx.conf冲突。可以在Dockerfile中添加命令删除默认配置：

  RUN rm /etc/nginx/conf.d/default.conf
  

• 验证打包产物是否正确拷贝：重新构建镜像并启动容器后，进入容器执行ls /usr/share/nginx/html，确认目录下存在index.html和static文件夹。
• 本地验证Nginx配置：先在本地将React打包产物放到Nginx的静态目录，使用相同的nginx.conf启动Nginx，验证应用是否能正常访问，排除配置本身的问题。

内容的提问来源于stack exchange，提问作者Santiago Rodríguez