Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブacm

2018年7月9日 By KD コメントを書く

Amazon S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法(S3 + CloudFront + Route53 + ACM)

Amazon S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法(S3 + CloudFront + Route53 + ACM)

静的サイトを作ったら、それをホスティングする必要があります。個人の趣味サイトなら簡単で無料の方法はGithub Pagesですが、もう少し真面目に静的コンテンツを管理してホスティングしたいのであればAmazon S3は有力な選択肢になります。今回は、S3で静的コンテンツを独自ドメインでSSL化してホスティングする方法を紹介します。

はじめに

今回はReactで作った静的コンテンツをAmazon S3でホスティングする方法を紹介します。それだけでは物足りないので、独自ドメイン対応、SSL化までやっていきます。それでは、始めましょう。

前提

この記事を楽しむには以下が必要です。

  • NodeJSがインストール済みであること
  • AWS CLIがインストール済みであること
  • ドメインを取得済みであること

静的サイトの作成

まずはホスティングする静的サイトを作ります。

準備

Reactでちゃちゃっとサンプルサイトを作ることにしましょう。

$ npm install -g create-react-app
$ create-react-app my-website
$ cd my-website/

静的サイトの作成

今回はReactアプリケーションを作ることが目的ではないので、App.jsの画面に表示される文字を変更するだけにします。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Hosting a React Welcom Page on S3</h1>
        </header>
        <p className="App-intro">
          Amazon S3 is easy stuff for hosting a static website.
        </p>
      </div>
    );
  }
}

export default App;

はい、完成です。

S3バケットの作成と静的サイトのデプロイ

次にS3バケットに作ったサンプルサイトをデプロイしましょう。

S3バケットの作成

S3バケットはAWSコンソールから作ってもよいのですが、AWS CLIから作ってみましょう。

$ aws s3 ls
$ aws s3 mb s3://mywebsite-hosting
make_bucket: mywebsite-hosting
$ aws s3 ls
2018-07-07 11:00:52 mywebsite-hosting

ビルドしてデプロイ

$ yarn build
$ ls
README.md     build/        node_modules/ package.json  public/       src/          yarn.lock
$ aws s3 sync build s3://mywebsite-hosting
$ aws s3 website s3://mywebsite-hosting --index-document index.html

AWSコンソールでS3バケットを確認してみましょう。

S3 2

作成したS3バケット上にビルドしたファイルが全てアップロードされています。

S3 0

作成したS3バケットがホスティングされています。

S3バケットのポリシー設定

S3バケットにアップロードしたファイルはデフォルトではアクセスが許可されていないので、誰でも見れるようにポリシーを変更します。

S3 1

今回は以下のポリシーを設定しました。S3のポリシーはジェネレーターサイトを使うことでGUIで作成できます。

