Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@Syunto07ka

S3+Cloudfront+Route53でSPAを公開したときにハマったこと

More than 1 year has passed since last update.

tl;dr

  • やはりまだACMの証明書はバージニア北部にリージョン設定しておかないとCloudFrontに設定できない
  • S3のバケット名はドメイン名完全一致じゃないとだめ
  • S3のStatic website hostingを設定したときに出てくるエンドポイントをCloudFrontのOrigin Domain Nameに設定しないとStatic website hosting の設定を素通りする、何も効かない

やってたこと

  • S3 + CloudFront + Route53 で静的ホスティングサイトを作成する
  • アップするものはReact(create-react-app)で作成したSPAのbuildファイル
  • CIで自動的に〜とかちょっとすっ飛ばしたかったので手動でS3のバケットに挙げる

ハマったこと

やはりまだACMの証明書はバージニア北部にリージョン設定しておかないとCloudFrontに設定できない

お名前.comでドメイン取得したので、互いにサイトを行ったり来たりで取得した。
最初は四苦八苦あって証明書は取れたもののCloudFrontで設定ができない。

いろいろ調べてみると米国東部 (バージニア北部)us-east-1にリージョンを設定して証明書を取得しないといけないそう。ここでメインドメイン(example.com)の証明書を取得できていないことにも気づいたので、ワイルドカードを使ったドメイン(*.example.com)と一緒にドメインを追加して証明書を取得。

あとはCloudFrontとRoute53の設定をして完了。

S3のバケット名はドメイン名完全一致じゃないとだめ

まあこれは色んなサイトにも書いてあるし公式も説明してる感じなので調べてみてください

まあそんなこんなでルートにアクセスしたらビルド内容の表示ができました。

S3のStatic website hostingを設定したときに出てくるエンドポイントをCloudFrontのOrigin Domain Nameに設定しないとStatic website hosting の設定を素通りする、何も効かない

こいつが一番わからなかった。
前提として、SPAなので用意したバケット直下のindex.htmlを全てのアクセスに関してレスポンスしたい。
その設定がS3のStatic website hostingでできるそう。
でもいくら設定してもできなかった。

なんでかなと思ってCloudFrontとかいろいろ確認してみてやっと理解。

CloudFrontのOrigin Domain Nameに設定していたものが、example.com.s3.amazonaws.comだった。S3のStatic website hosting設定画面に表示されているエンドポイントはexample.com.s3-hoge-ap-northeast-1.amazonaws.comのようにリージョン名がついているものだった。

S3のエンドポイントをCloudFront側に設定して完了。
これで一旦Static website hostingの設定は反映されるように。

最後に

ただここからまだredirect設定(ドメインのあとのパスは残しつつレスポンスはバケット直下のindex.htmlみたいなやつ)をしないといけなくて、そこがちょっとうまく行かず。一旦ここまでをメモとして残しておく。

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Syunto07ka
業務でバックエンド、趣味でフロントエンドやってます
lancers
テクノロジーで誰もが自分らしく働ける社会をつくる。日本最大級のクラウドソーシング「ランサーズ」を運営

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?