AWSでReactjsをS3にデプロイしてみた

前提条件

ソース管理：Bitbucket
クラウド環境：AWS
独自ドメインでのhttpｓ（SSL）

手順概要

1. S3にバケットを作成する
2. CloudFrontで作成したバケットを公開する
3. Route53にドメインを設定する
4. BitbucketでS3にコピーする設定を行う
5. パイプラインで実行

1.S3にバケットを作成する

S3でパブリック・アクセスできるバケットを作成する。

バケット作成の設定

バケット名：任意のバケット名。できれば、独自ドメインのホスト名と同じにしたほうが運用しやすいです。
・オブジェクト所有者
●ACL有効
●オブジェクトライター
・このバケットのブロックパブリックアクセス設定
チェックボックスをすべて外す

バケットを作成した後、プロパティを開く
・静的ウェブサイトホスティング
●有効
・ホスティング
●静的ウェブサイトをホストする
・インデックスドキュメント
index.html
・エラードキュメント - オプション
index.html
・リダイレクトルール – オプション

[
    {
        "Condition": {
            "HttpErrorCodeReturnedEquals": "403"
        },
        "Redirect": {
            "HostName": "ホスト名",
            "Protocol": "https"
        }
    }
]

保存する。

バケット設定のアクセス許可を開く
・バケットポリシーを設定

{
    "Version": "2008-10-17",
    "Id": "PublicRead",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::バケット名/*"
        }
    ]
}

・CORS設定

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE",
            "HEAD"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "x-amz-meta-custom-header"
        ],
        "MaxAgeSeconds": 3000
    }
]

2.CloudFrontで作成したバケットを公開する

ディストリビューションを作成する。
・オリジンドメイン
S3で作成したバケットのホスト名を選択する
・名前
ホスト名
・設定-カスタム SSL 証明書 - オプション
・事前に作成したSSL証明書を選択する。

3.Route53にドメインを設定する

レコードを作成する
シンプルルーティングでAレコードを作成する。
・レコードタイプ：Aレコード
・トラフィックのルーティング先
「CloudFrontディストリビューション」を選択し、CloudFrontで作成したディストリビューションを選択する。

保存

4.BitbucketでS3にコピーする設定を行う

ルートにbitbucket-pipelines.ymlファイルがなければ作成する

bitbucket-pipelines.ymlの設定例
環境変数
AWS_ACCESS_KEY_ID：APIキー
AWS_SECRET_ACCESS_KEY：APIシークレットキー
AWS_DEFAULT_REGION：リージョン

pipelines:
  branches:
    sandbox1:
      - step:
          name: builds
          size: 2x
          script:
            - apt-get update && apt-get install -y unzip ssh gpg zlib1g-dev gnupg2 zip
            - cp .env.dev .env
            - npm install
            - npm run build
          artifacts:
            - build/**
      - step:
          name: Deploy to S3
          script:
            - pipe: atlassian/aws-s3-deploy:0.3.8
              variables:
                AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
                AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
                AWS_DEFAULT_REGION: ${AWS_DEFAULT_REGION}
                S3_BUCKET: '{バケット名}'
                LOCAL_PATH: 'build'
                ACL: 'public-read'

コミットする。

5.Bitbucketのパイプラインで実行

・Run Pipelineでブランチを選択して、Pipeline(上記の例だとsandbox1)を選択して、Runボタンを押す。

問題なければ、S3のバケット上にbuildディレクトリ以下のファイルがデプロイされます。

以上//