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

デベキャンLT
https://prtimes.jp/main/html/rd/p/000000303.000014901.html

Transcript

1. エンジニア夫婦で 結婚式の WEB 招待状を作った話 © 2023 @saka2jp
2. 自己紹介 坂津潤平 フリーランスエンジニア Go/TypeScript サウナ 「サ活だいすき坂津」 スプラトゥーン、APEX Follow me!! Twitter, GitHub, etc... © 2023 @saka2jp
3. 結婚しました 今年の 5 月に挙式予定 https://www.shihantei.com/ WEB 招待状の共作にチャンレジ！ © 2023 @saka2jp
4. © 2023 @saka2jp
5. デモ 実際に作成した WEB 招待状をお見せします © 2023 @saka2jp
6. 役割分担 奥さん：現マネージャー、自分：現アプリエンジニア よい機会なので普段の職域から離れてそれぞれチャレンジ！ デザイン・コンテンツ：奥さん インフラ：自分 © 2023 @saka2jp
7. 技術選定 1. Netlify/Vercel/Cloudflare Pages などの静的サイトホスティングサ ービス 2. AWS Amplify 3. Firebase Hosting 4. GitHub Pages © 2023 @saka2jp
8. モチベーション駆動開発 「AWS （インフラ）に詳しくなりたい！」 マネージドサービスは確かに便利だけどブラックボックス 良くも悪くも仕組みをわかっていなくても動いてくれる AWS エンジニアとして成長するために、CloudFront+S3 で静的サ イトホスティングにチャレンジ！ Not Amplify ！ © 2023 @saka2jp
9. Amazon S3 - 静的ウェブサイトホスティング オブジェクトストレージサービスでありながら、静的ウェブサイト をホスティングできる神サービス 以下の 3Step でお手軽にホスティングができる 1. 静的ウェブサイトホスティングの有効化 2. インデックスドキュメントの設定 3. アクセス許可の設定 ただし、Amazon S3 単体では HTTPS をサポートしていない 参考文献: https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html © 2023 @saka2jp
10. 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
11. Route53 - カスタムドメイン DNS （Domain Name System ）サーバーのマネージドサービス ドメインはお名前.com で無料で取得済み Route53 で作成したホストゾーンのネームサーバーをお名前.com に 登録し、名前解決できるように設定 参考文献: https://dev.classmethod.jp/articles/route53-domain-onamae/ © 2023 @saka2jp
12. 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
13. 小ネタ - 自動デプロイ構築してみた ① GitHub Actions で特定のブランチにマージされたときに自動デプロ イ デプロイ用の IAM ユーザーを作成 aws-cli で S3 にコンテンツをアップロード © 2023 @saka2jp
14. 小ネタ - 自動デプロイ構築してみた ② 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
15. 感想 ① どのサービスを使えば実現ができるのか？なぜそのサービスが必要 なのか？を考えながら構築することでサービスに対する理解が深ま った！ Amplify を使わずに自分で構築するという目的だったが、S3 も CloudFront も Route53 も ACM も便利なマネージドサービスだと いうことを改めて認識 © 2023 @saka2jp
16. 感想 ② マネージドサービスはすごく便利だが、一人のエンジニアとしては その中身までしっかり理解したい 仕組みを理解するには自分で 1 から作ってみることが 1 番！ 次は DNS サーバーを自前で構築してみるかも... ？ © 2023 @saka2jp
17. 参考文献 クラスメソッドの数々の記事に助けられました CloudFront と S3 で作成する静的サイト構成の私的まとめ | DevelopersIO CloudFront で素早くコンテンツを更新させたい場合に TTL を短 くし Invalidation を行わないキャッシュ戦略を考える | DevelopersIO S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実 装してみた（Amazon SES + AWS Lambda + API Gateway ） | DevelopersIO © 2023 @saka2jp
18. まとめ AWS 、ハンパない クラスメソッド、ハンパない © 2023 @saka2jp