페이지의 HTML 쓰기 유지

14812 단어 CSSHTMLtech
최초 출시: https://qiita.com/studio15/items/3e5939bcf38d023fda16
웹 서비스를 유지보수 모드로 전환하기 위해 서버를 설정했다는 기사는 많지만, 중요한'유지보수 알림 페이지의 HTML을 어떻게 만드는가'라는 부분은 별로 언급되지 않는다는 점을 중심으로 정리했다.

전제: 웹 서버를 유지보수 모드로 설정하려면


유지 보수 페이지를 제외한 모든 페이지에서 HTTP 상태 코드 503을 반환합니다.
상태 코드를 정확하게 되돌릴 수 없음을 주의하십시오.
설정 예는'아파치 유지보수'나'nginx 유지보수'같은 단어로 검색하면 많이 나오기 때문에 생략했습니다.
AWS를 사용할 때 ALB와 CloudFront의 유지보수 페이지(Sorry 페이지) 기능은 IaS 측에서 사용할 수 있다.
DNS 레벨에서 서버를 전환해서 유지보수 페이지를 표시하는 방법(내 마음속에는을무법이라고 부른다)은 DNS 전환의 시기가 정확하지 않고 목적지를 503으로 전환하는 등 번거로운 방법이기 때문에 긴급한 상황을 제외하고는 사용하고 싶지 않다는 뜻이다.

페이지 유지 관리 방법


유지보수 페이지는 복잡한 일을 하려면 분쟁을 일으킬 수 있으므로 가능한 한 간단하게 설치해야 한다.
하나의 파일로 완성
다른 파일로 CSS와 이미지를 준비하면 Apache와nginx의 설정이 복잡해지고 ALB의 Sorry 페이지와 같은 여러 파일에 대응하지 않으면 사용할 수 없기 때문에 CSS는 헤드에 쓰거나 온라인으로 있고 이미지는base64로 1개 파일에 삽입됩니다.
로그 파일에도 이미지와 CSS에 대한 200 접근이 없기 때문에 상황을 파악하기 쉽다고 생각합니다.
(favicon도base64로 삽입할 수 있지만 Edge에 표시되지 않음 때문에 억지로 삽입할 필요가 없음)
HTML5(점진적 향상)
만약 서비스 자체가 IE 11을 지원한다면 유지보수 페이지도 대응할 수밖에 없기 때문에 한 줄 한 줄 강화되어 실현될 것이다.
하지만 복잡한 일을 하겠다는 것도 아니어서 보통 쓰면 IE 11도 제대로 나와야 한다.
스펀지 패드
모든 장치에 HTML 한 장을 사용해야 하기 때문에 스펀지를 돌려야 한다.
스마트폰이라면 너비를 엄마로 쓰면 되지만 컴퓨터에 폭 제한을 가하지 않으면 헷갈리기 때문에 너비를 640px 정도로 줄여야 한다.
일본어 UTF-8 지원
지금은 코드가 깨지는 경우가 드물지만 랑과 카셋을 예의 바르게 지정해 주시기 바랍니다.
Analytics를 가져와야 합니까?
판단이 엇갈릴 수 있지만 개인적으로는 의도적으로 야기된 503쪽 방문을 통계에 올리고 싶지 않은데, 유지보수 기간에 프라이버시 정책 페이지와 GDPR이 보이지 않는 점을 고려하면 가입하지 않아도 된다고 생각한다.
연락처를 제시하다
상담 양식을 볼 수 없기 때문에 이용자들이 보기에 연락처가 잘 보이지 않는다.
유지보수 중 사용자가 대표전화에 문의했다고 들었기 때문에, 전화에 대응할 수 있는 자원이 없으면 메일 주소나 Google 형식을 명기하는 것이 좋습니다.
유지 보수 기간 명기
Backlog 503페이지에 Twitter를 삽입했습니다. 저는 이것이 유지보수 상황을 실시간으로 파악할 수 있는 좋은 방법이라고 생각합니다. 그래서 정기적으로 유지보수를 해야 하는 상황에서 토론을 하고 싶습니다.
하지만 기본적으로 의도적으로 유지보수를 한다면 간단하게 종료 시간을 돋보이게 하면 사용자가 이해하기 쉬우므로 트위터는 링크로만 표시해도 괜찮을 것 같다.

HTML의 예


간단한 표시 확인만 했기 때문에 위코드 정도의 것으로 봐주셨으면 좋겠습니다.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ただいまメンテナンス中です | EXAMPLE.COM</title>
<style>
  body {
    margin: 0;
    padding: 0;
    background: #eee;
  }
  #conainer {
    margin: 0 auto;
    padding: 20px;
    max-width: 600px;
    background: #fff;
  }
  h1 {
    font-size: 2em;
  }
  .warn {
    padding: 1em;
    background: #ff7;
  }
  .note {
    font-size: 0.8em;
  }
  #footer {
    text-align: center;
  }
</style>
</head>

<body>
  <div id="container">
    <img src="data:image/png;base64,略" alt="EXAMPLE.COM">
    <h1>ただいまメンテナンス中です</h1>
    <p>
      システムアップデートのためサービスを停止しています。<br>
      ユーザーの皆様にはご不便をおかけしますが、メンテナンス終了まで今しばらくお待ち下さい。<br>
    </p>
    <h2>メンテナンス期間</h2>
    <p class="warn">
        2020年1月1日（水） 00:00 〜 <strong>12月31日（木） 23:59</strong><br>
    </p>
    <p class="note">
      実施時間は前後する可能性があります。<br>
      最新の情報は<a href="https://twitter.com/{username}">Twitter</a>にて更新しています。<br>
    </p>
    <h2>
     お問い合わせ
    </h2>
    <p>
      メンテナンスに関するお問い合わせは<a href="mailto:[email protected]">[email protected]</a>までお願いします。
    </p>
    <hr>
    <div id="footer">
      &copy; example.com
    </div>
  </div>
</body>
</html>
[서평] 모바일 엔지니어를 위한 AWS 해설서'아마존 웹 서비스 클라우드 로컬 응용 개발 기술'의 소개
Vue를 사용하여 훌륭한 문서 웹 사이트 구축

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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