merge commit

Author: github-actions[bot]

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 11.0.0 (June 15, 2021)
+
+The output `cloudfront_origin_image_optimizer` is now deprecated.
+Use `cloudfront_origin` instead.
+
+- Fixes image optimization for webp format ([#44](https://github.com/dealmore/terraform-aws-next-js-image-optimization/pull/44))  
+  Thanks to [@vcnc-hex](https://github.com/vcnc-hex) for contributing!
+- Uses Image Optimizer module of [Next.js 11.0.0](https://github.com/vercel/next.js/releases/tag/v11.0.0) ([#45](https://github.com/dealmore/terraform-aws-next-js-image-optimization/pull/45))
+- Add output for cache behavior ([#43](https://github.com/dealmore/terraform-aws-next-js-image-optimization/issues/43), [#48](https://github.com/dealmore/terraform-aws-next-js-image-optimization/pull/48))
+- Bump AWS API Gateway Terraform module from 0.11.0 to 1.1.0 ([#47](https://github.com/dealmore/terraform-aws-next-js-image-optimization/pull/47))
+- Bump AWS Lambda Terraform module from 1.47.0 to 2.4.0 ([#46](https://github.com/dealmore/terraform-aws-next-js-image-optimization/pull/46))
+
 ## 10.2.3 (June 05, 2021)
 
 - Improves caching of processed images by using [CloudFront Origin Shield](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/origin-shield.html) ([#2](https://github.com/dealmore/terraform-aws-next-js-image-optimization/issues/2), [#41](https://github.com/dealmore/terraform-aws-next-js-image-optimization/pull/41))

README.md

@@ -135,19 +135,21 @@ Then rebuild and redeploy your Next.js application to make use of the changed co
 | next\_image\_device\_sizes | Allowed device sizes that should be used for image optimization. | `list(number)` | `null` | no |
 | next\_image\_domains | Allowed origin domains that can be used for fetching images. | `list(string)` | `[]` | no |
 | next\_image\_image\_sizes | Allowed image sizes that should be used for image optimization. | `list(number)` | `null` | no |
-| next\_image\_version | Next.js version from where you want to use the image optimizer from. Supports semver ranges. | `string` | `"10.2.3"` | no |
+| next\_image\_version | Next.js version from where you want to use the image optimizer from. Supports semver ranges. | `string` | `"11.0.0"` | no |
 | source\_bucket\_id | When your static files are deployed to a Bucket (e.g. with Terraform Next.js) the optimizer can pull the source from the bucket rather than over the internet. | `string` | `null` | no |
 | tags | Tag metadata to label AWS resources that support tags. | `map(string)` | `{}` | no |
 
 ## Outputs
 
 | Name | Description |
 |------|-------------|
+| cloudfront\_cache\_behavior | Predefined CloudFront cache behavior. Can be used to embed the image optimizer into an existing CloudFront resource. |
 | cloudfront\_cache\_policy\_id | Cache policy id used for image optimization. |
 | cloudfront\_domain\_name | Domain of the internal CloudFront distribution. |
 | cloudfront\_hosted\_zone\_id | Zone id of the internal CloudFront distribution. |
+| cloudfront\_origin | Predefined CloudFront origin. Can be used to embed the image optimizer into an existing CloudFront resource. |
 | cloudfront\_origin\_id | Id of the custom origin used for image optimization. |
-| cloudfront\_origin\_image\_optimizer | Predefined CloudFront origin of the image optimizer. Can be used to embedd the image optimizer into an existing CloudFront resource. |
+| cloudfront\_origin\_image\_optimizer | Deprecated, please use cloudfront\_origin instead. |
 | cloudfront\_origin\_request\_policy\_id | Request policy id used for image optimization. |
 
 <!--- END_TF_DOCS --->

examples/with-existing-cloudfront/main.tf

@@ -35,16 +35,21 @@ resource "aws_cloudfront_distribution" "distribution" {
   is_ipv6_enabled = true
   comment         = "next-image-optimizer-example-external-cf"
 
-  default_cache_behavior {
-    allowed_methods  = ["GET", "HEAD"]
-    cached_methods   = ["GET", "HEAD"]
-    target_origin_id = module.next_image_optimizer.cloudfront_origin_id
+  # This is a generic dynamic to create the default cache behavior
+  dynamic "default_cache_behavior" {
+    for_each = [module.next_image_optimizer.cloudfront_cache_behavior]
 
-    viewer_protocol_policy = "redirect-to-https"
-    compress               = true
+    content {
+      allowed_methods  = default_cache_behavior.value["allowed_methods"]
+      cached_methods   = default_cache_behavior.value["cached_methods"]
+      target_origin_id = default_cache_behavior.value["target_origin_id"]
+
+      viewer_protocol_policy = default_cache_behavior.value["viewer_protocol_policy"]
+      compress               = default_cache_behavior.value["compress"]
 
-    origin_request_policy_id = module.next_image_optimizer.cloudfront_origin_request_policy_id
-    cache_policy_id          = module.next_image_optimizer.cloudfront_cache_policy_id
+      origin_request_policy_id = default_cache_behavior.value["origin_request_policy_id"]
+      cache_policy_id          = default_cache_behavior.value["cache_policy_id"]
+    }
   }
 
   # This is a generic dynamic to create an origin

main.tf

@@ -18,7 +18,7 @@ resource "random_id" "function_name" {
 
 module "image_optimizer" {
   source  = "terraform-aws-modules/lambda/aws"
-  version = "1.47.0"
+  version = "2.4.0"
 
   function_name = random_id.function_name.hex
   description   = var.deployment_name
@@ -42,7 +42,7 @@ module "image_optimizer" {
   allowed_triggers = {
     AllowExecutionFromAPIGateway = {
       service = "apigateway"
-      arn     = module.api_gateway.this_apigatewayv2_api_execution_arn
+      arn     = module.api_gateway.apigatewayv2_api_execution_arn
     }
   }
 
@@ -60,7 +60,7 @@ module "image_optimizer" {
 #########################
 module "api_gateway" {
   source  = "terraform-aws-modules/apigateway-v2/aws"
-  version = "0.11.0"
+  version = "1.1.0"
 
   name          = var.deployment_name
   description   = "Managed by Terraform-next.js image optimizer"
@@ -70,7 +70,7 @@ module "api_gateway" {
 
   integrations = {
     "GET /_next/{proxy+}" = {
-      lambda_arn             = module.image_optimizer.this_lambda_function_arn
+      lambda_arn             = module.image_optimizer.lambda_function_arn
       payload_format_version = "2.0"
       timeout_milliseconds   = var.lambda_timeout * 1000
     }
@@ -87,6 +87,9 @@ module "api_gateway" {
 data "aws_region" "current" {}
 
 locals {
+  # Origin Shield
+  ###############
+
   # Origin Shield mapping configuration
   # See: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/origin-shield.html
   origin_shield_region_mapping = {
@@ -104,7 +107,7 @@ locals {
     eu-west-2      = "eu-west-2"      # Europe (London)
     sa-east-1      = "sa-east-1"      # South America (São Paulo)
 
-    # Regions where Origin Shield is NOT avaible (choose closest region)
+    # Regions where Origin Shield is NOT available (choose closest region)
     us-west-1    = "us-west-2"      # US West (N. California)
     af-south-1   = "eu-west-1"      # Africa (Cape Town)
     ap-east-1    = "ap-southeast-1" # Asia Pacific (Hong Kong)
@@ -131,15 +134,18 @@ locals {
   } : {}
 
   # Query string parameters used by image optimizer
-  # Must be sorted to prevent unnessesary updates of the cloudFront distribution
+  # Must be sorted to prevent unnecessary updates of the cloudFront distribution
   cloudfront_allowed_query_string_keys = sort(["url", "w", "q"])
 
   # Headers that are used by the image optimizer
   cloudfront_allowed_headers = sort(["accept", "referer"])
 
-  cloudfront_origin_image_optimizer = merge(
+
+  # CloudFront origin
+  ###################
+  cloudfront_origin = merge(
     {
-      domain_name = trimprefix(module.api_gateway.this_apigatewayv2_api_api_endpoint, "https://")
+      domain_name = trimprefix(module.api_gateway.apigatewayv2_api_api_endpoint, "https://")
       origin_id   = var.cloudfront_origin_id
 
       custom_origin_config = {
@@ -151,6 +157,19 @@ locals {
     },
     local.cloudfront_origin_shield_config
   )
+
+  # CloudFront cache behavior
+  ###########################
+  cloudfront_cache_behavior = {
+    path_pattern             = "/_next/image*"
+    allowed_methods          = ["GET", "HEAD"]
+    cached_methods           = ["GET", "HEAD"]
+    target_origin_id         = local.cloudfront_origin.origin_id
+    viewer_protocol_policy   = "redirect-to-https"
+    compress                 = true
+    origin_request_policy_id = aws_cloudfront_origin_request_policy.this.id
+    cache_policy_id          = aws_cloudfront_cache_policy.this.id
+  }
 }
 
 resource "random_id" "policy_name" {
@@ -219,10 +238,8 @@ module "cloudfront" {
 
   cloudfront_create_distribution = var.cloudfront_create_distribution
   cloudfront_price_class         = var.cloudfront_price_class
-  cloudfront_origin              = local.cloudfront_origin_image_optimizer
-
-  cloudfront_origin_request_policy_id = aws_cloudfront_origin_request_policy.this.id
-  cloudfront_cache_policy_id          = aws_cloudfront_cache_policy.this.id
+  cloudfront_origin              = local.cloudfront_origin
+  cloudfront_default_behavior    = local.cloudfront_cache_behavior
 
   deployment_name = var.deployment_name
   tags            = var.tags

modules/cloudfront-cache/main.tf

@@ -9,16 +9,20 @@ resource "aws_cloudfront_distribution" "distribution" {
   comment         = var.deployment_name
   price_class     = var.cloudfront_price_class
 
-  default_cache_behavior {
-    allowed_methods  = ["GET", "HEAD"]
-    cached_methods   = ["GET", "HEAD"]
-    target_origin_id = lookup(var.cloudfront_origin, "origin_id", null)
+  dynamic "default_cache_behavior" {
+    for_each = [var.cloudfront_default_behavior]
 
-    viewer_protocol_policy = "redirect-to-https"
-    compress               = true
+    content {
+      allowed_methods  = default_cache_behavior.value["allowed_methods"]
+      cached_methods   = default_cache_behavior.value["cached_methods"]
+      target_origin_id = default_cache_behavior.value["target_origin_id"]
+
+      viewer_protocol_policy = default_cache_behavior.value["viewer_protocol_policy"]
+      compress               = default_cache_behavior.value["compress"]
 
-    origin_request_policy_id = var.cloudfront_origin_request_policy_id
-    cache_policy_id          = var.cloudfront_cache_policy_id
+      origin_request_policy_id = default_cache_behavior.value["origin_request_policy_id"]
+      cache_policy_id          = default_cache_behavior.value["cache_policy_id"]
+    }
   }
 
   dynamic "origin" {

modules/cloudfront-cache/variables.tf

@@ -10,12 +10,8 @@ variable "cloudfront_origin" {
   type = any
 }
 
-variable "cloudfront_origin_request_policy_id" {
-  type = string
-}
-
-variable "cloudfront_cache_policy_id" {
-  type = string
+variable "cloudfront_default_behavior" {
+  type = any
 }
 
 variable "deployment_name" {

outputs.tf

@@ -13,9 +13,19 @@ output "cloudfront_origin_id" {
   value       = var.cloudfront_origin_id
 }
 
+output "cloudfront_origin" {
+  description = "Predefined CloudFront origin. Can be used to embed the image optimizer into an existing CloudFront resource."
+  value       = local.cloudfront_origin
+}
+
 output "cloudfront_origin_image_optimizer" {
-  description = "Predefined CloudFront origin of the image optimizer. Can be used to embedd the image optimizer into an existing CloudFront resource."
-  value       = local.cloudfront_origin_image_optimizer
+  description = "Deprecated, please use cloudfront_origin instead."
+  value       = local.cloudfront_origin
+}
+
+output "cloudfront_cache_behavior" {
+  description = "Predefined CloudFront cache behavior. Can be used to embed the image optimizer into an existing CloudFront resource."
+  value       = local.cloudfront_cache_behavior
 }
 
 output "cloudfront_origin_request_policy_id" {

scripts/bundle.js

@@ -29,6 +29,15 @@ async function main() {
     'node_modules/next/node_modules/jest-worker/build/workers/threadChild.js'
   );
 
+  fileList.push(
+    ...glob.sync(
+      'node_modules/next/dist/next-server/server/lib/squoosh/**/*.{js,wasm}',
+      {
+        cwd: workspaceRoot,
+      }
+    )
+  );
+
   // Create zip file
   await new Promise((resolve, reject) => {
     const outputFile = fs.createWriteStream(

variables.tf

@@ -4,7 +4,7 @@
 variable "next_image_version" {
   description = "Next.js version from where you want to use the image optimizer from. Supports semver ranges."
   type        = string
-  default     = "10.2.3"
+  default     = "11.0.0"
 }
 
 variable "next_image_domains" {