shou2017.com
JP / EN

cloud frontを使ってhttps化する時に詰まったこと(hugo編)

Mon Oct 2, 2017
Sat Aug 10, 2024
Hugo

hugoで運用している他のサイトをこの際だからと思ってhttpsに変更しようとした時に結構詰まったので、その時のメモ。

基本はこの通りで[ACM] AWS Certificate Manager 無料のサーバ証明書でCloudFrontをHTTPS化してみた通りにしていけば大丈でした。

しかし、ここでも詰まってしまった。

詰まったこと1、リージョンは必ずバージニア北部を選択

間違ってもtokyoにしないこと。tokyoにしたまま進んでいくと。Custom SSL Certificateが選択できない。 https化はこれで終了です。間違ってもネームサーバーとかをいじらない。

詰まったこと2、hugoのconfig.tomlの設定

さあ、次はhugoのconfig.tomlの設定。基本はこの形でok最後に/が必要だとか言うブログを見たが、僕の場合は逆にうまくいたなかった。今まで、httpできちんと運用できていたならhttpをhttpsに変えるだけでok。色々、ググっているうちに混乱してしまい。config.tomlまであれこれやってしまった。

baseurl = "https://shou2017.com"

詰まったこと3、cloudFrontの設定

ここも基本は、AWS再入門 Amazon CloudFront編通りにやって大丈でした。

cloud front側のOrigin Domain Nameは必ずs3のエンドポイントをコピペする必要があります。これをやってもうまく行かない場合は、多分、s3のバケットポリシーが間違ってる可能性が高いです。コピペした時にhttpが貼り付けできてないとかで焦らない。

あとは、Alternate Domain Names (CNAMEs)に必ず自分のドメインを記入すること。

route53でcloud frontのAliasを使うことは可能。

cloud front側で重要なのはここくらいです。

詰まったこと4、s3のバケットポリシーの設定

hugoで生成した静的サイトを運用しようとして、色々、ググって、[CloudFront + S3]特定バケットに特定ディストリビューションのみからアクセスできるよう設定するを参考してそのままやっちゃうと動かなかった。

どういうエラーかと言うと、こう言うの。indexとかは表示されるが、他のページは表示されない。

<Error>
    <Code>AccessDenied</Code>
    <Message>Access Denied</Message>
    <RequestId>E193C9CDF4319589</RequestId>
    <HostId>
xbU85maj87/jukYihXnADjXoa4j2AMLFx7t08vtWZ9SRVmU1Ijq6ry2RDAh4G1IGPIeZG9IbFZg=
    </HostId>
</Error>

原因は、オリジンアクセスアイデンティティの設定のところ、素直にここで設定すると。自動でs3のバケットポリシーが作られて中身がこんな感じなります。

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E21XQ8NAGWMBQQ"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::myhost.com.cdn/*"
        }
    ]
}

ここで間違っているのは、principalのところ。ここをこうしなきゃいけない。

"Principal": {
                "AWS": "*"
            },

一回、つまると設定し直しに15分はかかる。面倒なことが多いので今度、ちゃんとまとめみよう。多分やる、、、。

Tags
CloudFront
See Also