CINXE.COM

<!DOCTYPE html> <html data-auth="" data-permalink="1" itemscope itemtype="http://schema.org/BlogPosting" lang=ja> <head> <meta charset=utf-8> <title>lowreal.net のHTTP2/HTTPS 化を実施 | tech - 氾濫原</title> <meta content="width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes" name=viewport> <meta content=#000000 name=theme-color> <link href=/feed rel=alternate title=Feed type=application/atom+xml> <link href="https://lowreal.net/2016/04/05/1" rel=canonical> <meta content=unsafe-url name=referrer> <meta content="lowreal.net のHTTP2/HTTPS 化を実施 | tech - 氾濫原" property=og:title> <meta content="article" property=og:type> <meta content="https://lowreal.net/2016/04/05/1" property=og:url> <meta content="/images/entry/2016-04-05" property=og:image> <meta content=cho45@lowreal.net property=og:email> <meta content=cho45 property=fb:admins> <link href="/css/style.css" rel=stylesheet> <link href="/css/github.css" rel=stylesheet> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel=stylesheet> <link href="/api/similar?id=20647&" rel=preload as=fetch crossorigin id=preload-similar-entries> <link href="/api/exif?id=20647&" rel=preload as=fetch crossorigin id=preload-exif-entries>   <script defer src="/js/daterelative.js"></script> <script defer src="/js/balancetext/tinysegmenter.js"></script> <script defer src="/js/balancetext/balance.js"></script> <script defer src="/js/abcjs_basic_5.1.1-min.js"></script> <script defer src="/js/nogag.js"></script> </head> <body> <header id=global-header> <h1 id=header> <a href=/ > <img alt="lowreal.net のHTTP2/HTTPS 化を実施 | tech - 氾濫原" height=50 src=/images/hanrangen.svg width=60 style=margin:auto;display:block> </a> </h1> </header> <nav id=global-navigation> <ul> <li><a href=/ >最新</a></li> <li><a href=/photo/ >写真</a></li> <li><a href=https://www.lowreal.net/ >誰？</a></li> </ul> </nav> <div id=content> <div class=entries> <div class=date><a href="/2016/04/05/">2016年 04月 05日</a></div> <article class="tech status-public" data-id="20647" id="post-1459865670" > <header> <h2 itemprop=name><a href="/2016/04/05/1" class=bookmark rel=bookmark itemprop=url>lowreal.net のHTTP2/HTTPS 化を実施</a></h2> <div class=metadata> <a href="/tech/"><span itemprop=keywords>tech</span></a> | <time datetime="2016-04-05T14:14:30Z" data-epoch="1459865670" itemprop=datePublished> 23:14 </time> | <div style=display:none> <meta content="/2016/04/05/1" itemprop=mainEntityOfPage itemscope itemtype=https://schema.org/WebPage> <span itemprop=headline>全部 HTTPS 対応にしてリダイレクトかけるようにしました。cho45.stfuawsc.com は既に HTTPS にしてありま…</span> <span itemprop=author itemscope itemtype=https://schema.org/Person> <a href=http://www.lowreal.net/ itemprop=url> <span itemprop=name>cho45</span> </a> </span> <div itemprop=publisher itemscope itemtype=https://schema.org/Organization> <div itemprop=logo itemscope itemtype=https://schema.org/ImageObject> <meta content=https://www.lowreal.net/images/logo.png itemprop=url> <meta content=189 itemprop=width> <meta content=105 itemprop=height> </div> <meta content=cho45 itemprop=name> </div> <meta content="2016-04-05T14:14:30Z" itemprop=datePublished> <meta content="2020-07-29T09:52:42Z" itemprop=dateModified> <div itemprop=image itemscope itemtype=https://schema.org/ImageObject> <meta content="/images/entry/2016-04-05" itemprop=url> <meta content=800 itemprop=width> <meta content=800 itemprop=height> </div> </div> </div> </header> <div class=content itemprop=articleBody> <p> <span itemscope itemtype=http://schema.org/Photograph> <a href=https://picasaweb.google.com/114431815111528304586/April52016#6270078726448024770 class=picasa itemprop=url><img alt=photo itemprop=image src="/images/entry/2016-04-05 23.13.18.png"></a> </span> <p>全部 HTTPS 対応にしてリダイレクトかけるようにしました。<p>cho45.stfuawsc.com は既に HTTPS にしてありました。こちらは nginx に letsencrypt の証明書を入れた構成だったのですが、これを機に HTTPS のフロントを h2o にして、nginx は HTTP だけを配信するようにしました。これで HTTPS は HTTP2 に対応になりました。<p>このサイトは割と複雑な URL の rewrite ルールをしいているので、バックエンドのアプリケーションに直接ディスパッチせず、一旦 HTTPS でも nginx を経由するようにして設定し、徐々に h2o で全リクエストを処理するように置き換えていきました。<a href=https://www.lowreal.net/ >www.lowreal.net</a> も同時に HTTPS 対応しましたがそれぞれのドメインの構成は以下の通りです</p> <ul> <li>cho45.stfuawsc.com <ul> <li>h2o → static file</li> <li>h2o → backend</li> </ul></li> <li>lowreal.net <ul> <li>h2o → static file</li> <li>h2o → backend</li> </ul></li> <li>www.lowreal.net <ul> <li>h2o → static file (accept-language を mruby で見てる)</li> </ul></li> </ul> <section class=level-1> <h3>証明書以外にやったこと</h3> <p>一応 mixed content を回避したり、push してみたりしたくていろいろやりました</p> <ul> <li>はてなスターのスキーム変更</li> <li>スター画像のホスト元 (フォトライフ) のドメイン変更 (cdn-akナントカに)</li> <li>tumblr のスキーム変更</li> <li>facebook ボタン廃止</li> <li>twitter ボタンのスキーム変更</li> <li>Amazon 画像のドメイン変更 (過去に遡ってエントリ内の画像URLを変更)</li> <li>バックエンドアプリケーション (ブログシステム) へ Link: rel=preload を簡単に吐ける機能を追加</li> </ul> </section> <section class=level-1> <h3>h2o での server push の確認方法</h3> <p>h2o は server push したコンテンツのヘッダに x-http2-push: pushed を含めてくれるので、ちゃんと push されてるか確認する一番簡単な方法はこれを見ることっぽいです。</p> </section> <ol itemscope itemtype=http://schema.org/BreadcrumbList><li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem><a href=/ itemprop=item><span itemprop=name>トップ</span></a> <meta content=1 itemprop=position> </li> <li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem> <a href="/tech/" itemprop=item><span itemprop=name>tech</span></a> <meta content=2 itemprop=position> </li> <li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem> <a href="https://lowreal.net/2016/04/05/1" itemprop=item><span itemprop=name>lowreal.net のHTTP2/HTTPS 化を実施</span></a> <meta content=3 itemprop=position> </li> </ol> </div> <div class="content trackbacks"> <h3>このエントリを参照するエントリ</h3> <ul> <li data-id="20676"> <a href="/2016/04/17/2"> <b>Firefox の開発者ツールのほうが HTTP2 でサーバプッシュされたコンテンツがわかりやすい</b><br> <span class=summary>Firefox だと上記のようにリクエストが消滅してタイミングも全てない表示になるみたいです。Chrome の Network タブだとプッシュしてもキャッシュか…</span> <time datetime="2016-04-17T07:26:50Z" data-epoch="1460878010" itemprop=datePublished> 16:26 </time> </a> </li> </ul> <ul> <li data-id="20648"> <a href="/2016/04/05/2"> <b>nginx の rewrite ルールっぽく h2o の mruby でリクエストの rewrite を行う</b><br> <span class=summary>このサイトのHTTPS化にあたって nginx で書いていた rewrite のルールを h2o の mruby で処理するように変える必要がありました。しかしベタで書くの…</span> <time datetime="2016-04-05T14:22:02Z" data-epoch="1459866122" itemprop=datePublished> 23:22 </time> </a> </li> </ul> <ul> <li data-id="20988"> <a href="/2016/12/31/1"> <b>今年やったことを自分で承認する</b><br> <span class=summary>日記を読みかえしてみたら今年もいろいろやっていた。年末にせめて自分で自分を承認してあげたい。おおまかには高周波関係アンテナアナライザ製作…</span> <time datetime="2016-12-30T15:04:32Z" data-epoch="1483110272" itemprop=datePublished> 00:04 </time> </a> </li> </ul> </div> <div class="content similar-entries"> </div> <div class=social> <span class=hatena-star></span> <p class=share-buttons> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flowreal.net%2F2016%2F04%2F05%2F1" class=share-button rel="noopener nofollow" onclick='ga("send","social","Facebook","Share","https://lowreal.net/2016/04/05/1")' style=background:#3b5998 target=_blank> <img alt=Facebook height=18 src=/images/sharebuttons/FB-f-Logo__white_50.png width=18> </a> <a href="https://bsky.app/intent/compose?text=lowreal.net%20%E3%81%AEHTTP2%2FHTTPS%20%E5%8C%96%E3%82%92%E5%AE%9F%E6%96%BD%20https%3A%2F%2Flowreal.net%2F2016%2F04%2F05%2F1" class=share-button rel="noopener nofollow" onclick='ga("send","social","Bluesky","Share","https://lowreal.net/2016/04/05/1")' style=background:#efefef target=_blank> <img alt=Bluesky height=40 src=/images/bluesky_media_kit_logo_svgs.svg width=40> </a> <a href="http://b.hatena.ne.jp/add?url=https%3A%2F%2Flowreal.net%2F2016%2F04%2F05%2F1" class=share-button rel="noopener nofollow" onclick='ga("send","social","Hatena::Bookmark","Share","https://lowreal.net/2016/04/05/1")' style=background:#00a4de target=_blank> <img alt=はてなブックマーク height=40 src=/images/sharebuttons/hatenabookmark-logomark.svg width=40> </a> </p> </div> </article> </div> <div class=pager> <a href="/2016/04/04/1" rel=next>◀ 「みいつけた…</a> <a href="/2016/04/05/">▲ この日のエントリ</a> <a href="/2016/04/05/2" rel=prev>[tech] nginx … ▶</a> </div> </div> <footer id=global-footer> <h2>書いている人</h2> <div class=author> <div class=image> <img alt=Photo height=160 src=/images/profile.jpg width=160 loading=lazy> </div> <div class=desc> <p> cho45 (<a href=https://www.lowreal.net/ rel=author>www.lowreal.net</a>) <<a href=mailto:cho45@lowreal.net>cho45@lowreal.net</a>> </p> <p> JavaScript, Perl, Ruby, HTML, CSS, Web etc </p> <p> <a href=https://github.com/cho45 rel=nofollow class="button github-button" onclick='ga("send","social","GitHub","Follow","cho45")'><i></i> <span class=label> Follow <b>@cho45</b> </span> </a> </p> <p> <a href=/archive>アーカイブ</a> </p> </div> </div> </footer>