ServiceFabric系列之二: 在Windows上创建容器应用并部署到ServiceFabric中

系列链接

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通信？