webサイトを自動デプロイできるようにしてgithubで管理する

概要

n番煎じの記事ですが、自分用にまとめます。

S3バケットをまるごとWeb上で公開することができます。ただし、公開できるのは静的コンテンツに限ります。独自ドメインもRoute 53を使うことで使用可能です（今回はお名前.comからname serverを変更）。LinuxなどでWebサーバを立てる場合のように、sshログインやサーバー運用を行う必要はありません（←非常に楽！）。また、CloudFrontをキャッシュサーバーとして併用することで、サーバーの負荷軽減、ネットワークレイテンシの低減を行えます。

作業の流れ

Githubのmaster branchにあるコードが(pushやmergeで)改変されるたびに、S3のバケットに自動でdeployされます。アップロードされたコンテンツは、ClowdFrontによって、世界中の様々なサーバーに格納されます。独自ドメインにアクセスすると、更新後のwebサイトを閲覧することができます。

用意するもの

• 公開するwebコンテンツ
• 独自ドメイン(お名前.com)
• Github
• CircleCI
• AWSアカウント

webコンテンツの変更をgitで管理することができる、複数人で運用することができる、nginxなどのwebサーバーの不具合等の要因を考える必要がないなど、非常に楽で、手動で管理する部分を極力減らしてあるので、一度構築してしまえば、保守が楽チンです。

0. IAMの設定

CircleCIがS3にアクセスするためのユーザーを生成します。
IAMからAmazonS3FullAccessをアタッチします。
Access key IDとSecret access keyをメモしておきます(CircleCIの設定で必要)。

S3の設定

• bucketの生成
• アクセス権限のバケットポリシーの設定

s3

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "forPublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[backet名]/*"
        },
        {
            "Sid": "forCircleCi",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::[AWSのユーザーID]:user/[IAMで設定したユーザー名]"
            },
            "Action": [
                "s3:PutObject",
                "s3:ListBucket",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::[バケット名]",
                "arn:aws:s3:::[バケット名]/*"
            ]
        }
    ]
}

CircleCIの設定

• Githubとの連携
  https://circleci.com/

組織アカウントのレポジトリが対象の場合、次の記事を参考のこと。

• config.ymlファイルの生成

.circleci/config.yml

version: 2.1
orbs:
  aws-s3: circleci/aws-s3@1.0.11
jobs:
  build:
    docker:
      - image: 'circleci/python:2.7'
    steps:
      - checkout
      - aws-s3/sync:
          from: .
          to: 's3://${AWS_S3_BUCKET_NAME}'
          aws-access-key-id: AWS_ACCESS_KEY_ID
          aws-secret-access-key: AWS_SECRET_ACCESS_KEY
          aws-region: AWS_REGION
          arguments: |
            --acl public-read \
            --cache-control "max-age=86400"
          overwrite: true

• Environment Variables(環境変数)の定義

  • AWS_S3_BUCKET_NAME
  • AWS_ACCESS_KEY_ID
  • AWS_SECRET_ACCESS_KEY
  • AWS_REGION

  の設定をする。

ここまでで、一応S3にアップロードするところまではうまくいきます。

お名前.comからroute 53にネームサーバーの変更

• route 53側の設定
• お名前.com側の設定

独自ドメインに対して証明書の発行

Certificate ManagerでRoute 53に登録した独自ドメインに対して証明書を発行する

CloudFrontの設定

• S3でホスティングしたwebサイトのdistributionを公開する
• http→httpsへリダイレクトの設定
• Route 53で独自ドメインを有効化する