CloudFront

CloudFrontでお名前.comの独自ドメインおよびSSL証明書を使用する

CloudFrontに、お名前.comで用意したドメインを割り当て、AWSで作成したSSL証明書を適用してHTTPS化したいと思います。

なお注意点として、CloudFrontで利用するSSL証明書は、どのリージョンでサービスを提供するかに関わらず、米国東部 (バージニア北部) リージョン us-east-1にて作成します

スポンサーリンク

独自ドメインおよびSSL証明書の設定手順

ACMでSSL証明書の作成

SSL証明書のリクエスト

まず最初にSSL証明書を作成します。
画面上部検索窓 [ Certificate Manager ] で検索 → 当該サービスをクリックします。

画面右上の リージョン選択のプルダウンで 米国東部 (バージニア北部)us-east-1を選択後、画面下の [ いますぐ始める ] を押下します。次の画面から順次、以下を入力してください。

証明書のリクエスト

[ パブリック証明書のリクエスト ]にチェックを入れます。

ドメイン名の追加

ドメインを設定します。 *(アスタリスク)のワイルドカードを使用すれば複数ドメインに対応できます。
例： *.hoge.com

検証方法の選択

[ DNS の検証 ] にチェックを入れます。

お名前.com で Whois情報公開代行 を利用しており、 Whois情報公開代行メール転送オプション（300円/年）を指定しない場合は、必然的にDNSの検証になると思います。

タグを追加　以降は [ 確認 ] → [ 確定とリクエスト ] を押下します。

以下のようにオレンジ色で 検証保留中 となるので、このまま別の画面で、引き続き お名前.com での設定を行います。（※この検証保留中画面はACMのTOP画面からでも確認できるので設定を閉じても大丈夫です）

お名前.comで検証用CNAMEレコードの追加

AWSの画面で表示されている 検証用CNAMEレコードをお名前.comで追加します。

レコード入力時、先頭にスペースが入ってたり末尾に「.」ドットが入ってるとエラーになるので注意してください。

リクエスト成功の確認

AWSへ戻って、しばらく待ちます。自分のときは体感３分くらいでした。F5で更新すると以下のように緑色で 発行済み となります。

CloudFrontで独自ドメイン、SSL証明書の設定

SSL証明書を作成できたので、この証明書をCloudFrontに割り当てていきます。

画面上部検索窓 [ CloudFront ] で検索 → 当該サービスをクリックします。

画面右上 [ ディストリビューションの作成 ] を押下し、次の画面で以下を入力します。（ここでは普通に動かすために必要な情報のみ記載します）

設定画面はいくつかのブロックに分かれています。

オリジン

オリジンブロックでは、配信コンテンツの実物を所有しているサーバやリソースの指定を行います。

オリジンドメイン

オリジンの情報を入力します。 外部にオリジンサーバがあるような場合は、zoo200.net などドメインを直接入力します。

プロトコル

CloudFrontからオリジンにHTTP、HTTPSのどれでアクセスするか設定します。

マッチビューワーを設定すると、クライアントからのCloudfrontまでのリクエストと同一のプロトコルでアクセスします。

デフォルトのキャッシュビヘイビア

このブロックでは、何分間コンテンツをCloudFrontにキャッシュさせるかなど、キャッシュ動作に対しての設定を行います。

ビューワープロトコルポリシー

[ HTTP and HTTPS ]　か [ HTTPS Only ] を指定します。「既に稼働しているサービスでHTTPのリダイレクトが必要」などの要件がない限り、[ HTTPS Only ] が良いと思います。

設定

設定ブロックでは、ディストリビューションの全体的な基本設定を行います。

代替ドメイン名 (CNAME)

[ 項目を追加 ] を押下し、独自ドメイン名を設定します。複数ドメインを割り当てたい場合、カンマ区切りや *（アスタリスク）でいれます。

カスタム SSL 証明書

プルダウンからACMで設定したSSL証明書を選択します。

お名前.comで独自ドメインのCNAMEレコードの追加

最後の設定手順になります。

AWSの画面で表示されているCloudFrontのドメイン名をお名前.comのCNAMEレコードとして登録します。（以下スクショは旧コンソール画面になります）

以上で設定完了となります。

DNSが反映されるまでしばらく待ってからブラウザやCurlで正常に動いていることを確認しましょう〜

Tips

CloudFrontの設定を保存するため、最後に [ ディストリビューションを作成 ] を押したときに赤文字でエラーが出る場合があります。

自分が遭遇した2つのエラーを紹介しておきます。

SSL証明書とCNAMEがマッチしない

The certificate that is attached to your distribution doesn’t cover the alternate domain name (CNAME) that you’re trying to add.

和訳：ディストリビューションに添付されている証明書は、追加しようとしている代替ドメイン名（CNAME）をカバーしていません。

これはSSL証明書作成時に指定したドメインが、CloudFront設定時のCNAMEs ドメインに対応できていないためです。

例えばSSL証明書は、abc.example.com を設定したのに、CloudFrontのCNAMEsでは *.example.com や xyz.example.com を設定すると当該エラーとなります。

代替ドメイン名の重複

One or more of the CNAMEs you provided are already associated with a different resource.

和訳：指定した1つ以上のCNAMEは、すでに別のリソースに関連付けられています。

これは設定しようとしている、代替ドメイン名 (CNAME)　が既に別のCloudFrontディストリビューションでも設定されて、重複している場合に出力されます。

テストなどでドメイン名を使い回してると遭遇するかもしれません。

今回は以上です〜ﾉｼ

参考

(´･ω･｀)ゞｱﾘｶﾞﾄｺﾞｻﾞｲﾏｽ.｡.･ﾟ

代替ドメイン名と HTTPS の使用

')}else{$(single_selector).wrap('');$(single_selector).append(buttonMarkup)}switch(style){case 'svg-icon':$(single_selector).find('.copy-the-code-button').html(copyTheCode.buttonSvg);break;case 'cover':case 'button':default:$(single_selector).find('.copy-the-code-button').html(button_text);break}})})},_getButtonMarkup:function(button_title,button_text,style){if('svg-icon'===style){button_text=copyTheCode.buttonSvg}return''},format:function(html){var tab='\t';var result='';var indent='';html.split(/>\s*).forEach(function(element){if(element.match(/^\/\w/)){indent=indent.substring(tab.length)}result+=indent+'<'+element+'>\r\n';if(element.match(/^\w[^>]*[^\/]$/)&&!element.startsWith("input")){indent+=tab}});return result.substring(1,result.length-3)},copyShortcode:function(event){event.preventDefault();var btn=$(this),oldText=btn.html(),target=btn.attr('data-target')||'',copy_content_as=btn.attr('data-copy-as')||copyTheCode.copy_content_as,button_copy_text=btn.attr('data-button-copy-text')||'',content=btn.attr('data-content')||'',link=btn.attr('data-link')||'';if(content){CopyTheCodeToClipboard.copy(content);btn.text(button_copy_text);setTimeout(function(){btn.html(oldText);if(link){window.open(link,'_blank').focus()}},1000);return}var source=$(target);if(!source.length){btn.text('Not found!');setTimeout(function(){btn.text(oldText)},1000);return}var html=source.html();html=CopyTheCode.format(html);if('html'!==copy_content_as){var brRegex=/
/gi;html=html.replace(brRegex,"\n");var divRegex=/
/gi;html=html.replace(divRegex,"\n");var pRegex=/

/gi;html=html.replace(pRegex,"\n");var pRegex=/

  • /gi;html=html.replace(pRegex,"\n");html=html.replace(/(<([^>]+)>)/ig,'')}if('html'!==copy_content_as){html=html.replace(/[\t\n]+/gm,' ').trim()}else{var reWhiteSpace=new RegExp("/^\s+$/");html=html.replace(reWhiteSpace,"")}var tempElement=$("
    ");$("body").append(tempElement);html=$.trim(html);$('#temp-element').html(html);var html=$('#temp-element').html();$('#temp-element').remove();var tempHTML=html;var tempPre=$("
    • ',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})