Angular+javaweb 프로젝트의 Nginx+Tomcat 배포 작업

처음에는 ng build –prod –aot를 사용하여 컴파일하고 패키징했습니다. 이제 공식적으로 내장되었으므로 패키징할 때 ng build –prod만 입력하면 됩니다. 여기에서 내 프로젝트 크기와 비교할 수 있습니다.

으아악

마지막으로 ng build –prod는 제품화를 위한 최소한의 패키징을 완성할 수 있음을 알 수 있습니다. 여기서 이해가 안 되는 부분이 있습니다. 사전 컴파일된 빌드가 일반 빌드보다 큽니다. 누군가가 나를 도와줄 수 있기를 바랍니다.

여기에서는 프로젝트를 더 작게 만드는 방법에 대해서는 이야기하지 않겠습니다.

dist에 있는 파일을 Tomcat의 ROOT 폴더에 복사하고 http://127.0.0.1을 열면 익숙한 프로젝트 페이지가 표시됩니다. 습관적으로 F5를 눌러 새로 고침을 했는데 404 오류가 발견되었습니다. Baidu에서 관련 질문을 찾아본 결과, 처음 페이지에 들어갈 때 일반 프로세스 실행과 일반 프로세스가 모두 Angular의 라우팅 메커니즘에 의해 처리된다는 결론에 도달했습니다. 그러나 새로 고침 작업이 있는 경우 백엔드 서비스로 전송된 요청입니다. 백엔드가 요청을 index.html(여기서는 단일 페이지 애플리케이션 입구를 나타냄)로 리디렉션하지 않으면 보고합니다. 404 페이지를 찾을 수 없습니다.

와, 말이 너무 길어졌네요. 하지만 적어도 이유를 알고 있다면 어떻게 해결해야 할지 고민해 보아야 합니다!

해결책 1:

Angular의 URL 스타일을 해시 스타일로 구성합니다. 이 방법은 제가 본 것 중 가장 일반적인 방법이며 모두 StackOverflow에서 복사되었습니다. 요즘은 H5 pushstate 스타일이 일반적으로 사용되는데, Angular 공식에서는 해시 스타일을 사용할 이유가 충분하지 않다면 최대한 H5 스타일을 사용하는 것이 적절하지 않다고 말합니다. # 지금 앵커요? 그리고 일부 사람들은 해시 스타일을 구성하면 위챗 결제나 앵글의 딥패스에서 여전히 404 문제가 발생할 것이라고 지적했다. 굳이 사용하시더라도 문제 없습니다. 자세한 내용은 공식 문서를 참조하세요

해결책 2:

404라고 나오니까 그냥 톰캣 루트디렉터리로 에러페이지를 지정하면 되지 않나요?

설명: Tomcat 컨테이너 디렉터리인 Tomcat/conf/web.xml을 열고 맨 아래로 이동한 후 위에 다음 코드를 추가합니다.

구성 후 Tomcat을 다시 시작하세요. 지금은 어떻게 새로 고쳐도 페이지가 문제 없이 표시됩니다. 그러나 페이지가 표시될 수는 있지만 네트워크 태그 아래에 404 요청이 표시된다는 사실을 발견했습니다. 즉, 새로고침한 순간 Angle은 페이지를 찾을 수 없었지만 Tomcat에 의해 404로 index.html로 이동되었습니다. 톰캣은 길을 잃은 사람을 올바른 길로 인도했지만, 동시에 그에게 "그 사람은 나쁜 사람이었다"는 낙인을 찍기도 했습니다. 오류 페이지를 구성하는 방법이 적절한지 여부에 대해서는 먼저 이 404 표시가 우리에게 가져올 문제에 대해 이야기하겠습니다. 우선, 404 오류 페이지를 처리하는 플랫폼을 만나는 한 당신은 확실히 불운합니다. 예를 들어, WeChat이 귀하에게 404 페이지가 있음을 감지하면, 잃어버린 아이들이 집을 찾는 데 도움이 되는 페이지를 즉시 제공합니다.

그는 매우 성실하고 친절합니다. 그는 공공 복지를 위해 좋은 일을 했지만 당신의 직업은 사라질 것입니다. 귀하의 페이지가 공식 계정에 배치되어 있고, 승인하자마자 자녀 찾기 페이지에 들어가면 관리자가 귀하를 해킹하여 죽이지 않는 것이 좋습니다. 따라서 이 방법을 사용할지 여부는 귀하에게 달려 있습니다!

해결책 3

페이지를 못찾으시면 백엔드에서 안내해드릴게요! 인터셉터나 필터를 작성합니다. 요청을 보내기 전에 먼저 index.html로 리디렉션해 드리겠습니다. 문제 없습니다. 물론 문제는 없습니다. 질병의 원인에 맞는 특정 약을 찾는 것입니다~ 이 모든 것이 완벽한 해결책인 것 같습니다~ 하지만 오늘 주제에서는 다루지 않았으므로 몇 가지 문제를 선택해야 합니다. 이 솔루션! 그렇지 않으면 우리의 궁극적인 움직임이 무미건조해 보일 것입니다.
우리 프로젝트는 앞뒤로 분리되어 있으므로 상태 비저장 서비스입니다. 백엔드는 데이터베이스 작업을 담당하고 관련 인터페이스 데이터를 프런트엔드에 반환합니다. 프런트엔드는 디스플레이 로직 처리 및 백엔드와의 상호 작용만 담당합니다. 자주 전달하세요,
백엔드 ps: 페이지를 처리하지 말라고 하면서도 계속 전달하라고 하더군요. 바보인가요? 백엔드가 전달 작업을 원하지 않는 경우 어떻게 할 수 있나요? 물론 운영과 유지관리에 방해가 됩니다!

솔루션·궁극

如果是維運大神，那估計你可以在旁邊喝茶就好了。如果是…萌新？那你當前端，就可以幫(zhuang)忙(bi)了，用nginx啊！反向代理，負載平衡,balabala…

這裡假裝你有nginx環境，我這裡用到的是windows。開啟nginx.conf文件，不寫具體描述了，自己看註釋，如果不想看的，可以直接去下載該設定檔。

要注意的是根目錄配置並不是location / {}，這代表所有請求都做轉送。

위 내용은 Angular+javaweb 프로젝트의 Nginx+Tomcat 배포 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!