Recently, some problems have occurred when deploying projects, as shown in the figure
The normal login interface is accessible, but after logging in, the address after accessing will be reported 404 error, so I checked to see if there were any configuration errors, but after checking, I found that the IP and port of the two configuration files nginx.conf and config.js were correct
This project has been deployed many times and no such error has occurred.
This is the original untouched decompressed source file of nginx.conf
The circled place should be According to the project configuration corresponding ip and the listening port
listen corresponds to the port, and server_name corresponds to Accessedip
#But this does not solve the problem, we need to add the following sentence
try_files $uri $uri/ /index.html;
The added location should be here
Add it in the location section under server, and then restart nginx
In the directory where nginx.exe is located, click on the address bar and enter cmd. You can start the command line directly in the directory without opening cmd and then jumping. Table of contents.
If the nginx service has not been closed before, stop it first and then open it. If it has been closed, you can directly enter the command to start the service
Stop nginx service command:
nginx -s stop
Start nginx service command:
start nginx
Hot deployment nignx service command:
(But It is not recommended to use this command. Sometimes this command does not work. It is better to stop and start it directly)
nginx -s reload
After restarting nginx, it is best to clear the cache of the browserTest again
You can directly press
Ctrl Shift Del
in the browser window to directly open the cache clearing dialog box
Retest, you can access normally
Supplement: After Nginx deployment, there is no problem with normal clicks. Refreshing the page will cause a 404 problem.
After the project is deployed to the server, there is no problem with root path access (http:10.10.10.10), but 404 will appear when entering other functions and refreshing the page, such as
http:10.10.10.10/test /test/test Refresh the page and a 404 will appear because you did not add a redirection jump in the nginx configuration.
Solution, just add this configuration:
try_files $uri $uri/ /index.html;
server { listen 80; server_name 127.0.0.1; location / { root /data/htdocs/FactoryModel/micro-front-end/industrial-internet-platform-main-vue; index index.php index.html index.htm; # add_header Cache-Control; add_header Access-Control-Allow-Origin *; if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){ add_header Cache-Control max-age=7776000; add_header Access-Control-Allow-Origin *; } try_files $uri $uri/ /index.html; } }
This configuration means every match When the corresponding static resource cannot be found in the url path, modulate and jump to the index.html file
You can add it here as shown
The following content requires a little understanding of the working principle of router routing and the principle of nginx
Analysis of why this happens (for routing in history mode):
Ask the question first:
1. Why does it happen when refreshing the page (without configuration and not Home page root directory refresh)
2. Why does it happen (sometimes) when clicking to jump
Now let’s solve the problem:
1. Assume that the url on the browser is now 172.1.2.3:7000/test. When refreshing the page, it will request the corresponding static resource from the server (nginx) according to the URL on the browser. nginx did not find the corresponding static resource in the dist folder according to the matching rule of location / File "test", so 404 is returned, which is reasonable.
At this time, configure try_files to redirect back to the index.html file, that is, go back to the homepage "/". Note that your page has been refreshed at this time, and react-router or vue-router is routing. When it works, the component will be matched according to the current URL address, so at this time the URL is the corresponding component, the page is reloaded, and it's done.
2. The second question is, why click to jump sometimes but not sometimes? You must know that there are two situations of jump: one is page refresh (belonging to the first question), and one is page does not jump. refresh. This depends on how your code is written. Please remember:
1. Push will not refresh the page, but will only change the url routing change on the browser, whether it is react-router or vue-router. They are all implemented using the html api, called pushState()
2. Passing will refresh the page, which is equivalent to a tag
You can try it on the browser by yourself
So when you click to jump, sometimes your code uses push (not refresh), and sometimes you use a tag or Link (refresh), which causes this problem.
The above is the detailed content of How to solve Nginx 404 error. For more information, please follow other related articles on the PHP Chinese website!

NGINXUnit can be used to deploy and manage applications in multiple languages. 1) Install NGINXUnit. 2) Configure it to run different types of applications such as Python and PHP. 3) Use its dynamic configuration function for application management. Through these steps, you can efficiently deploy and manage applications and improve project efficiency.

NGINX is more suitable for handling high concurrent connections, while Apache is more suitable for scenarios where complex configurations and module extensions are required. 1.NGINX is known for its high performance and low resource consumption, and is suitable for high concurrency. 2.Apache is known for its stability and rich module extensions, which are suitable for complex configuration needs.

NGINXUnit improves application flexibility and performance with its dynamic configuration and high-performance architecture. 1. Dynamic configuration allows the application configuration to be adjusted without restarting the server. 2. High performance is reflected in event-driven and non-blocking architectures and multi-process models, and can efficiently handle concurrent connections and utilize multi-core CPUs.

NGINX and Apache are both powerful web servers, each with unique advantages and disadvantages in terms of performance, scalability and efficiency. 1) NGINX performs well when handling static content and reverse proxying, suitable for high concurrency scenarios. 2) Apache performs better when processing dynamic content and is suitable for projects that require rich module support. The selection of a server should be decided based on project requirements and scenarios.

NGINX is suitable for handling high concurrent requests, while Apache is suitable for scenarios where complex configurations and functional extensions are required. 1.NGINX adopts an event-driven, non-blocking architecture, and is suitable for high concurrency environments. 2. Apache adopts process or thread model to provide a rich module ecosystem that is suitable for complex configuration needs.

NGINX can be used to improve website performance, security, and scalability. 1) As a reverse proxy and load balancer, NGINX can optimize back-end services and share traffic. 2) Through event-driven and asynchronous architecture, NGINX efficiently handles high concurrent connections. 3) Configuration files allow flexible definition of rules, such as static file service and load balancing. 4) Optimization suggestions include enabling Gzip compression, using cache and tuning the worker process.

NGINXUnit supports multiple programming languages and is implemented through modular design. 1. Loading language module: Load the corresponding module according to the configuration file. 2. Application startup: Execute application code when the calling language runs. 3. Request processing: forward the request to the application instance. 4. Response return: Return the processed response to the client.

NGINX and Apache have their own advantages and disadvantages and are suitable for different scenarios. 1.NGINX is suitable for high concurrency and low resource consumption scenarios. 2. Apache is suitable for scenarios where complex configurations and rich modules are required. By comparing their core features, performance differences, and best practices, you can help you choose the server software that best suits your needs.


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Dreamweaver Mac version
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version
Useful JavaScript development tools