-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge commit '78ab4d0f60d3e4c32aeb6f782168377c218f667c' into release
- Loading branch information
Showing
10 changed files
with
228 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| # Custom Domain Example | ||
|
|
||
| This example shows how to configure a custom domain for the [Terraform Next.js Image Optimization module for AWS](https://github.com/milliHQ/terraform-aws-next-js-image-optimization). | ||
|
|
||
| > **Note:** The full example code is available on [GitHub](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-custom-domain) | ||
| ## Setup the Terraform module | ||
|
|
||
| 1. Create a new file called `main.tf` and paste the code from the following source: [main.tf on GitHub](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/blob/main/examples/with-custom-domain/main.tf): | ||
|
|
||
| 2. Then configure the domain you want to use: | ||
|
|
||
| ```tf | ||
| # main.tf | ||
| ... | ||
| ########### | ||
| # Variables | ||
| ########### | ||
| variable "custom_domain" { | ||
| description = "Your custom domain" | ||
| type = string | ||
| default = "example.com" | ||
| } | ||
| variable "custom_domain_zone_name" { | ||
| description = "The Route53 zone name of the custom domain" | ||
| type = string | ||
| default = "example.com." | ||
| } | ||
| ... | ||
| ``` | ||
|
|
||
| 3. Run Terraform to deploy the image optimizer to your AWS account: | ||
|
|
||
| ```sh | ||
| terraform init # Only needed on the first time running Terraform | ||
|
|
||
| terraform plan # (Optional) See what resources Terraform will create | ||
| terraform apply # Deploy the image optimizer module to your AWS account | ||
| ``` | ||
|
|
||
| After Terraform has successfully created all resources in your AWS account, you should see the following output on the terminal: | ||
|
|
||
| ```sh | ||
| > Apply complete! | ||
| > | ||
| > Outputs: | ||
| > | ||
| > custom_domain = "example.com" | ||
| > cloudfront_domain = "<distribution-id>.cloudfront.net" | ||
| ``` | ||
|
|
||
| 4. Integrate with Next.js by editing `next.config.js`: | ||
|
|
||
| ```diff | ||
| // next.config.js | ||
|
|
||
| module.exports = { | ||
| + images: { | ||
| + path: 'https://example.com/_next/image' | ||
| + }, | ||
| } | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| terraform { | ||
| required_providers { | ||
| aws = { | ||
| source = "hashicorp/aws" | ||
| version = "~> 4.0" | ||
| } | ||
| } | ||
| } | ||
|
|
||
| # AWS region where the image optimizer should be deployed to. | ||
| # While the optimized images are cached globally (via CloudFront CDN) this | ||
| # determines the location where the optimization (Lambda) should happen, when | ||
| # the cache is missed. | ||
| provider "aws" { | ||
| region = "us-east-1" | ||
| } | ||
|
|
||
| ########### | ||
| # Variables | ||
| ########### | ||
|
|
||
| variable "custom_domain" { | ||
| description = "Your custom domain" | ||
| type = string | ||
| default = "example.com" | ||
| } | ||
|
|
||
| # Assuming that the hosted ZONE of your domain is already registered in your | ||
| # AWS account (Route 53) | ||
| # https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/AboutHZWorkingWith.html | ||
| variable "custom_domain_zone_name" { | ||
| description = "The Route53 zone name of the custom domain" | ||
| type = string | ||
| default = "example.com." | ||
| } | ||
|
|
||
| # Get the hosted zone for the custom domain | ||
| data "aws_route53_zone" "custom_domain_zone" { | ||
| name = var.custom_domain_zone_name | ||
| } | ||
|
|
||
| # Create a new record in Route 53 for the domain | ||
| resource "aws_route53_record" "cloudfront_alias_domain" { | ||
| zone_id = data.aws_route53_zone.custom_domain_zone.zone_id | ||
| name = each.key | ||
| type = "A" | ||
|
|
||
| alias { | ||
| name = module.next_image_optimizer.cloudfront_domain_name | ||
| zone_id = module.next_image_optimizer.cloudfront_hosted_zone_id | ||
| evaluate_target_health = false | ||
| } | ||
| } | ||
|
|
||
| ########## | ||
| # SSL Cert | ||
| ########## | ||
|
|
||
| # Creates a free SSL certificate for CloudFront distribution | ||
| # For more options (e.g. multiple domains) see: | ||
| # https://registry.terraform.io/modules/terraform-aws-modules/acm/aws/ | ||
| module "cloudfront_cert" { | ||
| source = "terraform-aws-modules/acm/aws" | ||
| version = "~> 3.0" | ||
|
|
||
| domain_name = var.custom_domain | ||
| zone_id = data.aws_route53_zone.custom_domain_zone.zone_id | ||
| subject_alternative_names = slice(local.aliases, 1, length(local.aliases)) | ||
|
|
||
| tags = { | ||
| Name = "CloudFront ${var.custom_domain}" | ||
| } | ||
|
|
||
| # CloudFront works only with certs stored in us-east-1 | ||
| providers = { | ||
| aws = aws.global_region | ||
| } | ||
| } | ||
|
|
||
| ####################### | ||
| # Route53 Domain record | ||
| ####################### | ||
|
|
||
| module "next_image_optimizer" { | ||
| source = "milliHQ/next-js-image-optimization/aws" | ||
|
|
||
| cloudfront_aliases = [var.custom_domain] | ||
| cloudfront_acm_certificate_arn = module.cloudfront_cert.acm_certificate_arn | ||
| next_image_domains = ["assets.vercel.com"] | ||
| } | ||
|
|
||
| output "custom_domain" { | ||
| value = var.custom_domain | ||
| } | ||
|
|
||
| output "cloudfront_domain" { | ||
| value = module.next_image_optimizer.cloudfront_domain_name | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters