Overview
Some configuration parameters in Vercel for static sites can only be controlled with the vercel.json configuration file, which is not automatically picked up by an Astro build preset. If vercel-cli is not used for deployment, the vercel.json file will not be detected and must be manually deployed using vercel-cli.
Learn more about configuring Vercel projects with vercel.json on official docs.
Vercel environments
There are two default environments in Vercel: Production and Preview. Since the configurations for these two environments are slightly different, we need to prepare two vercel.json files, one for each environment.
Production environment
Prepare a vercel.json for the Production environment and execute vercel -A vercel.json --prod to deploy current version of site and vercel.json to Production environment.
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
},
{
"key": "Referrer-Policy",
"value": "origin-when-cross-origin"
},
{
"key": "Cross-Origin-Resource-Policy",
"value": "same-site"
},
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; img-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; frame-src https://www.youtube.com/; frame-ancestors 'none'; form-action 'self';"
}
]
}
]
}Preview environment
The Preview environment has different requirements than Production, as it automatically loads Vercel preview scripts and needs access to various resources from the vercel.live and vercel.com domains.
Prepare a vercel-preview.json for the Preview environment and execute vercel -A vercel-preview.json to deploy current version of site and vercel.json to Preview environment.
{
"headers": [
{
"source": "/(.*)",
"headers": [
{
"key": "X-Content-Type-Options",
"value": "nosniff"
},
{
"key": "Referrer-Policy",
"value": "origin-when-cross-origin"
},
{
"key": "Cross-Origin-Resource-Policy",
"value": "same-site"
},
{
"key": "Content-Security-Policy",
"value": "default-src 'self'; img-src 'self' https://assets.vercel.com/; script-src 'self' 'unsafe-inline' https://vercel.live/; style-src 'self' 'unsafe-inline'; frame-src https://vercel.live/ https://www.youtube.com/; frame-ancestors 'none'; form-action 'self';"
}
]
}
]
}