英文:
Welcome to nginx page on React dockerized app
问题
I see that you have a React app running in a Docker container with an Nginx server, and you're encountering the Nginx welcome page instead of your app. It seems like a routing issue. Here are a few steps to check:
- Ensure that the Docker image is built correctly and the React app's build files are copied to the Nginx serving directory.
- Make sure that your React app's HTML file (usually
index.html) includes the appropriate relative paths to CSS and JavaScript files. - Check your Nginx configuration. It appears to be set up to serve from
/usr/share/nginx/html, which is the default Nginx root directory. - Verify that your React app's routes are configured correctly. Ensure that the routes in your React app match the ones defined in your Nginx configuration.
- Double-check that there are no typos or errors in your Nginx configuration file.
If you've already tried these steps, and the issue persists, it might be helpful to check the Nginx error logs for any specific error messages that could provide more insight into the problem. You can access the Nginx error logs by running:
docker logs <container_id>
Replace <container_id> with the actual ID of your running Docker container. This should give you more information about what's going wrong with the Nginx setup.
Remember to restart your Docker container after making any changes to the Nginx configuration or the React app's build.
英文:
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.
答案1
得分: 1
解决！ 我通过在Dockerfile中将user更改为usr来解决了它。
这是我的Dockerfile现在的样子：
FROM node:16.17.0 作为构建
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
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论