鉴于AWS的云编译（CodeBuild）是收费的，而且考虑到 从提交到编译 各种传输 速度比较慢，虽说直接通过部署直接能看到效果，但是对于开发阶段，既不经济又不便捷；这个时候我个人就倾向于本地开发调式，使用AWS命令传输，需要时才部署的方式来进行。

上回说到Angular，这次换个VUE来说下，

一，使用模板文件（template.yml）配置资源

这其实是一个很大的主题，理论上AWS通过控制台新建的任何服务，资源都是可以通过这种模板文件，通过SAM命令一次性提交到AWS，云端自动部署，类似各种操作系统的无人值守安装的感觉。

比如，我们部署一个VUE，其实和Angular一样，都是静态资源，只要一个S3 WEB设定下，就能跑了，这一系列的操作，如果用模板文件来实现就是

AWSTemplateFormatVersion: 2010-09-09
Transform: AWS::Serverless-2016-10-31
Description: Demo Vue Web

################################################################################
# 创建S3资源：                                                                  #
################################################################################
Parameters:
  #S3 桶 名称
  WebSitesBucketName:
    Type: String
    Description: S3 存储桶名
    Default: "demo-vue-web-01"

Resources:
  # S3 资源
  S3Bucket:
    Type: AWS::S3::Bucket
    Properties:
      BucketName: !Sub ${WebSitesBucketName}
      AccessControl: PublicRead
      WebsiteConfiguration:
        IndexDocument: index.html
        # ErrorDocument: error.html
  # S3 资源访问策略
  S3BucketPolicy:
    Type: "AWS::S3::BucketPolicy"
    Properties:
      Bucket: !Ref S3Bucket
      PolicyDocument:
        Statement:
          Action:
            - "s3:GetObject"
          Effect: "Allow"
          Resource: !Sub "arn:aws:s3:::${WebSitesBucketName}/*"
          Principal: "*"

执行一下这个模板文件，我们在AWS就能生成一个S3的数据桶并且各种WEB配置都OK了。（当然前提是我们的当前的用户要有这个权限，可以通过IAM赋予，MSC开发的情况下，安装AWSToolKit之后可以配置更改 这个Default 用户）

sam deploy -t opt/Template.yml

类似的，用这个模板文件建表（DynamoDB），消息队列（SQS），Lambda函数等等都是可以的，只是具体参数需要查询帮助文档，这里的S3只是最简单的例子

这个文件中会出现很多类似 的 Ref Sub的函数
比如 ：!Sub ${WebSitesBucketName} //其实指代的就是头部 Parameters 指定的参数，这个在sam执行的时候会提示要求输入（没有默认值的情况下）
详细解说： https://blog.css-net.co.jp/entry/2022/04/20/105925

二，本地VUE开发雏形搭建

//安装 Vue CLI 
npm install --global @vue/cli
//创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项
vue create my-project-name
cd my-project-name
//浏览器东动作确认： http://localhost:8080/
npm run serve
//编译:编译工程到 dist
npm run build

参考站点：
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application

接下来只需要在package.json的scripts加上一项

"deploy": "aws s3 cp --recursive dist/ s3://demo-vue-web-01/ --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",

这样执行

npm run build
npm run deploy

就能编译 并 复制当前成果物 复制到 云端。这个静态的站点的部分就OK了。访问S3的WEB节点，WEB端就OK了

最后修改日期: 2022年11月26日

作者