欢迎来到Nginx页面上的React dockerized应用

zy1mlcev  于 2023-04-20  发布在  Nginx
关注(0)|答案(1)|浏览(96)

我创建了一个React应用程序,并使用react-router来处理路由。当我使用npm start来服务应用程序时,它工作得很好。但是当我将其dockerize并使用nginx时,我在执行应用程序时得到的只是“Welcomer to nginx!”页面。这是我使用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>
  );
}

这是我的Docker文件:

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

这是我在使用Docker运行应用程序时看到的:

有没有什么可能出问题的想法?

  • 我已经在谷歌上搜索了这个问题,并尝试了多个nginx配置,但我仍然得到相同的nginx欢迎页面。
mhd8tkvw

mhd8tkvw1#

已解决!我在Dockerfile中将user修改为usr解决了这个问题,现在我的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 /usr/share/nginx/html

相关问题