今天,Netlify 已经成为快速构建 web 应用程序的现代平台,无需担心代码之外的任何事情。我们 Micro 是 Netlify 的用户,我们已经接受了这种非凡的体验。更重要的是,Netlify 已经向我们展示了一个经典 web 架构堆栈,该堆栈以前将 web 和 api 的关注点合并在一个地方。当我们通过一个分层架构前端时,除了如何从后端消费动态内容的提示之外,我们没有得到任何东西。今天我们都称之为 Jamstack。
Jamstack
Credit jamstack.org
jamstack 通过将静态内容和动态内容分离,并推动通过 api 和服务消费动态内容,对前端架构进行了重新思考。实际上,Netlify 采用了这种模型,试图为前端构建微服务,并通过后端 api 实现服务消费的统一。很明显,这是未来 web 的架构,大部分云服务将仅仅作为 api 来构建和使用。
我们经常看到的一个问题是 “Netlify 的后端是什么?” 许多在 Netlify 上构建 Jamstack 应用的前端用户正在寻找他们可以找到并构建这些 api 的地方。似乎连 Netlify 目前的回答都是:“去 heroku 上主持点什么吧”。我认为到 2020 年,这是行不通的。如果前端被重新设计,那么同样的事情也会发生在后端,以满足用户的需求。
Netlify for the Backend
M3O 是云服务开发平台。在不管理基础设施的情况下构建 api 的最快方法。M3O 利用 Micro,这是一个用于微服务开发的开放源码平台。我们从 Micro 得到的是一个强大的框架,用于构建、运行和使用 api 作为微服务。M3O 提供的是 Micro as a Service,这是一个用于构建微服务的完全受管理的平台。在后台用 Go 和 gRPC 编写服务,通过 HTTP API 动态地公开它们,供前端使用。M3O 希望能填补前端开发者市场的空白。M3O 是用于后端的 Netlify。
M3O Features
如前所述,M3O 是一个完全托管的 Micro 服务平台。这是什么意思?Micro 提供了编写、运行和使用微服务的构建块。从源头到奔跑和超越。M3O 接受它并托管它,因此您可以继续编写 api,而不必担心底层基础设施。
以下是一些关键功能和服务:
- Microservices development 使用 gRPC 和 protobuf 代码生成
- Service runtime和流程生命周期管理
- Source to running 在不需要 CI/CD 的情况下
- Authentication and authorization 用于访问控制和用户管理
- Dynamic configuration 和 secrets 管理
- PubSub messaging 和事件流
- Service discovery 和 secure networking
- Key-value storage 和 CRUD 操作
- Automatic HTTP routing 基于路径的解析
- Identity aware proxy 用于远程访问和 gRPC-web 应用程序
- Public API gateway 和 TLS 默认支持
- Public and private repos 支持包括 github, gitlab 和 bitbucket
M3O 是一个功能完整的微服务开发平台,从在本地机器上生成服务模板,到在云中编写和运行它,所有这些都使用相同的 Micro CLI 体验。M3O 默认情况下动态地为您公开 HTTPS url。因此,一旦部署,每个服务就会自动成为 API。
当一个新的前端开发模型出现时,我们认为它决定了后端“无头”范式的转变,而 M3O 想要在那里托管所有这些 api 作为微服务。
API First
从 AWS 一直到 Twilio 和 Stripe,我们看到 api 的出现成为云服务的主导因素。更引人注目的是,虽然这种模式在过去几年才出现,但我们才刚刚开始。我们相信,从现在开始的十年内,一些最重要的公司将会首先使用 API,但奇怪的是,还没有平台来满足这种开发形式。
Twilio、Stripe 和其他一些公司都必须为他们的 API first 方法构建基础设施。我们认为,随着越来越多的公司走上这条道路,必须出现工具来增强它们的能力,不仅在计算层,而且通过提供所需的更高层次的抽象。这就是 M3O 的目标。
但不要只相信我们的话。我们将向您演示其价值主张,这样您就可以亲眼看到 Micro 和 M3O 有多么强大。
Building a backend
编写和部署 api 需要几分钟,而不是几小时或几天!我们不再在后端处理基础设施,就像 Netlify 在前端授权开发者一样,我们也在在后端为新一代的开发者做同样的事情。
让我们带你看一看。我们将在 Netlify 上部署一个现有的微博服务,并使用这个演示前端:https://loving-goodall-44ee08.netlify.app/。但首先让我们从注册开始。
Signup to M3O
首先你要注册 M3O 并在我们的开发环境中注册一个免费帐户。
从安装 micro 开始
curl -fsSL https://install.m3o.com/micro | /bin/bash
对于那些担心将 curl 转换为 bash 的人,您可以首先查看它 https://install.m3o.com/micro。
目前,注册完全是基于 CLI 的,所以只需发出以下命令并执行步骤
micro signup
一旦你完成了,你应该在 M3O 上有一个帐户并自动登录。
Run Helloworld
通过运行 helloworld 验证这一点。
micro run github.com/micro/services/helloworld
检查它是否运行,并尝试通过 CLI 调用它。
# check the status
micro status
# call helloworld
micro call helloworld --name="Alice"
现在我们来看看更有趣的部分。通过为您动态生成的 HTTP API 调用它。
# get your namespace
NAMESPACE=$(micro user namespace)
# curl your unique url
curl "https://$NAMESPACE.m3o.com/helloworld?name=Alice"
如果一切都好,我们可以继续运行一些更有趣的东西。
Deploying a dynamic blog backend
我们将部署一个无头 CMS,或者更广为人知的博客 API。
在开放源码方面,Micro 维护了一些可重用的示例服务,我们都可以使用这些示例服务并对其做出贡献。你可以在 github.com/micro/services 查看它们。让我们用其中的几个来引导这个博客。
因为 Micro 是关于微服务开发的,所以我们将博客 API 分解为帖子、评论和标签。现在,我们将重点关注帖子和标签。您可以在 https://github.com/micro/services/tree/master/blog 中找到代码。
部署它们非常简单。
# run the posts service
micro run github.com/micro/services/blog/posts
# run the tags service
micro run github.com/micro/services/blog/tags
使用 micro status
检查它们是否在运行。您应该看到从开始、构建到运行的状态进展。如果你想看日志或任何相关的事情,只要 micro logs posts
,对任何其他服务的名字相同。
Write a post on the CLI
一旦服务运行,就可以立即通过 CLI 以动态命令的形式调用它们。
保存一个快速贴子:
micro posts save --id=1 --title="My first post" --content="This is pretty epic"
帖子列表:
micro posts query
同样的调用也可以通过 API 进行,只要知道你的名称空间:
Call it via the HTTP API
现在,这是它变得很酷的地方,更重要的是,你将从运行在 Netlify 上的前端应用调用什么。首先像前面一样获取您的名称空间。
$ micro user namespace
random-example-namespace
使用 curl 调用:
$ curl -H "Micro-Namespace: random-example-namespace" https://api.m3o.dev/posts/query
{
"posts": [
{
"id": "1",
"title": "My first post",
"slug": "my-first-post",
"content": "This is pretty epic"
}
}
通用的 api.m3o.dev
url 要求我们传入我们的名称空间,所以我们查询我们自己的服务,但每个名称空间也有自己的唯一 url,所以你不必担心在前端代码。只需将namespace + m3 .dev 编写为 random-example-namespace.m3o.dev
。
$ curl https://random-example-namespace.m3o.dev/posts/query
{
"posts": [
{
"id": "1",
"title": "My first post",
"slug": "my-first-post",
"content": "This is pretty epic"
}
}
就是这样!现在,前端的后端在 M3O 上运行。
为了好玩,让我们部署示例前端至 Netlify。
Deploying the frontend to Netlify
frontend 是一个简单的 angular 应用程序,我们把它放在一起来验证这个前提:
Netlify for the frontend, Micro for the backend
您可以在 github.com/m3o/blog-frontend 中找到代码,但是我们现在将带您完成安装。 loving-goodall-44ee08.netlify.app 下托管站点的部署设置如下:
Build settings
为了方便使用,您可以复制下面的设置。在你看到 'concert-celtic-uncover' 的地方,将它与您的名称空间从 micro user namespace
在CLI。我们需要知道要调用什么后端 API。
Repository github.com/m3o/blog-frontend
Base directory Not set
Build command sed -i 's/micro/concert-celtic-uncover/g' ./src/environments/environment.prod.ts && ng build --prod && cp ./src/assets/_redirects ./dist/blog-frontend
Publish directory dist/blog-frontend
如您所见,在示例中部署的是最初的 m3o/blog-frontend
,但在您的示例中,“m3o” 将被您的 fork 替换。这是因为 Netlify 要求获得 repo 的权限。
构建命令有点复杂,下面是它在做什么:
# Replace the micro namespace with your own
namespace=$(micro user namespace)
sed -i "s/micro/$namespace/g" ./src/environments/environment.prod.ts
# It's an angular app, so we have to ng build
ng build --prod
# Single page applications need a redirect file
cp ./src/assets/_redirects ./dist/blog-frontend
完成后,它构建成功,您的 web 应用程序应该是活的!
别忘了从你的终端添加帖子。
Create a new post
# Add a post
micro posts save --id=1 --title="My first post" --content="This is pretty epic"
# query posts
micro posts query
现在在 Netlify 的前端看看吧。你应该看到你的帖子立即出现。
下面是我们在 loving-goodall-44ee08.netlify.app 上的演示。
What’s the frontend doing
我们在 Netlify 上运行的前端基本上是使用 micro 作为后台,M3O 为你的帖子服务提供托管 api。我们使用url api.m3o.dev
并将名称空间与 Micro-Namespace
头文件一起传递,但您同样可以使用唯一的 API url,即 $namespace.m3o.dev
。
部署的每个服务都解析为一个路径,例如“posts”服务是 api.m3o.dev/posts ,它们的方法在此基础上执行,所以是“posts”。后台的查询是 api.m3o.dev/posts/query
。这提供了后台基于 Go 的 gRPC 服务到前端 HTTP api 的自动动态映射。
下面是我们用来构造调用的 typescript 示例代码:
export class M3oService {
public address: string = environment.m3oAddress;
public namespace: string = environment.m3oNamespace;
constructor(private http: HttpClient) { }
get(service: string, endpoint: string, params: HttpParams): Promise<Object> {
return this.http.get(this.address + "/" + service + "/" + endpoint, {
headers: {
"Micro-Namespace": [this.namespace]
},
params: params,
}).toPromise()
}
}
我们在前端列出了这些帖子
ngOnInit(): void {
this.m3o.get("posts", "query", null).then(v => {
this.posts = v["posts"]
})
}
Micro is Netlify for the backend
Signup to M3O right now.