Blog

Blog

PHODAL

Serverless 应用开发指南:使用 S3 部署静态网站

在尝试了使用 Router53 路由到 S3 后,并想试试能否使用 serverless 框架来上传静态内容。在探索官方的 DEMO 后,找到了一个 serverless-finch 插件可以做相应的事情。

serverless create --template aws-nodejs s3-static-file s3-static-file

配置 serverless-finch

官网的 serverless-client-s3 已经停止维护了,并推荐使用 serverless-finch

serverless-finch 的安装方式是:

npm install --save serverless-finch

默认的官网生成的项目,并没有 package.json 文件,需要手动执行 npm inti,再安装插件。

因此修改完后的 package.json 文件如下所示:

{
  "name": "s3-static-file",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Phodal Huang",
  "license": "MIT",
  "dependencies": {
    "serverless-finch": "^1.1.1"
  }
}

在这个时候,我们需要按 serverless 框架的插件要求,添加如下的内容:

plugins:
  - serverless-finch

并配置好我们的 S3 存储桶的名字,最后 serverless.yml 文件的内容如下所示:

service: s3-static-file


plugins:
  - serverless-finch

provider:
  name: aws
  runtime: nodejs6.10

custom:
  client:
    bucketName: wdsm.io

我们配置的 S3 存储桶的名字是: wdsm.io,然后其使用 client/dist 文件来放置静态文件。

静态内容

如我们的 index.html 文件的路径是: client/dist/index.html,对应的内容是:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WDSM.io</title>
</head>
<body>
    <h1>WDSM</h1>
</body>
</html>

最后,执行 serverless client deploy 就可以部署我们的网站。

再次提醒,这次我们用的是 serverless client deploy

相应的过程日志如下所示:

Serverless: Deploying client to stage "dev" in region "us-east-1"...
Serverless: Bucket wdsm.io exists
Serverless: Listing objects in bucket wdsm.io...
Serverless: Deleting all objects from bucket wdsm.io...
Serverless: Configuring website bucket wdsm.io...
Serverless: Configuring policy for bucket wdsm.io...
Serverless: Configuring CORS policy for bucket wdsm.io...
Serverless: Uploading file error.html to bucket wdsm.io...
Serverless: If successful this should be deployed at: https://s3.amazonaws.com/wdsm.io/error.html
Serverless: Uploading file index.html to bucket wdsm.io...
Serverless: If successful this should be deployed at: https://s3.amazonaws.com/wdsm.io/index.html

由于配置了 Router53 指向了 S3,因此可以直接访问:http://wdsm.io/ 来看最后的内容。

并且,对应的删除命令也变成了:serverless client remove

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《前端架构:从入门到微前端》

《前端架构:从入门到微前端》是一本围绕前端架构的实施手册,从基础的架构规范,到如何设计前端架构,再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面,来帮助前端工程师更好地进行系统设计。

前端架构包含以下五部分内容:

  • 设计:讲述了架构设计的模式,以及设计和制定前端工作流。
  • 基础:通过深入构建系统、单页面应用原理、前端知识体系等,来构建出完整的前端应用架构体系。
  • 实施:通过与代码结构的方式,介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。
  • 微前端:引入6种微前端的概念,以及如何划分、设计微前端应用,并展示了如何实现这6种微前端架构。
  • 演进:提出更新、迁移、重构、重写、重新架构等架构演进方式,来帮助开发人员更好地设计演进式架构。
comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签