2
3

More than 3 years have passed since last update.

AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた(パート①)

Last updated at Posted at 2021-02-19

皆さんこんにちは!

最近、暖かったり寒かったり気温の変化が激しく大変ですね。

インドア大学生の僕にはあまり関係ないんですけどね(笑)

ってことで今回はAWS初心者がHTTPS化されたサイトをアップロードしていく流れをご紹介したいと思います。

タイトルが長いということは、書く内容も必然と長くなっていくので2つに分けて説明していきます。

流れとしては以下のようになります。

  1. 静的サイトをS3へデプロイ
  2. お名前ドットコムでドメイン登録
  3. Route53で独自ドメイン登録(ここまでがパート①)
  4. CertificateManagerでSSL証明書の発行(ここからパート②)
  5. CloudFrontで独自ドメインでアクセス

こんな感じになります。

パート1に関しては、他の方が記事を挙げているのでそれらを見て頂く形になります。

パート2からはつまずくポイントが少しあるので、それらをしっかりと理解しながら説明していきます。

何事も最初ってかなり時間がかかったり、つまづいたりすることが多いのでぜひこの記事を参考にして頂けたらなと思います。

よかったら、LGTMお願いします!

それでは一緒に説明を見ていきましょう!

1. 静的サイトをS3へデプロイ

これは僕が記事を書くよりも下記の記事の方が分かりやすいので、こちらを参照の下、S3へデプロイしてください!

Amazon S3でSPAをサクッと公開する

S3へデプロイする時が一番壁にぶち当たるポイントだと思うので、デプロイするときにエラーが出た場合はこちらの記事を見てみてください。

AWSのS3でデプロイするときにエラーが出た時の話

結構時間がかかると思うので頑張ってください!

2. お名前ドットコムでドメイン登録

こちらも僕が記事として書くよりも、他の方の記事の方が円滑に登録を行えるのでいくつか記事をご紹介して頂きます。

ドメイン登録を行う際は自分の用途に合わせてドメインを指定してください。

お名前.comの登録方法・ドメイン取得方法【初心者向けに解説!】

【ブログ初心者向け】お名前.comで独自ドメインを取得する方法をステップごとに解説

ご協力誠にありがとうございます。

以下、説明用のドメインはexample.comとします。

3. Route53で独自ドメイン登録

これでパート①は最後になります。

ここまで中々骨のある作業だった思いますが、最後はすごく簡単なので肩の力を抜いてご覧下さい!

AWSコンソールの検索欄で「Route53」と入力してクリックしてください。

するとこのような画面になると思います。

image.png

もしかしたら違うかも。

そしたら、左のメニュー欄の「ホストゾーン」をクリックし、ホストゾーンの作成をクリックしてください。

image.png

※重要 画像のようにドメイン名には自分で決めたドメインの前にwww.のように何か名前をを付けて下さい。今回は分かりやすく説明するためにwww.example.comとします。

タイプはサイトを一般公開するので「パブリックホストゾーン」とします。

そして、無事完成されたら成功です!

パート①ここまでとします。

S3へデプロイするのが一番難しいと思います。

ただ、されさえできてしまえば後は簡単な作業です。

パート②はこちらの記事になります。

AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた(パート②)

パート②はパート①に比べてやることも少ないので、あともう少し頑張りましょう!

以上、「AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた(パート①)」

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい!!

Thank you for reading

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3