Apache의 mod_rewrite를 사용하는 깨끗한 URL의 각도

3678 단어 webdevangulartutorialjavascript
Angular에는 필요한 모든 것을 처리하는 정말 멋진 라우터가 있습니다. 데이터를 미리 가져오고 특정 경로를 보호하며 모듈을 지연 로드합니다. 이 모든 것이 기본적으로 작동하며 정말 대단하다고 생각합니다.

Apache를 사용하여 공개/프로덕션 환경을 제공할 때 'whatwhat.app/page/3'과 같이 아름답고 깨끗한 URL을 원합니다. 사람들이 해당 페이지를 직접 방문하고 인덱스/홈페이지를 통해 오지 않을 때에도 Angular의 라우팅이 시작되도록 하려면 몇 가지 추가 구성이 필요합니다.

해당 파일이 실제로 서버에 없기 때문에 기본적으로 404 페이지가 표시됩니다. mod_rewrite를 사용하면 해당 모듈이 켜져 있는 경우 Apache에서 이 동작을 조정할 수 있습니다(대부분의 경우). Apache에 대한 구성은 .htaccess를 사용하여 폴더별로 변경할 수 있습니다.

Apache의 mod_rewrite 및 .htaccess



아래 구성을 복사하여 .htaccess 파일이 포함된 동일한 폴더의 index.html 파일에 드롭하십시오. 그게 다야!

# Check if mod_rewrite module is available
<IfModule mod_rewrite.c>

  # Turn the rewrite engine on and set URI base
  RewriteEngine On
  RewriteBase /

  # Serve files when they are found 
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR] 
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d 
  RewriteRule ^ - [L] 

  # When file is not found, serve index.html instead
  RewriteRule ^ /index.html

</IfModule>


선택사항: 하위 디렉토리에서 Angular 앱 실행



Angular는 그 위의 경로를 알아야 하므로 추가 구성이 필요합니다. 가장 쉬운 방법은 다음과 같이 <head>의 index.html 태그에 기본 태그를 추가하는 것입니다. 물론 경로가 귀하의 것과 일치하도록 조정되어야 하는 경우 Angular 앱 위의 경로인지 확인하십시오(무시해야 함).

또 다른 방법은 주입하는 것입니다. 환경마다 구성이 다른 경우 더 쉬울 수 있습니다(예: dev/acc/prod). 자세한 내용은 Angular APP_BASE_HREF 문서에서 확인할 수 있습니다.

하위 디렉토리를 사용할 때 <base href="/app/path/">에서 다음과 같이 변경하십시오.
  • .htacces는 RewriteBase /로 변경되어야 합니다.
  • RewriteBase /app/path/는 RewriteRule ^ /index.html여야 합니다.
  • RewriteRule ^ /app/path/index.html 파일이 Angular의 .htaccess 파일과 동일한 디렉토리에 있는지 확인하십시오.

    • mod_rewrite가 Angular에 대해 수행할 작업



    무슨 일이 일어나고 있는지에 대한 약간의 배경 정보를 원하는 당신을 위해.

    Apache가 하는 일은 방문자가 요청할 때 파일을 제공하는 것입니다. 'whatwhat.app'과 같은 홈페이지의 경우 index.html를 제공합니다. index.html의 구성을 사용하면 약간 변경됩니다.
  • 파일이 발견되면 Apache는 방문자에게 해당 파일을 제공하여 js, css 및 이미지와 같은 자산을 로드할 수 있는지 확인합니다. 여기에는 Angular 프로젝트도 포함됩니다. 그것은 .htaccess 및 RewriteCond 로 수행됩니다. 요청의 URI만 사용합니다.
  • 그 후 다른 대체 파일RewriteRule이 있으며 파일을 찾을 수 없는 경우에만 실행됩니다. URI를 RewriteRule 로 변경합니다. 이로 인해 Apache는 /index.html 파일을 찾아 대신 제공합니다. 이 경우 Angular 앱이 방문자에게 제공됩니다.
  • 'whatwhat.app/'에서 'whatwhat.app/page/3'으로 이동할 때 Angular가 작업을 수행하지만 'whatwhat.app/page/3'을 바로 방문하면 바로 원하는 것입니다. away Apache는 그것을 찾으려고 노력할 것입니다. 할 수 없습니다. 대신 앱을 제공하면 Angular 라우터가 로드되고 인계되어 나중에 해결됩니다.
  • 모든 404 페이지는 Angular 라우터에서 찾을 수 없는 경로이며 오류 페이지도 표시해야 합니다. 그건 너에게 달렸어.

    • 더 많은 가능성



    서버로 전송되지 않는 해시태그 라우팅도 사용할 수 있습니다. 이는 경우에 따라 대안이 될 수 있으며 보안에도 좋을 수 있습니다(매개변수가 있는 경우 서버로 전송하지 않으려는 경우). 나는 이것에 대해 별도의 기사에서도 쓸 것입니다.

    또한 Angular의 i18n을 사용하고 깨끗한 URL을 원하십니까? 라는 글을 쓴 적이 있습니다. Angular 앱 자체를 정말 쉽게 번역하기 위해 내가 만든 .

    나는 다른 웹 서버와 CDN에 대한 기사도 작성하고 있습니다. 계속 주시하려면 저를 따르십시오. 팁이나 질문이 있으십니까? 댓글이나 에서 저에게 연락하세요. 읽어 주셔서 감사합니다!


    사진 제공: Andrew Ruiz on Unsplash
    루보캅 LTS
    여자 친구가 Wordle에서 부정 행위를 할 수 있도록 나쁜 코드를 작성하는 데 오후를 낭비하는 방법...

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage