joppot

コピペで絶対動く。説明を妥協しない

サーバ

React + S3 + Route53 + CloudFrontでSSL使ってHTTPS化

投稿日:2018年11月30日 更新日:


概要

みさんさんこんにちはcandleです。今回はS3にデプロイしたReact webの通信をSSL化してみたいと思います。

最近はAPIサーバとReactフロントエンドを分離してwebサービスを提供したりしており、React側でもSSL通信が必要になることが多いです。それに限らず、最近はhttpsが標準化されつつあります。少し手間がかかりますが挑戦していきましょう。

前提

  1. React webがS3にデプロイされている
  2. Route53のドメイン名と同じS3のバケット名を持っている
SPONSORED LINK

CloudFrontを作成する

最初にCloudFrontを作成します。

CloudFronとの管理ページに移動して、「Create Distribution」 を選択します。

そのまま「Get Started」を押します。

「Origin Settings」セクションではこのように設定します。

  • Origin Domain Nameは自分のReactを公開したS3バケットを選びます。
  • Origin Pathは空
  • Origin IDはS3は「Origin Domain Name」を選んだ時に自動的に入力されます。

以下のようになります。

続いて、「Default Cache Behavior Settings」セクションでは1つだけ設定します。

「Viewer Protocol Policy」だけ設定します。もしもHTTP通信とHTTPS通信どちらも受け入れる場合は「HTTP and HTTPS」。HTTPS通信のみの場合は「Redirect HTTP to HTTPS」か「HTTPS Only」にします。ただ、一般にブラウザでURLを入力する時はhttpで入力するので「Redirect HTTP to HTTPS」の方が良いです。

「Distribution Settings」セクションではとりあえず2つだけ設定します。
まず、「Alternate Domain Names (CNAMEs)」に自分のRoute53で取得したドメイン名を記述します。

下の方の「Default Root Object」の欄をにindex.htmlと記述します。

あとはデフォルトのままでとりあえずokです。最後に右下の「Create Distribution」をクリックします。

CloudFrontを確認する

一覧画面に戻り、「Status」がしばらく「In Progress」になります。5~10分くらい。

これが「Deployed」になったら。自動的に割り振られたDomain Nameをブラウザで叩いてアクセスできるか確認します。

  • https://xxxxxxxxxxxxx.cloudfront.net

Route53でドメインをCloudFrontに割り振る

今度は、https://xxxxxxxxxxxxx.cloudfront.netでアクセスするのではなくRoute53で取得した独自ドメインでアクセスできるようにします。

Route53の管理画に移動して、 左のメニューから「Hosted zones」を選択します。 ドメイン一覧からCloudFrontに割り振りたいドメインを選びます。

上の青い「Create Record Set」ボタンを押し項目を埋めていきます。

  • Nameはサブドメインを利用しない場合はそのままにします。
  • Type は「A – IPv4 address」にします。
  • AliasをYesにします。
  • Alias Targetに作成したCloudFrontを選びます。

入力が終わったら、右下の「Save Record Set」ボタンを押します。

試しに今割り振ったドメインでアクセスしてみてください。
おそらく、ブラウザが警告を表示するはずです。これはhttps通信に利用する証明書がhttps://xxxxxxxx.cloudfront.netにもかかわらず、https://独自ドメインでアクセスしているからです。

次は独自ドメインの証明書をACMで取得して設定しましょう。

ACMで証明書を取得する

ここでAWSの変な問題なのですが、CloudFrontで利用する証明書は必ず米国東部(バージニア北部)で取得する必要があります。

AWSのCertificate Managerの画面に移動し、右上のヘッダーメニューの「米国東部(バージニア北部)」を選択します。

1つも証明書を持っていない場合は画面中央左の「今すぐ始める」をクリックします。

「パブリック証明書のリクエスト」を選び「証明書のリクエスト」ボタンを押します。

ドメイン名の所にCloudFrontに割り当てたドメイン名を記述し、「次へ」 を押します。

検証の仕方ですが、私は「DNSの検証」の方が楽ですので、そちらを選択して、「確認」を押します。確認画面が出てきたら、確認して「確定とリクエスト」ボタンを押します。

検証画面が現れるので、ドメインの欄を開いて、そのまま「Route 53でのレコードの作成」を押します。モーダルが現れるので、そのまま「作成」を押します。

成功と出たら、「続行」ボタンを押して、続けます。

ACMの一覧画面が表示されます。「検証保留中」となっているのが「発行済み」になったら証明書の取得完了です。

ACMをCloudFrontに割り振る

最後に、取得した証明書をCloudFrontに割り振りましょう。CloudFrontの管理画面に移動します。
ディストリビューションを選んで、「Distribution Settings」ボタンを押します。

「General」タブの「Edit」ボタンを押します。

「SSL Certificate」の項目を「Custom SSL Certificate」に変更して、先ほど作成したACMを選びます。選んだら、保存しましょう。

これで完了です。もう一度ブラウザを開き、独自ドメインにアクセスすると問題なくアクセスできるようになっていると思います。

まとめ

結構簡単にSSL化できましたね。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-サーバ
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

td-agentでnginxのerror.logとaccess.logを取得する

English 日本語 概要 みなさんこんにちはcandleです。今回はtd-agentでnginxのログを収集します。 td-agentで解説しますが、fluentdと設定は基本的に同じになると思う …

Ubuntuにmemcachedをインストールする方法と動作確認

概要 みなさんこんにちは、今回はubuntuにmemcachedを入れて、起動や、動作確認を行ってみたいと思います。 memcachedとは比較的短期間「key=>value」という形で値を保存するサ …

ec2のメモリ状態をwatchとfreeで監視する

English 日本語 概要 みなさんこんにちはcandleです。今回はec2のメモリをリアルタイムで監視する方法を紹介します。 ec2サーバはt2.microだとメモリが1GBしかなく、その上でco …

td-agentでRails 4のproduction.logを取得する

English 日本語 概要 みなさんこんにちはcandleです。今回はrails 4のproduction ログをtd-agentで取得してみたいと思います。 数年前にも同じ記事を書いたのですが、説 …

centos6.5にtd-agentサーバを構築する

English 日本語 概要 みなさん、こんにちはcandleです。 今回はcentos6.5にtd-agentサーバを構築してみたいと思います。 td-agentとは要はfluentdの事だと思いま …


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー