Accumulation of front-end Nginx deployment project problems

Proxy Configuration Demo

在Server中配置
location /api/system {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection ‘upgrade’;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_cache_bypass $http_upgrade;
proxy_pass http://192.168.163:8080/system;
}

insert image description here

After ctrl+c exits the editing mode, :wq saves a read-only prompt solution

insert image description here

When this kind of error occurs, vim cannot be exited . The reasons for this error are:
1. The error is that the current user does not have permission to modify the file.
2. The file was not saved and exited correctly, it is being opened, and it is closed and then saved.
3. If all the files are closed, it prompts that some people have not closed them, then delete the temporary files of the file and then open, modify and save normally.
Solution:
The first method: If you have root authority, you can enter: wq! Forced to save and exit.
The second method:
(1) Press
ESC

(2) Input : set noreadonly
(3) Input : wq to save and exit

After the deployment is successful, the page can be opened normally, but a 404 appears when it is refreshed

Questions:
1. Why does the page refresh (without configuration and not in the root directory of the home page)
2. Why does it happen (sometimes) when you click to jump?
Reason: routing history mode
1. Assume that the url on the browser is 172.1.2.3 :7000/test, when the page is refreshed at this time, it will go to the server (nginx) to request the corresponding static resources according to the url on the browser, and nginx does not find the corresponding static file "test" in the dist folder according to the matching rules of location / ", so return 404, reasonable.
At this time, redirect and return the index.html file by configuring try_files, that is, go back to the homepage " / ". Note that your page has been refreshed at this time. At this time, react-router or vue-router routing will play a role and will be based on the current The url address corresponds to the matching component, so at this time the url corresponds to the component, the page is reloaded, and the job is over.
2. The second question, why is it possible to jump when you click and sometimes not? You must know that there are two situations for jumping: one is page refresh (belonging to the first question), and the other is not refreshing. It depends on how your code is written, please remember:
(1) push will not refresh the page, but will only change the url route change on the browser, both react-router and vue-router are implemented using html api, It’s called pushState() (2) It will refresh the page, which is equivalent to
a label.
Solution:
add try_files $uri $uri/ /index.html to the configuration; When corresponding to static resources, the modulation jumps to the index.html file, as shown in the figure:

insert image description here

Related commands:

nginx startup command: /usr/local/nginx/sbin/nginx
Modify nginx configuration file: vim /usr/local/nginx/conf/nginx.conf
Edit mode: shift + i After editing: wq Save and exit after
editing and restart: / usr/local/nginx/sbin/nginx -s reload

Reference link: https://www.jianshu.com/p/d9342c2cc02e

Guess you like

Origin blog.csdn.net/weixin_45680024/article/details/127217739