HTTP 301이나 JavaScript가 없는 HTML 리디렉션의 잊혀진 기술

9937 단어


API 개발자가 가장 먼저 배우는 것 중 하나는 HTTP 코드입니다. 일반적으로 사람들은 이미 주변에서 약 404를 보았지만 곧 2xx, 4xx 및 5xx 코드의 사용에 대해 알게 됩니다. 아마도 교활한 독자인 당신은 내가 3xx 시리즈를 뛰어 넘었다는 것을 깨달았을 것입니다.

대부분의 처음 개발자는 3xx에 대해 들어본 적이 없지만 아마도 대부분이 3xx가 필요한 일부 시나리오를 거치지 않았기 때문일 것입니다. 이 시리즈에는 많은 코드가 있지만 여기에서 관심 있는 코드는 HTTP 301입니다. 개발자가 사용자를 리디렉션하려는 경우 301을 반환하면 리소스가 새 주소(응답에 지정됨)로 영구적으로 이동되었음을 클라이언트에 알릴 수 있습니다.

HTTP 301은 많은 경우에 유용할 수 있습니다.
  • 웹 사이트에서 주요 URL 변경이 있는 경우 URL을 리디렉션합니다(xyz.com/blog/2020/01/some-title에서 xyz.com/some-title로).
  • 인증(OAuth, 사용자 로그아웃 시 리디렉션)에 대한 리디렉션 흐름을 만듭니다.
  • URL 단축(xyz.com/foo를 foo.com으로 리디렉션).

    • HTTP 서버에서만 반환할 수 있습니다. 그러나 HTTP 서버를 유지하고 싶지 않을 때가 있습니다. SEO로 인해 이전 URL을 새 URL로 리디렉션하거나 정적 웹사이트와 함께 URL을 단축하려는 정적으로 생성된 웹사이트가 있을 수 있습니다.

    HTTP 서버를 설정 및 유지 관리하거나 타사에 의존하여 정적 사이트(예: Netlify 또는 Vercel 리디렉션 구성)에 대한 리디렉션을 설정하는 대신 정적(HTML) 파일을 대신 사용할 수 있습니다.

    JavaScript를 사용하여 window.location=https://foo.bar를 설정할 수 있지만 일부 사람들은 요즘 JavaScript를 비활성화한 상태에서 탐색하므로 작동하지 않을 수 있습니다. 정답은 <meta http-equiv="refresh" />에 있습니다.

    HTTP 리디렉션 코드로 작동하지만 완전히 클라이언트 측에서 수행됩니다. 이 기능은 in Netscape 1.1, back in 1995 및 there is a bit more explanation on the W3C website에서 소개되었습니다. 이 대신 HTTP 리디렉션을 사용하는 것이 여전히 권장되지만 정적 웹 사이트에는 때때로 이 선택 사항이 없을 수 있습니다(예: Github 페이지에서 호스팅되는 콘텐츠).

    사용해 보려면 다음 코드로 HTML 파일을 만든 다음 브라우저에서 엽니다. 브라우저는 파일을 로드하고 대상 URL로 바로 리디렉션해야 합니다.

    <!DOCTYPE html>
<html>
  <head>
    <title>Bruno L. Silva - Twitter</title>
    <meta http-equiv="refresh" content="0; url=https://twitter.com/brunoluiz" />
  </head>
</html>


    약속한 대로 이것은 일반 HTML입니다. 그러나 이와 같은 파일을 만드는 것은 약간 성가신 일이 될 수 있습니다. 또한 Github Pages에서 이 파일을 호스팅하고 링크를 공유하면 대상 URL의 메타데이터(예: <title> , OpenGraph 및 메타 태그)가 표시되지 않습니다. 즉, Facebook, Twitter, 메신저 등은 대상 세부 정보가 포함된 카드를 렌더링하지 않습니다.

    메타데이터를 복사하고 이러한 파일을 수동으로 설정하는 수동 작업을 피하기 위해 URLZap이라는 도구를 만들었습니다. YAML 구성을 기반으로 필요한 모든 메타데이터와 리디렉션 HTML 메타 태그가 포함된 HTML 파일을 생성합니다. CLI 또는 Github 작업on the project’s page을 통해 이를 사용하는 방법에 대한 세부 정보가 있습니다.

    YAML 구성 및 출력 파일은 아래 스니펫과 같습니다.

    # Example configuration file to be used with: urlzap generate --config ./config.yaml
path: './output'
urls:
  github: https://github.com




    <!-- Example output at ./output/github/index.html -->
<!DOCTYPE html>
<html>
    <head>
        <title>GitHub: Where the world builds software · GitHub</title>
        <link rel="canonical" href="https://github.com"/>
        <meta name="robots" content="noindex">
        <meta charset="utf-8" />
        <meta http-equiv="refresh" content="0; url=https://github.com" />
        <meta name="description" content="GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and features, power your CI/CD and DevOps workflows, and secure code before you commit it."/>
        <meta property="fb:app_id" content="1401488693436528"/>
        <meta name="twitter:image:src" content="https://github.githubassets.com/images/modules/site/social-cards/github-social.png"/>
        <meta name="twitter:site" content="@github"/>
        <meta name="twitter:card" content="summary_large_image"/>
        <meta name="twitter:title" content="GitHub: Where the world builds software"/>
        <meta name="twitter:description" content="GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat..."/>
        <meta property="og:image" content="https://github.githubassets.com/images/modules/site/social-cards/github-social.png"/>
        <meta property="og:image:alt" content="GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat..."/>
        <meta property="og:site_name" content="GitHub"/>
        <meta property="og:type" content="object"/>
        <meta property="og:title" content="GitHub: Where the world builds software"/>
        <meta property="og:url" content="https://github.com/"/>
        <meta property="og:description" content="GitHub is where over 65 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat..."/>
        <meta property="og:image:type" content="image/png"/>
        <meta property="og:image:width" content="1200"/>
        <meta property="og:image:height" content="620"/>
    </head>
</html>


    W3C 페이지에서 언급했듯이 개발자는 이 전략 대신 HTTP 301을 사용하는 것이 좋습니다. 그러나 이 전략을 사용하게 될 수 있는 몇 가지 유효한 사용 사례가 있습니다. URLZap이 있든 없든 웹사이트를 정적으로 호스팅하는 모든 사람은 웹 서버를 유지하거나 비용을 지불하지 않고도 리디렉션할 수 있어야 합니다. 거의 모든 곳에서 호스팅할 수 있으며 모든 브라우저에서 지원합니다.

    그리고 우리가 당연하게 여기는 일을 할 수 있는 다양한 방법을 찾는 것은 항상 흥미롭습니다 🙃
    알고리즘 강좌: 쌓기와 우선순위 대기열 실현 안내
    Elastic Search (1) ES 시작

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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