Skip to content

Commit

Permalink
Merge commit 'd0d611e1f16185093a8b8bd5b315a914976b1714' into release
Browse files Browse the repository at this point in the history
  • Loading branch information
github-actions[bot] committed Jan 22, 2022
2 parents 5a76183 + d0d611e commit 037429f
Show file tree
Hide file tree
Showing 10 changed files with 37 additions and 34 deletions.
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.devcontainer/** linguist-vendored
25 changes: 16 additions & 9 deletions .github/workflows/CI.yml
Original file line number Diff line number Diff line change
Expand Up @@ -127,23 +127,30 @@ jobs:
with:
fetch-depth: 25

- run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
- name: Fetch git tags
run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*

- name: Cache
uses: actions/cache@v2
- name: Setup node
uses: actions/setup-node@v2
with:
path: |
.yarn
**/node_modules
key: e2e-${{ hashFiles('yarn.lock') }}
node-version: '14'
cache: 'yarn'

- name: Install dependencies
run: yarn install --frozen-lockfile --check-files
run: yarn --frozen-lockfile

- name: Download build artifact
uses: actions/download-artifact@v2
with:
name: lambda
path: lib

- run: ./scripts/publish-release.sh
# git user is required (bot not used) by release-it
- name: Set git user to GitHub Actions
uses: fregante/setup-git-user@v1.0.1

- name: Set registry for publish
run: yarn config set registry https://registry.npmjs.org

- name: Publish packages
run: ./scripts/publish-release.sh
1 change: 1 addition & 0 deletions .github/workflows/release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ jobs:
release-branch: release
release-tag: ${{ github.event.inputs.tag }}
exclude: |
.devcontainer/**/*
.vscode/**/*
lib/**/*
scripts/**/*
Expand Down
9 changes: 8 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
# Changelog

## 12.0.1 (December 21, 2021)
## [Unreleased]

## [12.0.2] - 2022-01-22

- Uses Image Optimizer module of [Next.js 12.0.2](https://github.com/vercel/next.js/releases/tag/v12.0.2) ([#101](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/pull/101))
- Use relative path as lambda function local package path ([#98](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/pull/98))

## [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.
Expand Down
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,9 +96,9 @@ Then rebuild and redeploy your Next.js application to make use of the changed co

## Examples

- [Statically exported Next.js app hosted on S3](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-export)
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)
- [Next.js + Vercel](https://github.com/milliHQ/terraform-aws-next-js-image-optimization/tree/main/examples/with-next-js)
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.
Expand Down Expand Up @@ -140,7 +140,7 @@ Then rebuild and redeploy your Next.js application to make use of the changed co
| 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.1"` | no |
| next\_image\_version | Next.js version from where you want to use the image optimizer from. Supports semver ranges. | `string` | `"12.0.2"` | 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 |

Expand Down
18 changes: 4 additions & 14 deletions examples/with-next-js-export/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,30 +59,20 @@ After Terraform has successfully created all resources in your AWS account, you
> 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
### 3. 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
npm run export # Prepares the build output for upload to S3
```

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
### 4. 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:
Expand All @@ -94,7 +84,7 @@ 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.
To update your site, simply repeat step 3 & 4 of this guide.

## Caveats

Expand Down
3 changes: 0 additions & 3 deletions examples/with-next-js-export/next.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
const domainName = '<distribution-id>.cloudfront.net';

module.exports = (phase) => {
const isExport = phase === 'phase-export';

Expand All @@ -11,7 +9,6 @@ module.exports = (phase) => {
loader: isExport ? 'custom' : 'default',
domains: ['assets.vercel.com'],
formats: ['image/avif', 'image/webp'],
path: `https://${domainName}/_next/image`,
},

/**
Expand Down
2 changes: 1 addition & 1 deletion examples/with-next-js-export/pages/shimmer.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Shimmer = () => (
<h1>Image Component With Shimmer Data URL</h1>
<Image
alt="Mountains"
src="/mountains.jpg"
src="/mountains.jpeg"
placeholder="blur"
blurDataURL={`data:image/svg+xml;base64,${toBase64(shimmer(700, 475))}`}
width={700}
Expand Down
4 changes: 2 additions & 2 deletions main.tf
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

module "lambda_content" {
source = "milliHQ/download/npm"
version = "2.0.0"
version = "2.1.0"

module_name = "@millihq/tf-next-image-optimization"
module_version = var.next_image_version
Expand Down Expand Up @@ -36,7 +36,7 @@ module "image_optimizer" {
}

create_package = false
local_existing_package = module.lambda_content.abs_path
local_existing_package = module.lambda_content.rel_path

allowed_triggers = {
AllowExecutionFromAPIGateway = {
Expand Down
2 changes: 1 addition & 1 deletion variables.tf
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "12.0.1"
default = "12.0.2"
}

variable "next_image_base_origin" {
Expand Down

0 comments on commit 037429f

Please sign in to comment.