Upgrade to Pro — share decks privately, control downloads, hide ads and more …

エンジニア夫婦で結婚式のWEB招待状を作った話 / Build Wedding Invitat...

Jumpei Sakatsu
March 02, 2023
350

エンジニア夫婦で結婚式のWEB招待状を作った話 / Build Wedding Invitation Site

Jumpei Sakatsu

March 02, 2023
Tweet

Transcript

  1. Amazon S3 - 静的ウェブサイトホスティング オブジェクトストレージサービスでありながら、静的ウェブサイト をホスティングできる神サービス 以下の 3Step でお手軽にホスティングができる 1.

    静的ウェブサイトホスティングの有効化 2. インデックスドキュメントの設定 3. アクセス許可の設定 ただし、Amazon S3 単体では HTTPS をサポートしていない 参考文献: https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html © 2023 @saka2jp
  2. CloudFront - SSL 対応 CDN (Contents Delivery Network )のマネージドサービス ディストリビューションのオリジンに

    S3 を指定する *.cloudfront.net ドメイン名で HTTPS を使用できる ディストリビューション用に既に選択されている CloudFront の デフォルト SSL/TLS 証明書 味気ないのでどうせならカスタムドメインにしたい! 参考文献: https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-https-requests-s3/ © 2023 @saka2jp
  3. Route53 - カスタムドメイン DNS (Domain Name System )サーバーのマネージドサービス ドメインはお名前.com で無料で取得済み

    Route53 で作成したホストゾーンのネームサーバーをお名前.com に 登録し、名前解決できるように設定 参考文献: https://dev.classmethod.jp/articles/route53-domain-onamae/ © 2023 @saka2jp
  4. AWS Certificate Manager - SSL/TLS 証明書の 発行 SSL/TLS 証明書のマネージドサービス ACM

    を利用することで、CloudFront や ELB などの他の AWS サー ビスとシームレスに連携することができる Route53 で作成したカスタムドメインの証明書を発行 参考文献: https://aws.amazon.com/jp/premiumsupport/knowledge-center/install-ssl-cloudfront/ © 2023 @saka2jp
  5. 小ネタ - 自動デプロイ構築してみた ② on: pull_request: branches: - main types:

    - closed jobs: deploy-s3: name: deploy s3 if: github.event.pull_request.merged == true runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 - uses: aws-actions/configure-aws-credentials@v1 with: aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} aws-region: ap-northeast-1 - name: s3 sync working-directory: ./ run: aws s3 sync . s3://*** © 2023 @saka2jp
  6. 参考文献 クラスメソッドの数々の記事に助けられました CloudFront と S3 で作成する静的サイト構成の私的まとめ | DevelopersIO CloudFront で素早くコンテンツを更新させたい場合に

    TTL を短 くし Invalidation を行わないキャッシュ戦略を考える | DevelopersIO S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実 装してみた(Amazon SES + AWS Lambda + API Gateway ) | DevelopersIO © 2023 @saka2jp