Welcome to nginx page on React dockerized app

Question

I created a React app and oused react-router for the routes. When I serve the app using npm start, it works perfectly. But when I dockerize it and use nginx, all I get when executing the app is the "Welcomer to nginx!" page. This is how I handle the routes with react-router:

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>
  );
}

This is my Docker file:

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

And this is my nginx/nginx.conf file:

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;
    }
  }
}

This is what I see when I run the app with Docker:

Any ideas on what could be wrong?

• I've already googled the issue and tried multiple nginx configurations but I still get the same nginx welcome page.

Answer 1

Solved! I solved it by changing user to usr in the Dockerfile. This is my Dockerfile now:

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 /usr/share/nginx/html