我创建了一个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欢迎页面。
1条答案
按热度按时间mhd8tkvw1#
已解决!我在Dockerfile中将user修改为usr解决了这个问题,现在我的Dockerfile是: