系列链接
ServiceFabric系列之一: ServiceFabric理论介绍
ServiceFabric系列之二: 在Windows上创建容器应用并部署到ServiceFabric中
ServiceFabric系列之三: 服务与服务之间是如何通信的——DNS服务
ServiceFabric系列之四: 服务与服务之间是如何通信的——反向代理
目的
现在做项目大多采用前后端分离的方式,本文会建立一个web前端(angular 6),一个后端API(传统的.net framework),前端代码会调用后端的API,接着将这两个分别打包成基于windows的docker 镜像,最后将这两个镜像部署到Azure的service fabric中。
前提条件
有微软的Azure的帐号及订阅
了解Docker并已安装在本地,切换为Window Container模式
大致了解Service Fabric,猛戳这里
本机安装了Visual Studio、VSCode、Git、NodeJS、angular-cli.
在Azure上注册一个docker registry
它就是一个镜像仓库,我们不用docker的公共镜像仓库,我们需要创建自己的私有仓库,点击create a resource,搜索container registry,接着点击创建,如下。
创建完成后,进入Access keys中,启用Admin user,这里你就可以使用如下用户名和密码登录此registry中了。
创建一个基于angular的Web前端,打包成镜像,推送到镜像仓库
PS C:\Users\cong.wu\Desktop\SFDemo> ng new FrontendDemo
PS C:\Users\cong.wu\Desktop\SFDemo\FrontendDemo> cd FrontendDemo
#打开VSCode
PS C:\Users\cong.wu\Desktop\SFDemo\FrontendDemo> code .
创建完成之后,结构如下:
运行如下命令build这个应用
ng build --prod
可以看到有一个dist文件夹,这里就是编译好的静态代码,然后在dist\FrontendDemo文件夹中创建一个Dockerfile
Dockerfile的内容如下,可以看出这是一个基于windows server 2016的aspnet基础镜像, 额!为啥不用nginx,因为报错额,难道nginx没有window 版本的镜像?
FROM microsoft/aspnet:4.7.1-windowsservercore-ltsc2016
ARG source
WORKDIR /inetpub/wwwroot
COPY . .
EXPOSE 80
#docker build -t accenturecode/frontenddemo .
然后运行如下命令,将其打包成镜像、推送到刚创建的私有镜像仓库中
#打包成accenturecode/frontenddemo镜像
PS C:\...\dist\FrontendDemo> docker build -t accenturecode/frontenddemo .
#登录到镜像仓库
PS C:\...\dist\FrontendDemo> docker login -u accenturecode accenturecode.azurecr.io
Password:
Login Succeeded
#给镜像打标签
PS C:\...\dist\FrontendDemo> docker tag accenturecode/frontenddemo accenturecode.azurecr.io/accenturecode/frontenddemo
#推送到镜像仓库
PS C:\...\dist\FrontendDemo> docker push accenturecode.azurecr.io/accenturecode/frontenddemo
创建一个基于.net framework的后端,打包成镜像,推送到镜像仓库
使用Visual Studio创建一个.net framework webApi,这个应用程序采用http.sys作为web 服务器,所以它必须寄宿在IIS下才能运行,目的是我们希望能把传统的.net应用程序放到service fabric之中,当然你也可以创建.net core,不过那样就可以使用linux docker container了。项目文件结构如下。
在项目上右击发布,生成的代码如下:
创建一个Dockerfile文件,内容如下
FROM microsoft/aspnet:4.7.1-windowsservercore-ltsc2016
WORKDIR /inetpub/wwwroot
COPY . .
#docker build -t accenturecode/backenddemo .
运行如下命令,将其打包成镜像、推送到刚创建的私有镜像仓库中
#打包成accenturecode/backendenddemo镜像
PS C:\...\bin\Release\Publish> docker build -t accenturecode/backenddemo .
#登录到镜像仓库
PS C:\...\bin\Release\Publish> docker login -u accenturecode accenturecode.azurecr.io
Password:
Login Succeeded
#给镜像打标签
PS C:\...\bin\Release\Publish> docker tag accenturecode/backenddemo accenturecode.azurecr.io/accenturecode/backendenddemo
#推送到镜像仓库
PS C:\...\bin\Release\Publish> docker push accenturecode.azurecr.io/accenturecode/backendenddemo
#最后你本地会有如下几个images
PS C:\...\bin\Release\Publish> docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
accenturecode.azurecr.io/accenturecode/backenddemo latest 952e1dab2704 3 hours ago 13.7GB
accenturecode/backenddemo latest 952e1dab2704 3 hours ago 13.7GB
accenturecode.azurecr.io/accenturecode/frontenddemo latest 6c84ef65f4d6 3 hours ago 13.6GB
accenturecode/frontenddemo latest 6c84ef65f4d6 3 hours ago 13.6GB
microsoft/aspnet 4.7.1-windowsservercore-ltsc2016 b4e67c95c3c6 4 weeks ago 13.6GB
查看你的镜像仓库,会看到有两个镜像
创建一个Service Fabric项目
创建此项目的主要目的是将这两个镜像部署到service fabric之中,此项目完全与你具体的应用程序或代码没有啥关系。
使用Visual Studio创建一个新的项目
点击OK
选择Container,并输入service Name, image name, host port, container port, 其中host port代表你虚拟机的端口,container port是容器的端口,到时访问我们的应用程序的网址时,端口是host port的80端口。创建完成之后,你的代码的结构看起来是这样子的。
这里你会发现在两个重要的文件,一个是ApplicationPackageRoot/ApplicationManifest.xml,一个是ApplicationPackageRoot/FrontendContainerServicePkg/ServiceManifest.xml。这里先不解释,我们继续创建一个新的service,右击ApplicationPackageRoot,创建一个新的Service
弹出的窗口中输入像下面这样的内容,注意这里的Host Port是83,也就是说后端的API暴露83端口,供前端调用。
创建完成之后,ApplicationPackageRoot/BackendContainerServicePkg/ServiceManifest.xml的内容如下。
<?xml version="1.0" encoding="utf-8"?>
<ServiceManifest Name="BackendContainerServicePkg"
Version="1.0.0"
xmlns="http://schemas.microsoft.com/2011/01/fabric"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<ServiceTypes>
<StatelessServiceType ServiceTypeName="BackendContainerServiceType" UseImplicitHost="true" />
</ServiceTypes>
<CodePackage Name="Code" Version="1.0.0">
<EntryPoint>
<ContainerHost>
<ImageName>accenturecode.azurecr.io/accenturecode/backenddemo</ImageName>
</ContainerHost>
</EntryPoint>
</CodePackage>
<ConfigPackage Name="Config" Version="1.0.0" />
<Resources>
<Endpoints>
<Endpoint Name="BackendContainerServiceTypeEndpoint" Port="83" />
</Endpoints>
</Resources>
</ServiceManifest>
ApplicationPackageRoot/ApplicationManifest.xml的关键内容如下。你需要在RepositoryCredentials节点中填入登录到你私有镜像仓库的用户名和密码,并标记PasswordEncrypted为false
<ServiceManifestImport>
<ServiceManifestRef ServiceManifestName="FrontendContainerServicePkg" ServiceManifestVersion="1.0.0" />
<ConfigOverrides />
<Policies>
<ContainerHostPolicies CodePackageRef="Code">
<!-- See https://aka.ms/I7z0p9 for how to encrypt your repository password -->
<RepositoryCredentials AccountName="accenturecode" Password="XXXXXX" PasswordEncrypted="false" />
<PortBinding ContainerPort="80" EndpointRef="FrontendContainerServiceTypeEndpoint" />
</ContainerHostPolicies>
</Policies>
</ServiceManifestImport>
<ServiceManifestImport>
<ServiceManifestRef ServiceManifestName="BackendContainerServicePkg" ServiceManifestVersion="1.0.0" />
<ConfigOverrides />
<Policies>
<ContainerHostPolicies CodePackageRef="Code">
<!-- See https://aka.ms/I7z0p9 for how to encrypt your repository password -->
<RepositoryCredentials AccountName="accenturecode" Password="XXXX" PasswordEncrypted="false" />
<PortBinding ContainerPort="80" EndpointRef="BackendContainerServiceTypeEndpoint" />
</ContainerHostPolicies>
</Policies>
</ServiceManifestImport>
你会发现这个image对应的service,都是StatelessService,即无状态服务。
到目前为此,此项目的配置就结束了。接下将它部署到Azure上的Service Fabric中。
部署到Service Fabric中
右击ServiceFabricDemo, 点击Publish, 点击创建一个新Cluster.
弹出如下窗口,下面有4个tab,特别要注意最后一个tab,这里暴露的端口只有80,83,80对应frontend,83对应backend.
等待几分钟之后,就会在azure上看到cluster已经创建好了。然后你在点击上面的pubish,这样你的两个镜像就部署上去了。直接访问83端口,如下图,因为这是asp.net web api,它和mvc集成了,所以我创建此后端应用程序的时候,它顺便把页面也写了,看下面第二张图,就是调用API的效果,这个链接可以在Azure cluster的界面上找到,端口需要你自己指定。
在Azure上,你的所有资源如下图,servicefabricdemo就是刚创建的cluster,第一行是你的虚拟机的集合。
Cluster的界面如下图这样。
cluster有一个explore界面,如下,你可以进行scale up or down.
更你的应用程序、重新打包镜像、推送到私有镜像仓库、部署到service fabric
写到这里,我们前端还没有具体的代码调用后端,这里我们修改前端代码去调用后端,这里只贴出app.component.ts的改动:
至于后端,在web.config中把如下代码加进去解决跨域的问题
<system.webServer>
<httpProtocol>
<!-- THESE HEADERS ARE IMPORTANT TO WORK WITH CORS -->
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Methods" value="POST, PUT, DELETE, GET, OPTIONS" />
<add name="Access-Control-Allow-Headers" value="content-Type, accept, origin, X-Requested-With, Authorization, name" />
<add name="Access-Control-Allow-Credentials" value="true" />
</customHeaders>
</httpProtocol>
</system.webServer>
重新将前后端代码打包镜像、推送到私有镜像仓库、部署到service fabric后,最终效果是这样的,其中这里面的值是调后端API获得的,如下图:
源码地址
木有
总结与讨论
只使用容器部署到service fabric,用起来相对简单,感觉微软把它封装的很好,但也带来了另一个困难,就是让你不太容易理解里面的原理,不像k8s直接深入浅出地告诉你原理。做这个Demo时,发现service fabric的文档非常少,主要是从官网上得来的。花了一整天时间做了个demo及写此篇文章,还有如下问题需要进一步探索。
- 使用window镜像打包出来的东东非常大,刚才创建的一个镜像就是13G, 可以使用Multi-stage builds in Docker来解决
- 可以考虑使用Azure DevOps来完成CI/CD
- 创建Cluster的时候,只开放了80,83端口,在哪里可以修改?
- 前端和后端通信是采用外部的域名来通信的,这样效率不高,如果有两个后端API,它们之间如何采用内部的IP通信?