経緯

仕事でもSPA（single-page application）を利用した構成を依頼される機会が増えてきました。
IaaS中心での構成に比べ、コストが安く済むため、スモールスタートでコストを抑えたいという時にメリットがあるためです。
今回はSPAの構成でよく使われるAWS CloudFrontをAnsibleの「cloudfront_distribution」で設定する方法を紹介したいと思います。

cloudfront_distributionモジュールについて

Ansibleの中でAWS CLIを用いて設定する方法もありますが、今回はモジュールを用いた設定例を紹介します。

cloudfront_distribution
基本的には公式ドキュメントに書いてある通りなので、説明は省きます。

Ansible Playbookの設定例

なにはともあれ実際の設定例。

main.yml


- set_fact:
    origin_domain_name: "s3.hogehoge"
    origin_website_domain_name: "s3.hogehoge.s3-website-ap-northeast-1.amazonaws.com"
    domain_name: "hogehoge.com"
    default_root_object: "index.html"
    # logファイルをs3に格納する場合は利用
    # bucket_for_logs: "log.s3.hogehoge"
    # log_prefix: "logs/"

# create distribution
- cloudfront_distribution:
    default_origin_domain_name: "{{ origin_website_domain_name }}"
    # origin settings
    origins:
        - domain_name: "{{ origin_domain_name }}"
          id: "{{ origin_domain_name }}" 
        - domain_name: "{{ origin_website_domain_name }}"
          id: "{{ origin_website_domain_name }}" 
    #  cache behavior settiongs
    cache_behaviors:
        - path_pattern: "/static/*"
          target_origin_id: "{{ origin_domain_name }}"
          viewer_protocol_policy: "redirect-to-https"
          min_ttl: 0
          max_ttl: 31536000
          default_ttl: 86400
          forwarded_values:
            query_string: false
        - path_pattern: "/index.html"
          target_origin_id: "{{ origin_domain_name }}"
          viewer_protocol_policy: "redirect-to-https"
          min_ttl: 0
          max_ttl: 31536000
          default_ttl: 86400
          forwarded_values:
            query_string: false
    default_cache_behavior:
          target_origin_id: "{{ origin_website_domain_name }}"
          viewer_protocol_policy: "redirect-to-https"
          min_ttl: 0
          max_ttl: 31536000
          default_ttl: 86400
          forwarded_values:
            query_string: false
            cookies:
              forward: none
            headers: 
              - "*"
          smooth_streaming: false
          compress: false
          allowed_methods:
            items:
              - GET
              - HEAD
            cached_methods:
              - GET
              - HEAD

    # distribution settings
    price_class: "PriceClass_All"
    aliases : 
      - "{{ domain_name }}" 
    default_root_object: "{{ default_root_object }}"
    state: present
    #logging:
    #  enabled: true
    #  include_cookies: false
    #  bucket: "{{ bucket_for_logs }}"
    #  prefix: "{{ log_prefix }}"

説明と備考

リソースはS3に配置するものとしてoriginに指定しています。
キャッシュの設定はデフォルトのものを入れているが必要に応じて変更を行ってください。
Updateをかける際は冪等性を保つために「Distribution ID」を指定して実行した方が良さそうです。

あとがき

現状のAnsibleモジュールでは、SSL証明書を設定する部分が未実装のため、そこも設定を入れようという場合にはAWS CLIを使った方が良い気がします。ただし、cloudfrontにACMの証明書を使う際は米国東部で作成したものだけ利用できます。