目的
现在做项目大多采用前后端分离的方式，本文会建立一个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
更你的应用程序、重新打包镜像、推送到私有镜像仓库、部署到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获得的，如下图：
源码地址
NaN
总结与讨论
只使用容器部署到service fabric，用起来相对简单，感觉微软把它封装的很好，但也带来了另一个困难，就是让你不太容易理解里面的原理，不像k8s直接深入浅出地告诉你原理。做这个Demo时，发现service fabric的文档非常少，主要是从官网上得来的。花了一整天时间做了个demo及写此篇文章，还有如下问题需要进一步探索。
1、使用window镜像打包出来的东东非常大，刚才创建的一个镜像就是13G, 可以使用docker 分层镜像来解决
2、可以考虑使用Azure DevOps来完成CI/CD
3、创建Cluster的时候，只开放了80，83端口，在哪里可以修改？
