介绍
在 serverless 架构中，前端与后端可以完全分离，前端静态资源可以直接存储到 S3 上，通过前端框架（如 React、Vue 等）来调用后端接口，实现前后端分离的目的。在 AWS 的 serverless 服务中，有一个名为 serverless-client-s3-custom 的 npm 包可以帮助你快速搭建基于 S3 的前端应用，本文将介绍该 npm 包的使用方法。
安装
在创建一个 serverless 应用之前，请确保本地已经安装了 Node.js 和 npm，然后执行以下命令安装 serverless-client-s3-custom：
npm install serverless-client-s3-custom --save-dev
安装完毕后，通过以下命令将 serverless-client-s3-custom 添加到 serverless.yml 文件中：
plugins: - serverless-client-s3-custom
执行完毕后，serverless.yml 文件中应该会多出一行：
plugins: - serverless-client-s3-custom
配置
在配置 serverless-client-s3-custom 之前，需要先在 S3 控制台中创建一个桶并上传前端静态资源。桶创建完成后，需要开启以下服务访问权限：
-- -------------------- ---- ------- - ---------- ------------- ----- ---------------------- ------------ - - ------ -------------------- --------- -------- ------------ ---- --------- - --------------- --------------- -- ----------- - ---------------------------------- ----------------------------------- - - - -展开代码
将上述 policy 保存到一个 json 文件中并上传到 S3 控制台，确保 S3 控制台中的该桶已通过上述 policy 开放了公开服务访问权限。
接着，在 serverless.yml 中配置 serverless-client-s3-custom：
custom: client: s3: bucketName: <your_bucket_name> region: <your_bucket_region>
其中，bucketName 必须为你在 S3 控制台中创建的桶名称，region 则为该桶所在的地域。在完成上述配置后，通过以下命令即可部署前端应用：
serverless client deploy部署完毕后，将输出应用的部署 URL，可以使用浏览器访问该 URL 来访问应用。如果修改了前端代码，只需要重新执行 deploy 命令即可。
示例代码
plugins: - serverless-client-s3-custom custom: client: s3: bucketName: my-bucket region: us-east-1
结语
通过上述步骤，我们完成了一个基于 S3 的 serverless 前端应用的部署和管理。本文介绍了 serverless-client-s3-custom npm 包的配置和使用方法，希望能帮助到大家在 serverless 架构中快速搭建前端应用。如果你有任何问题或建议，欢迎在评论区留言交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e581e8991b448d7854