{
    "Version": "2012-10-17",
    "Id": "Policy1530901313146",
    "Statement": [
        {
            "Sid": "Stmt1530901311070",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite-hosting/*"
        }
    ]
}

表示できるか確認します。AWSのS3のコンソールから、エンドポイントを確認します。

S3 3

エンドポイントをブラウザで開きます。

S3 4

サンプルサイトがホスティングされていることが確認できました。

独自ドメインの設定

次に、ホスティングしているサンプルサイトに独自ドメインを設定しましょう。

Route53に独自ドメインを登録する

AWSのRoute53のコンソールから、「Hosted zones -> Create Hosted Zone」を選択し、「Domain Name」に取得済みのドメイン名を入力し、「Create」をクリックします。

Route53 1

作成されたHosted zoneのNSレコードのValueをDNSに設定します。

Route53 2

DNSの例として、ムームードメインの場合は、以下のように設定し、「ネームサーバ設定変更」をクリックします。

Mumu 3

CloudFrontでエンドポイントとドメインを紐付ける

AWSのCloudFrontのコンソールから、「Create Distribution」をクリックします。

Cf 1

今回は静的サイトを扱うので、Webの「Get Started」をクリックします。

Cf 2

「Origin Domain Name」にS3バケットのエンドポイントのURL(今回の場合は「http://mywebsite-hosting.s3-website-us-east-1.amazonaws.com/」)を入力します。すると、自動的に「Origin ID」が設定されます。

Cf 3

ファイルを圧縮して配信したい場合は「Compress Objects Automatically」を「Yes」にします。

Cf 5

「Price Class」には配信するロケーションを指定します。日本も配信する場合は「Use All Edge Locations」を選択します。「Alternate Domain Names」にはドメイン名を入力します。

Cf 5

「Default Root Object」には「index.html」と入力します。そして、「Create Distribution」をクリックします。

Cf 6

「Status」が「Deployed」になればCloudFrontの設定は完了です。

Cf 7

Route53にCloudFrontを紐付ける

AWSのRoute53のコンソールから、「Create Record Set」をクリックします。今回はサブドメインを利用しないので、Nameは空にします。そして、「Alias」に「Yes」を選択し、「Alias Target」に先程作成したCloudFrontのDistributionの設定を選択します。「Create」をクリックします。

Route53 5

以下のようにAレコードが追加されました。

Route53 6

これで独自ドメインでサンプルサイトが表示できるようになりました。

無料でSSL化

それでは無料でSSLに対応しましょう。

AWS Certificate Manager(ACM)で無料のSSL証明書を発行する

AWSのCertificate Managerのコンソールから、「Request a certificate」をクリックします。

Acm 1

「Domain name」にドメイン名またはサブドメイン名を入力し、「Next」をクリックします。

Acm 2

「DNS validation」を選択し、「Review」をクリックします。

Acm 3

「Confirm and request」をクリックします。

Acm 4

「Continue」をクリックします。

Acm 5

このままだとStatusが「Pending validation」のままなので、「Create record in Route 53」からバリデーション用のレコードを追加します。

Acm 7

「Create」をクリックします。

Acm 8

以下のようにSUCCESSが表示されたら、Route53に設定されていることを確認します。

Acm 9

以下のようにAWSのRoute53のコンソールにバリデーション用のCNAMEレコードが追加されていることが確認できます。

Route53 7

しばらく待つと、AWSのCertificate Managerのコンソールから、以下のように「Status」が「Issued」になり、SSL証明書の発行が完了します。

Acm 10

CloudFrontにSSL証明書を設定する

AWSのCloudFrontのコンソールから、対象のDistributionを選択します。

Cf 8

「General」を選択し、「Edit」をクリックします。

Cf 9

「SSL Certificate -> Custom SSL Certificate」を選択し、先程の発行したSSL証明書を選択します。「Yes, Edit」をクリックします。

Cf 10
Cf 11
Cf 12

以下のように「SSL Certificate」にSSL証明書が設定されていることを確認します。

Cf 13

これでSSL証明書の設定は完了です。

HTTPをHTTPSにリダイレクトするように設定する

SSL化されたのでHTTPSのみにしてもよいのですが、ユーザーがブラウザにHTTPでURLを入力する場合もありえるので、HTTPで入力された場合にHTTPSにリダイレクトするように設定します。

「Behaviors」を選択し、デフォルトのBehaviorを選択して「Edit」をクリックします。

Cf 21

「Viewer Protocol Policy」に「Redirect HTTP to HTTPS」を選択して、「Yes, Edit」をクリックします。

Cf 22
Cf 23

以下のように「Viewer Protocol Policy」が「Redirect HTTP to HTTPS」に変更されていることを確認します。

Cf 24

しばらくして「Status」が「Deployed」になれば、上記の設定変更の反映は完了です。

Cf 25

動作確認

最後にブラウザに独自ドメインのURLを入力してみましょう。

Hosting

SSLで正しく表示されました。

おまけ

CloudFrontのキャッシュ削除の方法

S3バケットを更新した後にコンテンツをすぐに反映させるにはCloudFrontのキャッシュを削除する必要があります。AWS CLIを使って以下のようにキャッシュを削除できます。

$ yarn build
$ aws s3 sync build s3://mywebsite-hosting
$ curl -I https://yourdomain.com/
...
x-cache: Hit from cloudfront
...
$ aws cloudfront list-distributions --output text --query 'DistributionList.Items[*].[Id]'
EKZEZML5DJ0UB
$ aws cloudfront get-distribution --output json --id EKZEZML5DJ0UB
$ aws cloudfront create-invalidation --distribution-id EKZEZML5DJ0UB --paths '/index.html'
$ aws cloudfront get-invalidation --distribution-id EKZEZML5DJ0UB --id IP17L4GZGHHAK --output text --query 'Invalidation.Status'
Completed
$ curl -I https://yourdomain.com/
...
x-cache: Miss from cloudfront
...

もちろんAWSのCloudFrontのコンソールからも同様の操作ができます。その場合は、「Create Invalidation」をクリックします。

Cf 31

そして、削除したい「Object Paths」を入力して、「Invalidate」をクリックします。

Cf 32

これでキャッシュクリアも完了です。

コンテンツを配信するドメインを指定する方法

画像や動画などのリンクは他のWebサイトに貼られても表示されてしまいます。それを防ぎたい場合は以下のようにS3バケットのポリシーにコンディションを指定することで、表示するドメインを限定できます。

{
    "Version": "2012-10-17",
    "Id": "Policy1530901313146",
    "Statement": [
        {
            "Sid": "Stmt1530901311070",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::mywebsite-hosting/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "http://yourdomain.com/*"
                }
            }
        }
    ]
}

S3とCloudFrontのCORSの対応方法

CORS(Cross-Origin Resource Sharing)はオリジンサーバ以外からデータを取得する仕組みですが、S3とCloudFrontの両方を利用している場合は両方共対応する必要があります。

S3のCORS対応

対象のS3バケットを選び、「Permissions -> CORS configuration」から、以下のようにXMLを設定し、「Save」すればOKです。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

S3 cors

CloudFrontのCORS対応

対象のDistributionを選んで、「Behaviors」タブからデフォルトのBehaviorを選んで「Edit」します。

Cf cors 1

「Cache Based on Selected」から「Whitelist」を選択します。

Cf cors 2

「Whitelist Headers」に「Origin」を選択して「Add >>」します。

Cf cors 3

後は保存して、変更が反映されれば完了です。

AWSコンソールを英語表記にする方法

この記事ではAWSコンソールは英語表記になっています。デフォルトでは日本語表記になっていると思うので、AWSコンソールのフッターから、「English (US)」を選択すれば英語表記にできます。

Aws footer

英語表記にするメリットは、日本語表記にした場合にAWSのUI変更についていくのが大変なのでそれを回避できる点と、何か問題があった時にググることを簡単にする点です。なので、よほど英語アレルギーがある人以外は英語表記にすることをおすすめします。

最後に

いかがでしたか?これでS3上に静的コンテンツを独自ドメインで公開できるようになったと思います。サーバーサイドを作らないのであれば、この方法で十分ですね。それでは。

環境

  • NodeJS: v10.5.0
  • create-react-app: 1.5.2
  • AWS CLI: aws-cli/1.15.40 Python/3.6.5 Darwin/17.6.0 botocore/1.10.40

カテゴリ : 技術 Tips & Tutorials タグ : acm, aws, cloudfront, route53, s3

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
    バンクーバー留学豆知識:バンクーバーのATMで日本の銀行のキャッシュカードを使ってお得にお金を引き出す方法
  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法
    AWS Elastic BeanstalkでReactのDockerアプリケーションを稼働させる方法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • Google Adsense(アドセンス広告)で収益を受け取るまでの手順
    Google Adsense(アドセンス広告)で収益を受け取るまでの手順
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Heroku上にNginxでリバースプロキシを構築する方法
    Heroku上にNginxでリバースプロキシを構築する方法
  • AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
    AWS ECRとECSの入門(EC2編) ~ ECSのEC2版を使ってReactのDockerアプリケーションをAWS上で稼働させる方法 ~
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes