当现代前端应用越来越复杂时，单纯地将静态文件扔到服务器上已经无法满足业务需求。对于一个典型的 Vue 3 全栈应用而言，我们通常需要在云端配置 S3 存储桶来存放构建产物，配置 CloudFront CDN 来加速全球访问，甚至还需要配置 Lambda 函数来处理简单的后端逻辑。如果每次更新环境都在 AWS 控制台手动点击配置，不仅效率低下，而且极易因为人为疏忽导致生产环境配置不一致。引入基础设施即代码的理念，将 AWS CloudFormation 与 Vue 3 的工程化流程深度结合，是解决这一痛点的最佳实践。
为什么 Vue 3 项目需要基础设施即代码
在传统的开发模式中，前端工程师往往只关注代码本身，而云资源的配置则交由运维人员手动操作。这种割裂的工作流在面对快速迭代的 Vue 3 项目时会暴露出诸多问题。比如，当你在本地开发环境测试了一个新的 S3 存储桶策略，想要同步到测试环境或生产环境时，手动复现这些步骤不仅耗时，还可能因为控制台界面的更新而导致操作遗漏。基础设施即代码的核心思想是将这些云资源定义在可读的模板文件中，使其像应用代码一样可以被版本控制、审查和复用。
AWS CloudFormation 是亚马逊云服务提供的一项核心基础设施即代码工具。它允许开发者使用 YAML 或 JSON 格式的文本文件来描述所需的 AWS 资源。通过在 Vue 3 项目中集成 CloudFormation，我们可以确保开发、测试和生产环境的绝对一致性。因为环境本身就是通过同一份模板创建出来的，这极大地降低了因为环境差异导致的部署失败率。此外，当项目需要销毁或重建环境时，CloudFormation 可以一键清理所有关联的资源，避免了云资源泄漏带来的额外成本。
将基础设施的定义直接放在 Vue 3 的代码仓库中，还能促进前后端与运维团队的协作。当开发者需要新增一个 CDN 缓存行为时，只需提交一个修改 CloudFormation 模板的 Pull Request。团队成员可以在代码审查阶段直观地看到即将发生的变更，评估其对现有架构的影响。这种透明化的管理方式，使得基础设施的演进变得有迹可循，大大提升了系统的可维护性。
编写基础 CloudFormation 模板托管 Vue 3 应用
要实现 Vue 3 应用的自动化托管，首先需要编写一个基础的 CloudFormation 模板。这个模板的核心任务是创建一个 S3 存储桶用于存放 Vue 3 打包生成的静态文件，以及一个 CloudFront 分布用于提供 HTTPS 访问。在编写模板时，我们需要遵循 CloudFormation 的结构规范，包括 Resources、Outputs 等字段。同时，为了确保资源的安全性和可追溯性，还需要在模板中配置适当的权限和标签。
下面是一个基础的 CloudFormation YAML 模板示例，它定义了托管 Vue 3 应用所需的核心资源。在这个模板中，我们创建了一个配置了网站托管模式的 S3 存储桶，以及一个指向该存储桶的 CloudFront 分布。注意，在真实的生产环境中，建议使用 Origin Access Control 而不是直接开放存储桶的公共读取权限，这里为了演示简化了部分配置。
AWSTemplateFormatVersion: '2010-09-09'
Description: 'Vue 3 应用基础托管设施'
Resources:
VueAppS3Bucket:
Type: AWS::S3::Bucket
Properties:
BucketName: my-vue3-app-bucket
AccessControl: PublicRead
WebsiteConfiguration:
IndexDocument: index.html
ErrorDocument: index.html
VueAppCloudFrontDistribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
- DomainName: !GetAtt VueAppS3Bucket.RegionalDomainName
Id: S3Origin
S3OriginConfig: {}
Enabled: 'true'
DefaultRootObject: index.html
DefaultCacheBehavior:
TargetOriginId: S3Origin
ViewerProtocolPolicy: redirect-to-https
ForwardedValues:
QueryString: 'false'
ViewerCertificate:
CloudFrontDefaultCertificate: 'true'
Outputs:
CloudFrontDomainName:
Description: 'Vue 3 应用的访问域名'
Value: !GetAtt VueAppCloudFrontDistribution.DomainName
在上述模板中，我们定义了两个主要资源。S3 存储桶被设置为网站托管模式，并配置了公共读取策略，这样 CloudFront 才能正确拉取静态文件。CloudFront 分布则配置了默认根对象和 HTTPS 跳转策略，确保用户可以通过安全的协议访问应用。在 Outputs 部分，我们输出了 CloudFront 的域名，这在后续的自动化部署脚本中非常有用，因为我们需要知道将构建产物上传到哪里。通过将这段模板保存在 Vue 3 项目的 infrastructure 目录下，我们就实现了基础设施与应用代码的同源管理。
将 CloudFormation 部署集成到 Vue 3 工程化流程中
有了模板文件后，下一步是将其集成到 Vue 3 的构建和部署流程中。现代 Vue 3 项目通常使用 Vite 作为构建工具，配合 npm 的脚本系统来管理任务。我们可以编写一套 npm scripts，利用 AWS CLI 命令来实现构建、打包、上传静态文件以及更新 CloudFormation 堆栈的全流程自动化。这样，开发者只需执行一条命令，就能完成从代码到云端资源的完整交付。
下面是一个配置在 package.json 中的 scripts 示例，展示了如何将 Vue 3 的构建命令与 AWS 部署命令串联起来。这里假设你已经配置好了 AWS CLI 的凭证，并且拥有相应的权限。我们将部署过程分为构建前端应用、同步文件到 S3 以及更新 CloudFormation 堆栈三个步骤。
{
"name": "vue3-cloud-app",
"version": "1.0.0",
"scripts": {
"build": "vite build",
"deploy:assets": "aws s3 sync ./dist s3://my-vue3-app-bucket --delete",
"deploy:infra": "aws cloudformation deploy --template-file infrastructure/template.yaml --stack-name vue3-app-stack --capabilities CAPABILITY_NAMED_IAM",
"deploy": "npm run build && npm run deploy:infra && npm run deploy:assets"
}
}
在这个脚本配置中，deploy:infra 命令使用 AWS CLI 的 cloudformation deploy 功能来执行我们的模板。它会自动处理堆栈的创建或更新，并等待操作完成。deploy:assets 命令则负责将 Vue 3 构建出的 dist 目录内容同步到 S3 存储桶中，并通过 --delete 参数清理掉已经不存在的旧文件。最后，deploy 命令通过 npm run 将这些步骤串联起来。通过这种方式，我们将复杂的云资源管理逻辑封装成了简单的前端工程化命令，极大地降低了 Vue 3 项目上云的心智负担，让开发者能够专注于业务逻辑的实现。
Vue 3CloudFormationAWS基础设施修改时间：2026-08-23 18:38:55