/webpack-s3-terraform

AWS, Terraform, Webpackとかを少しさわったりしたのでs3 + CloudFront で静的ファイルのホスティングやってみた。 リソースはTerraformで管理してて、Webpackでバンドルしたものをホスティングしてる

Primary LanguageHCL

webpack-s3-terraform

HTML + SCSS + JavaScript を使ったサイトを S3 + CloudFront でホスティングする。 リソースの管理にはTerraformを用いて、GitHub Actionsを用いたCD環境も整備する。

構成

./
├── terraform # s3, cloudfrontなどのリソース管理
├── .github/
├── .gitignore
├── README.md 
├── node_modules/
├── package.json
├── public/ # このディレクトリごとS3へアップロード
├── src/ 
├── webpack.config.js
└── yarn.lock

実行

yarn install
yarn serve

CI

以下のようにLighthouseのデプロイURLとエラー項目が表示されるように実装。 image

CD

  1. プロダクションビルドしたものをpublic/に配置。
  2. それをS3にフォルダごとアップロードする。
  3. CloudFrontのキャッシュを削除

terraform commands

terraform init

# 実行しようとしているものの確認
terraform plan 

# 実行
terraform apply

# フォーマット
terraform fmt

# 正しいかのチェック
terraform validate