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 스타일을 사용하는 것이 적합하지 않다고 말합니다. 이제 # 앵커 포인트가 있나요? 그리고 일부에서는 해시 스타일을 구성하면 위챗 결제나 Angular의 딥패스에서 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 を使用します。リバースプロキシ、ロードバランシング、バラバラ…

ここでは nginx 環境があると仮定して、ここでは Windows を使用しています。 nginx.conf ファイルを開きます。詳細な説明は書きません。読みたくない場合は、設定ファイルを直接ダウンロードしてください。

ルート ディレクトリの構成は location/{} ではないことに注意してください。これは、すべてのリクエストが転送されることを意味します。

以上がAngular+javawebプロジェクトのNginx+Tomcatデプロイメント操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。