Merge commit 'cac15567ec814b501e502319e02b9d3a3f2d550e' into release

milliHQ · Dec 21, 2021 · 5a76183 · 5a76183
2 parents af4f6e8 + cac1556
commit 5a76183
Show file tree

Hide file tree

Showing 40 changed files with 1,064 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog
 
+## 12.0.1 (December 21, 2021)
+
+In this release we fixed a bug that could occur when using absolute image paths (When you use S3 as backend, you are not affected).  
+In addition you can now define a new input variable `next_image_base_origin` that can be used to resolve absolute image paths.
+
+When you set `next_image_base_origin = "https://example.com"` requests for an absolute image path (`/path/to/image.png`) are then resolved to the URL `https://example.com/path/to/image.png`.
+
+We also added a fully featured example how to use `next export` together with S3 and the image optimizer, check it out: [Statically exported Next.js app hosted on S3](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js)
+
+- Add base origin setting ([#94](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/issues/94), [#95](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/pull/95))
+- Uses Image Optimizer module of [Next.js 12.0.1](https://github.com/vercel/next.js/releases/tag/v12.0.1) ([#81](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/pull/81))
+
 ## 12.0.0 (November 28, 2021)
 
 This release introduces a new package called [Pixel](https://github.com/milliHQ/pixel) that abstracts the image optimization stuff and makes it usable with platforms other than AWS Lambda.

diff --git a/README.md b/README.md
@@ -96,7 +96,9 @@ Then rebuild and redeploy your Next.js application to make use of the changed co
 
 ## Examples
 
-- [Next.js + Vercel](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js)  
+- [Statically exported Next.js app hosted on S3](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js)  
+  Use the image optimizer together with a statically exported Next.js app that is deployed to S3 and CloudFront.
+- [Next.js + Vercel](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js-export)  
   Use the image optimizer together with a Next.js app deployed on Vercel.
 - [Existing CloudFront](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-existing-cloudfront)  
   Use the image optimizer with an existing CloudFront distribution.
@@ -133,11 +135,12 @@ Then rebuild and redeploy your Next.js application to make use of the changed co
 | lambda\_policy\_json | Additional policy document as JSON to attach to the Lambda Function role. | `string` | `""` | no |
 | lambda\_role\_permissions\_boundary | ARN of IAM policy that scopes aws\_iam\_role access for the lambda. | `string` | `null` | no |
 | lambda\_timeout | Max amount of time the worker Lambda Function has to return a response in seconds. Should not be more than 30 (Limited by API Gateway). | `number` | `30` | no |
+| next\_image\_base\_origin | Base URL where requests for absolute image paths should be resolved to. Should not have a trailing slash. | `string` | `null` | no |
 | 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\_formats | If the Accept head matches more than one of the configured formats, the first match in the array is used. Therefore, the array order matters. If there is no match, the Image Optimization API will fallback to the original image's format. | `list(string)` | <pre>[<br>  "image/webp"<br>]</pre> | 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` | `"12.0.0"` | no |
+| next\_image\_version | Next.js version from where you want to use the image optimizer from. Supports semver ranges. | `string` | `"12.0.1"` | 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 |
 

diff --git a/docs/assets/architecture.png b/docs/assets/architecture.png
diff --git a/examples/with-next-js-export/.gitignore b/examples/with-next-js-export/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-next-js-export/LICENSE b/examples/with-next-js-export/LICENSE
@@ -0,0 +1,10 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Felix Haus (milliVolt infrastructure)
+Copyright (c) 2021 Vercel, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/examples/with-next-js-export/README.md b/examples/with-next-js-export/README.md
@@ -0,0 +1,105 @@
+# Next.js export and S3 example
+
+This example shows how to use the image optimizer together with a statically exported Next.js HTML site that is hosted on AWS S3.
+
+> **Note:** The full example code is available on [GitHub](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js-export)
+
+## Features
+
+- ✅ &nbsp;[Statically exported Next.js](https://nextjs.org/docs/advanced-features/static-html-export) HTML site using `next export`
+- ✅ &nbsp;Site hosted on [AWS S3](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html)
+- ✅ &nbsp;Optimized caching with Amazon CloudFront
+- ✅ &nbsp;[Serverless image optimization](https://github.com/milliHQ/terraform-aws-next-js-image-optimization) using CloudFront and AWS Lambda
+
+## Setup guide
+
+This guide walks you through the necessary steps to deploy the example to your own AWS account.
+
+### 0. Prerequisites
+
+The following software is required to follow this guide:
+
+- [Node.js 14+](https://nodejs.org/)
+- [Terraform 1.0+](https://www.terraform.io/downloads)
+- [AWS CLI](https://aws.amazon.com/cli/)
+
+### 1. Initialize project
+
+Download the files from the example app and initialize it in a new folder:
+
+```sh
+npx create-next-app -e https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js-export my-app
+cd my-app
+```
+
+### 2. Create the required resources in your AWS account
+
+We use Terraform to create all the resources (S3 bucket, CloudFront distribution, image optimizer, etc.) in your AWS account.  
+For simplicity we use [AWS Access Keys](https://docs.aws.amazon.com/powershell/latest/userguide/pstools-appendix-sign-up.html) for authentication, other authentication methods are [also available](https://registry.terraform.io/providers/hashicorp/aws/latest/docs#authentication).
+
+```sh
+# Expose your AWS Access Keys to the current terminal session
+export AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
+export AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
+
+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:
+>
+> domain = "<distribution-id>.cloudfront.net"
+> website_bucket_id = "next-image-optimizer-example-export"
+```
+
+### 3. Adjust Next.js config
+
+In the Next.js project, open the `next.config.js` file and add the following lines (Remember to replace `<distribution-id>` with the output from the previous step):
+
+```diff
+// next.config.js
++ const domainName = 'xxxxxxxxxxxxxxxxx.cloudfront.net';
+- const domainName = '<distribution-id>.cloudfront.net';
+```
+
+### 4. Build and export the Next.js site
+
+To create a static build of Next.js we need to run two commands.  
+`next build` builds the production site in the `.next/` folder.  
+[`next export`](https://nextjs.org/docs/advanced-features/static-html-export) then creates a static HTML export from your site that can be deployed to a static file hosting service like AWS S3.
+
+```sh
+npm run build  # Builds the Next.js site
+npm run export # Prepares the
+```
+
+After running the two commands you should see a new folder named `out/` in your project, where the statically exported site is exported to.
+
+### 5. Upload the Next.js site to S3
+
+To upload the content of the `out/` folder we use the [AWS CLI](https://aws.amazon.com/cli/).  
+Make sure to replace `<bucket-name>` with the output from step 2 before running the command:
+
+```sh
+aws s3 sync ./out s3://<bucket-name>
+```
+
+---
+
+Your website should now be accessible on the CloudFront domain `<distribution-id>.cloudfront.net` you got from step 2.  
+To update your site, simply repeat step 4. & 5 of this guide.
+
+## Caveats
+
+Please note that [not all features](https://nextjs.org/docs/advanced-features/static-html-export#unsupported-features) of Next.js are supported when using `next export`.  
+In addition here are some things that should be taken into account when using this solution:
+
+- **When using JPEG images in the `/public` folder, always use the `.jpeg` (long) not the `.jpg` (short) extension for it.**  
+  Next.js image component always requests the long extension `.jpeg`, since S3 cannot soft redirect `.jpg` to `.jpeg` the request for the image would fail otherwise.
diff --git a/examples/with-next-js-export/app.css b/examples/with-next-js-export/app.css
@@ -0,0 +1,19 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+  margin: 0;
+  padding: 0;
+  background: black;
+  color: white;
+}
+
+a {
+  cursor: pointer;
+  color: #0076ff;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border-bottom: 1px solid black;
+}
+
+a:hover {
+  border-bottom: 1px solid #0076ff;
+}
diff --git a/examples/with-next-js-export/components/view-source.js b/examples/with-next-js-export/components/view-source.js
@@ -0,0 +1,26 @@
+import { svg, arm } from './view-source.module.css';
+
+const ViewSource = ({ pathname }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="80"
+    height="80"
+    viewBox="0 0 250 250"
+    fill="#151513"
+    className={svg}
+  >
+    <a
+      title="View Source"
+      href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
+    >
+      <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
+      <path
+        className={arm}
+        d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+      />
+      <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
+    </a>
+  </svg>
+);
+
+export default ViewSource;
diff --git a/examples/with-next-js-export/components/view-source.module.css b/examples/with-next-js-export/components/view-source.module.css
@@ -0,0 +1,48 @@
+.svg {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.arm {
+  transform-origin: 130px 106px;
+}
+
+.svg:hover .arm {
+  animation: wave 560ms ease-in-out;
+}
+
+@keyframes wave {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  20% {
+    transform: rotate(-25deg);
+  }
+
+  40% {
+    transform: rotate(10deg);
+  }
+
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  80% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .svg:hover .arm {
+    animation: none;
+  }
+
+  .svg:hover .arm {
+    animation: wave 560ms ease-in-out;
+  }
+}