diff --git a/.changeset/forty-hotels-itch.md b/.changeset/forty-hotels-itch.md new file mode 100644 index 000000000..b13c6db35 --- /dev/null +++ b/.changeset/forty-hotels-itch.md @@ -0,0 +1,5 @@ +--- +'@astrojs/vercel': patch +--- + +Fix Astro's `domains` and `remotePatterns` not being used by Vercel when using Vercel Image Optimization diff --git a/packages/integrations/vercel/README.md b/packages/integrations/vercel/README.md index e16d98390..00c2a18cf 100644 --- a/packages/integrations/vercel/README.md +++ b/packages/integrations/vercel/README.md @@ -114,6 +114,8 @@ export default defineConfig({ Configuration options for [Vercel's Image Optimization API](https://vercel.com/docs/concepts/image-optimization). See [Vercel's image configuration documentation](https://vercel.com/docs/build-output-api/v3/configuration#images) for a complete list of supported parameters. +The `domains` and `remotePatterns` properties will automatically be filled using [the Astro corresponding `image` settings](https://docs.astro.build/en/reference/configuration-reference/#image-options). + ```js // astro.config.mjs import { defineConfig } from 'astro/config'; diff --git a/packages/integrations/vercel/src/image/shared.ts b/packages/integrations/vercel/src/image/shared.ts index ad6b45bd0..f6cace2a2 100644 --- a/packages/integrations/vercel/src/image/shared.ts +++ b/packages/integrations/vercel/src/image/shared.ts @@ -1,9 +1,13 @@ -import type { ImageMetadata, ImageQualityPreset, ImageTransform } from 'astro'; +import type { AstroConfig, ImageMetadata, ImageQualityPreset, ImageTransform } from 'astro'; -export const defaultImageConfig: VercelImageConfig = { - sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], - domains: [], -}; +export function getDefaultImageConfig(astroImageConfig: AstroConfig['image']): VercelImageConfig { + return { + sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], + domains: astroImageConfig.domains ?? [], + // Cast is necessary here because Vercel's types are slightly different from ours regarding allowed protocols. Behavior should be the same, however. + remotePatterns: (astroImageConfig.remotePatterns as VercelImageConfig['remotePatterns']) ?? [], + }; +} export function isESMImportedImage(src: ImageMetadata | string): src is ImageMetadata { return typeof src === 'object'; @@ -56,10 +60,11 @@ export const qualityTable: Record = { max: 100, }; -export function getImageConfig( +export function getAstroImageConfig( images: boolean | undefined, imagesConfig: VercelImageConfig | undefined, - command: string + command: string, + astroImageConfig: AstroConfig['image'] ) { if (images) { return { @@ -69,7 +74,7 @@ export function getImageConfig( command === 'dev' ? '@astrojs/vercel/dev-image-service' : '@astrojs/vercel/build-image-service', - config: imagesConfig ? imagesConfig : defaultImageConfig, + config: imagesConfig ? imagesConfig : getDefaultImageConfig(astroImageConfig), }, }, }; diff --git a/packages/integrations/vercel/src/serverless/adapter.ts b/packages/integrations/vercel/src/serverless/adapter.ts index a1d8b18bf..1c0eb9530 100644 --- a/packages/integrations/vercel/src/serverless/adapter.ts +++ b/packages/integrations/vercel/src/serverless/adapter.ts @@ -9,7 +9,11 @@ import { AstroError } from 'astro/errors'; import glob from 'fast-glob'; import { basename } from 'node:path'; import { fileURLToPath, pathToFileURL } from 'node:url'; -import { defaultImageConfig, getImageConfig, type VercelImageConfig } from '../image/shared.js'; +import { + getAstroImageConfig, + getDefaultImageConfig, + type VercelImageConfig, +} from '../image/shared.js'; import { exposeEnv } from '../lib/env.js'; import { getVercelOutput, removeDir, writeJson } from '../lib/fs.js'; import { copyDependenciesToFunction } from '../lib/nft.js'; @@ -143,7 +147,7 @@ export default function vercelServerless({ external: ['@vercel/nft'], }, }, - ...getImageConfig(imageService, imagesConfig, command), + ...getAstroImageConfig(imageService, imagesConfig, command, config.image), }); }, 'astro:config:done': ({ setAdapter, config, logger }) => { @@ -250,7 +254,18 @@ You can set functionPerRoute: false to prevent surpassing the limit.` ...routeDefinitions, ], ...(imageService || imagesConfig - ? { images: imagesConfig ? imagesConfig : defaultImageConfig } + ? { + images: imagesConfig + ? { + ...imagesConfig, + domains: [...imagesConfig.domains, ..._config.image.domains], + remotePatterns: [ + ...(imagesConfig.remotePatterns ?? []), + ..._config.image.remotePatterns, + ], + } + : getDefaultImageConfig(_config.image), + } : {}), }); diff --git a/packages/integrations/vercel/src/static/adapter.ts b/packages/integrations/vercel/src/static/adapter.ts index 0a63dc333..2908dbf58 100644 --- a/packages/integrations/vercel/src/static/adapter.ts +++ b/packages/integrations/vercel/src/static/adapter.ts @@ -1,6 +1,10 @@ import type { AstroAdapter, AstroConfig, AstroIntegration } from 'astro'; -import { defaultImageConfig, getImageConfig, type VercelImageConfig } from '../image/shared.js'; +import { + getAstroImageConfig, + getDefaultImageConfig, + type VercelImageConfig, +} from '../image/shared.js'; import { exposeEnv } from '../lib/env.js'; import { emptyDir, getVercelOutput, writeJson } from '../lib/fs.js'; import { isServerLikeOutput } from '../lib/prerender.js'; @@ -59,7 +63,7 @@ export default function vercelStatic({ vite: { define: viteDefine, }, - ...getImageConfig(imageService, imagesConfig, command), + ...getAstroImageConfig(imageService, imagesConfig, command, config.image), }); }, 'astro:config:done': ({ setAdapter, config }) => { @@ -91,7 +95,18 @@ export default function vercelStatic({ { handle: 'filesystem' }, ], ...(imageService || imagesConfig - ? { images: imagesConfig ? imagesConfig : defaultImageConfig } + ? { + images: imagesConfig + ? { + ...imagesConfig, + domains: [...imagesConfig.domains, ..._config.image.domains], + remotePatterns: [ + ...(imagesConfig.remotePatterns ?? []), + ..._config.image.remotePatterns, + ], + } + : getDefaultImageConfig(_config.image), + } : {}), }); }, diff --git a/packages/integrations/vercel/test/fixtures/image/astro.config.mjs b/packages/integrations/vercel/test/fixtures/image/astro.config.mjs index 2a343d035..78923f2cb 100644 --- a/packages/integrations/vercel/test/fixtures/image/astro.config.mjs +++ b/packages/integrations/vercel/test/fixtures/image/astro.config.mjs @@ -6,5 +6,10 @@ export default defineConfig({ adapter: vercel({imageService: true}), image: { service: testImageService(), + domains: ['astro.build'], + remotePatterns: [{ + protocol: 'https', + hostname: '**.amazonaws.com', + }], }, }); diff --git a/packages/integrations/vercel/test/image.test.js b/packages/integrations/vercel/test/image.test.js index 834b6d69b..c5153cc6e 100644 --- a/packages/integrations/vercel/test/image.test.js +++ b/packages/integrations/vercel/test/image.test.js @@ -32,7 +32,13 @@ describe('Image', () => { expect(vercelConfig.images).to.deep.equal({ sizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840], - domains: [], + domains: ['astro.build'], + remotePatterns: [ + { + protocol: 'https', + hostname: '**.amazonaws.com', + }, + ], }); });