Nginx+Tomcat deployment operation of Angular+javaweb project

Initially, I used ng build –prod –aot to compile and package. Note here that since it is now officially built-in, you only need to enter ng build –prod when packaging. Here you can compare it with my project size:

ng build : 8,348,761字节
ng build –aot : 9,232,405字节
ng build –prod : 1,839,811字节
ng build –prod –aot : 1,839,811字节

Finally, it can be seen that ng build –prod can complete the minimum packaging for productization. I don't understand something here. The pre-compiled build is larger than the regular build. I hope someone can help me answer it.

I won’t talk about how to make the project smaller here.

When I copied the files in dist to the ROOT folder of Tomcat and opened http://127.0.0.1, the familiar project page was displayed. I habitually pressed F5 to refresh and found a 404 error. I searched for related questions on Baidu and came to the conclusion: when entering the page for the first time, the normal process and the normal process are processed by Angular's routing mechanism. However, if there is a refresh operation, it is a request sent to the back-end service. If the back-end does not redirect your request to index.html (here refers to the single-page application entrance), it will report 404 not found. Page error.

Wow, that’s so long-winded. But at least you understand the reason. If you know the reason, you should think about how to solve it!

Solution 1:

Configure Angular's url style to hash style. This method is the most common one I've seen, and it's all copied from StackOverflow. The pushstate style of H5 is now generally used, and Angular officials tell us that if there is not enough reason to use the hash style, it is better to use the H5 style as much as possible. Isn’t it appropriate for you to use an # anchor point now? And some people pointed out that if the hash style is configured, 404 problems will still occur in WeChat payment or the deep path of Angular. If you insist on using it, that’s no problem. Please refer to the official documentation for details

Solution 2:

Since it reports 404, wouldn’t you just specify the error page as the root directory in tomcat?

Description: Open the Tomcat container directory, Tomcat/conf/web.xml, move to the bottom, and add the following code above:

After configuration, restart Tomcat. No matter how I refresh it now, the page will display with no problem. But we found that although the page can be displayed, we can see 404 requests under the network tag. In other words, the moment we refreshed, angular could not find the page, but was directed to index.html as a 404 by Tomcat. Tomcat led a person who had gone astray back to the right path, but at the same time it also marked him as "he was a bad guy". Let’s not talk about whether the method of configuring an error page is appropriate. Let’s first talk about what problems this 404 mark will bring to us. First of all, as long as you encounter a platform that handles 404 error pages, you are definitely doomed. For example, if WeChat detects that you have a 404 page, it will immediately give you a page to help lost children find their homes.

He is very conscientious and kind. He has done a good job for the public welfare, but your job will be lost. If your page is placed in the official account and you enter the page for finding children as soon as you authorize it, it would be fine if your manager didn't hack you to death. So it’s up to you whether to use this method or not!

Solution 3

If you can’t find the page, I will guide you on the backend! I write an interceptor or filter. Before you send any request, I will redirect you to index.html first. This is no problem! Of course there is no problem. This is to find specific medicines for the cause of the disease~ All this seems to be a perfect solution~ However, we found that we have not covered it in today’s topic, and we must pick some problems with this solution! Otherwise our ultimate move would appear to be bland.
Since our project is separated from front to back, it is a stateless service. The backend is responsible for database operations and returns relevant interface data to the frontend. The frontend is only responsible for processing display logic and interacting with the backend. Frequent forwarding,
Backend ps: You told me not to process the page, and you still asked me to forward it. Are you stupid? If your backend just doesn’t want to do the forwarding work, what can you do? Of course it's bullying the operation and maintenance!

Solution·Ultimate

운영관리 마스터라면 그냥 옆에서 차만 마셔도 될 것 같아요. 만약...초보라면? 그런 다음 프런트 엔드로 nginx를 사용하여 (zhuang) (bi) 도움을 줄 수 있습니다! 역방향 프록시, 로드 밸런싱, 발라발라…

여기서 nginx 환경이 있다고 가정하고 여기서는 Windows를 사용하고 있습니다. nginx.conf 파일을 열고 구체적인 설명을 쓰지 말고, 주석을 직접 읽어보세요. 구성 파일을 직접 다운로드할 수 있습니다.

루트 디렉터리 구성은 location/{}이 아니라는 점에 유의해야 합니다. 이는 모든 요청이 전달된다는 의미입니다.

The above is the detailed content of Nginx+Tomcat deployment operation of Angular+javaweb project. For more information, please follow other related articles on the PHP Chinese website!