使用微信雲托管快速部署一個.Net Core項目（一）

作者：多讀書

前幾天微信將小程序開發者工具內的雲托管升級為微信雲托管，新增了很多諸如 OpenApi、MySql 數據庫、流水線構建、web 控制台等能力。看文檔還是蠻激動的，對開發者來說確實是個好消息，因為之前的一些業務邏輯大都寫在雲函數或者部署在服務器里面，要管理好幾套。看了這次發布的微信雲托管有點動心要做一個遷移，微信雲托管相比其它模式來說還是很有優勢和前景的。關於微信雲托管和雲函數以及服務器、Kubernetes 的對比大家看這個鏈接就夠了：https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/basic/intro.html

這次先拿一個小 demo 練手。話不多說，出於好奇心，今天帶大家來體驗一把：

第一步：開通環境

首先登陸微信雲托管創建環境，微信雲托管的地址為：https://cloud.weixin.qq.com/

首先需要創建一個環境，創建環境分為系統創建和私人網絡，選擇私人網絡會羅列出該小程序對應的騰訊雲賬號之前創建過的環境，在這里我選擇了私人網絡里面和我目前小程序使用的相同環境。

這次咱們也看看 mysql，微信雲托管相比之前增加了 MySql 服務，開通也是非常方便。如下圖所示簡單幾步就可以開通成功了並且支持自動暫停：

開通之后是這樣滴，支持內外網訪問數據庫，並且提供自動暫停服務，閑置的時候就幫你暫停了。

由於項目中需要使用到“雲調用”獲取小程序碼的服務，所以這里安裝一下微信雲托管提供的OpenApi,這里一定要注意如果要使用“雲調用”服務，微信令牌權限設置這里一定是要把要使用的接口先添加到白名單的。

小tips:大家在使用 OpenApi 接口的時候測試開發中可以把公網域名訪問打開，線上環境啟動內網訪問就可以，這樣相對比較安全。因為你調用 OpenApi 的接口不再像之前需要換取 Access_Token 啦，公網暴露風險大。

第二步：新建服務

流水線發布

選擇流水線發布的話第一步需要新建流水線，選擇流水線發布的代碼中必須要包含 container.config.json 文件，關於寫法根據文檔自己定義即可：https://developers.weixin.qq.com/miniprogram/dev/wxcloudrun/src/basic/guide.html

GitHub 授權訪問之后並在倉庫中包含 container.config.json 文件，然后根據自己實際情況勾選其它配置以后這樣一條流水線就定義好了，當代碼推送觸發 main 分支的時候就會自動構建鏡像，構建好之后別忘了最后還要把最新版本部署發布，流水線不會自動幫你去將最新版本發布上去的。

版本發布

版本發布也是很方便的，定義好 Dockerfile 文件之后可以在騰訊雲個人倉庫構建配置那里配置從 GitHub 拉取或者本地構建好 docker 鏡像后推送到騰訊雲。我這里選擇的是微信雲托管代碼拉取：

在版本列表里面選擇新建版本，從代碼庫拉取，把我們寫好的程序拉取下來：

代碼拉取之后會在微信雲托管自動幫助我們構建鏡像，點擊查看日志就可以看到詳細的構建過程，又是熟悉的操作。

等版本構建完畢之后，之后就是發布，無論是選擇流水線發布還是版本發布，最后一步一定要選擇發布上線。

第三步：開發

這里我創建一個.Net Core 項目，選擇 WebApp 模版。

接下來編輯 Dockerfile 文件：

#See https://aka.ms/containerfastmode to understand how Visual Studio uses this Dockerfile to build your images for faster debugging.
​
FROM mcr.microsoft.com/dotnet/aspnet:3.1 AS base
​
WORKDIR /app
​
EXPOSE 80
​
FROM mcr.microsoft.com/dotnet/sdk:3.1 AS build
​
WORKDIR /src
​
COPY ["HtArtGoWebApp.csproj", "."]
​
RUN dotnet restore "./HtArtGoWebApp.csproj"
​
COPY . .
​
WORKDIR "/src/."
​
RUN dotnet build "HtArtGoWebApp.csproj" -c Release -o /app/build

FROM build AS publish
​
RUN dotnet publish "HtArtGoWebApp.csproj" -c Release -o /app/publish
​
FROM base AS final
​
WORKDIR /app
​
COPY --from=publish /app/publish .
​
ENTRYPOINT ["dotnet", "HtArtGoWebApp.dll"]

然后安裝數據庫驅動

​<ItemGroup>

<PackageReference Include="FreeSql" Version="2.5.200" />

<PackageReference Include="FreeSql.Provider.MySql" Version="2.5.200" />

</ItemGroup>

注入 FreeSql 以及定義實體,先定義實體，我在項目中新建了 Models 文件夾，實體都放在 Models 文件夾中,首先定義一個基礎類 BaseEntity.cs

public class BaseEntity where TKey : IEquatable
{
  [Column(IsPrimary = true, IsIdentity = true)]
  public TKey Id { get; set; }
  [Column(ServerTime = DateTimeKind.Utc, CanUpdate = false)]
  public DateTime CreateTime { get; set; }
  [Column(ServerTime = DateTimeKind.Utc)]
  public DateTime UpdateTime { get; set; }
  public string OperatorId { get; set; }
  public bool IsDelete { get; set; }
  public bool Status { get; set; }
​
}

之后定義一個用於測試的類 Exhibitions.cs 類，讓它繼承 BaseEntity，主鍵可以自定義類型：

public class Exhbitions:BaseEntity
{
  public string Title { get; set; }
}

接下來就是 FreeSql 的配置以及注入，在 Stratup.cs 文件里面進行注入：

public Startup(IConfiguration configuration)
{
​
  Configuration = configuration;
  //FreeSql配置
  fsql = new FreeSql.FreeSqlBuilder()
  //鏈接字符串
   .UseConnectionString(FreeSql.DataType.MySql,
    Configuration.GetConnectionString("MySql"))
      //自動同步實體打開
​ .UseAutoSyncStructure(true)
   //SQL日志也打開
   .UseMonitorCommand(cmd =>      Console.WriteLine(cmd.CommandText))
    .Build();
​
}
public IConfiguration Configuration { get; }
public IFreeSql fsql;

最后在 ConfigureServices 里面進行注入一下，注入方式為單例模式：services.AddSingleton (fsql)

這樣數據庫部分就配置注入成功了，然后就是調用數據庫查詢數據了，選一個 Index.cshtml 頁面進行數據查詢展示：

public class IndexModel : PageModel
{
​
  private readonly ILogger _logger;
  private IFreeSql _freeSql;
  //前端要展示的數據定義為屬性
  public IList ExhbitionListList { get; set; }
​
  public IndexModel(ILogger logger,IFreeSql freeSql)
  {
​
     _logger = logger;
​
    _freeSql = freeSql;
​
  }
​
  //頁面初始化的時候查詢數據
​
  public async Task OnGetAsync()
  {
    var data = await _freeSql.Select().ToListAsync();
    //賦值
   ExhbitionListList = data;
  }
}

在前端 Index.cshtml 用一個 table 展示:

<table style="margin-left: 30%">

<thead>

<tr>

<th>ID</th>

<th>名稱</th>

<th>創建日期</th>

</tr>

</thead>

<tbody>

@foreach (var item in this.Model.ExhbitionListList)

{

<tr>

<td>@item.Id</td>

<td>@item.Title</td>

<td>@item.CreateTime</td>

</tr>

}

</tbody>

</table>

以上是數據庫部分，接下來咱們使用微信雲托管的 OpenApi 進行調用,關於 OpenApi 的部分放在 RestService 文件夾里面的 OpenApiService 類中

這個文件夾里面我只寫了一個獲取小程序碼的接口用於測試，代碼如下：

public class OpenApiService
{
  private HttpClient _client;
  public OpenApiService(HttpClient client)
  {
​
    client.BaseAddress =new Uri("http://替換成大家自己的");
    _client = client;
  }
​
  public async Task GetgetUnlimited()
  {
   var body = new StringContent(JsonSerializer.Serialize(new
      {
        scene = "index",
      page = "pages/index/index"
   }),   Encoding.UTF8, "application/json");
​
    var response =   await _client.PostAsync("/wxa/getwxacodeunlimit", body);
​
   if (response.IsSuccessStatusCode)
​   {
​
      MemoryStream ms = new MemoryStream();
​
     await response.Content.CopyToAsync(ms);
​
    return ms;
​
    }
​   return null;
​
  }
​
}

然后在 ConfigureService 中注入一下:services.AddHttpClient ();

調用該服務我們寫一個 Controller 接口供前端調用,這里要在 Startup.cs 里面配置兩處：

配置好之后在控制器里面調用即可：

[ApiController]
[Route("api/[controller]")]
public class WxController : Controller
{
  private OpenApiService _openApiService;
  public WxController(OpenApiService openApiService)
  {
    _openApiService = openApiService;
  }
  [HttpGet]
  public async Task GetgetUnlimited()
  {
​
    var data = await _openApiService.GetgetUnlimited();
   return new FileContentResult(data.ToArray(), "image/jpeg");
  }
​
}

這里別忘了在微信雲托管將獲取小程序碼的接口添加白名單：

好啦，到這里代碼部分就結束了。先在本地調試一遍沒問題就發布啦：

獲取小程序碼正常

數據庫訪問正常

頁面看起來有點丑，用 Vue 和 ElementUI 優化一下首頁,在_Layout.cshtml中引入Vue 和 ElementUI的 相關庫，然后在前端 Index.cshtml.cs 中做如下修改:

public class IndexModel : PageModel
{
​
  private readonly ILogger _logger;
​
  private IFreeSql _freeSql;
​
  public IList ExhbitionListList { get; set; }
​
  public IndexModel(ILogger logger,IFreeSql freeSql)
  {
​
    _logger = logger;
​
   _freeSql = freeSql;
  }
​
  // public async Task OnGetAsync()
​
  // {
​
  //   var data = await        _freeSql.Select().ToListAsync();
​
  //   ExhbitionListList = data;
​
  // }
​
   public async Task OnGetList()
​
  {
​
   var data = await _freeSql.Select().ToListAsync();
​
    return new  JsonResult(data);
​
  }
​
}

Html 頁面中用 element 的 Table 組件優化一下：

<div id="app">

<el-table v-bind:data="list" border style="width: 100%">

<el-table-column fixed prop="id" label="id">

</el-table-column>

<el-table-column prop="title" label="標題">

</el-table-column>

<el-table-column prop="createTime" label="創建時間">

</el-table-column>

<el-table-column

fixed="right"

label="操作"

width="100">

<template slot-scope="scope">

<el-button v-on:click="handleClick(scope.row)" type="text" size="small">查看</el-button>

<el-button type="text" size="small">編輯</el-button>

</template>

</el-table-column>

</el-table>

</div>

@section Scripts

{

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

title:'主頁',

list:[]

},

async created(){

const list= await this.loadData();

this.list = list

},

methods:{

loadData(){

return new Promise(((resolve, reject) =>

$.ajax({

url:'?handler=List',

success:(res)=>{

resolve(res)

},fail:(err)=>{

reject(err)

}

})

))

},

handleClick(row) {

console.log(row);

}}

})

</script>
}

呈現出來的頁面如下所示，以后再把 CURD 相關操作添加上:

然后添加一個 API 管理工具 Swagger ,在這里為了演示添加一個最簡易配置的的 Swagger, 添加 Swagger 首先需要在 Nuget 上面安裝 Swagger 的包 Swashbuckle.AspNetCore。之后在 ConfigureServices 方法中注入services.AddSwaggerGen();，在 Configure 里面注冊 Swagger 中間件：app.UseSwagger();

app.UseSwaggerUI(c=>{c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");});

然后訪問 localhost:5000//swagger/index.html 即可

最后發布上線之后也一切正常，感覺未來可期，日志查詢也非常方便，這個必須贊：

總結

總結起來微信雲托管這個方向很好，很適合快速開發驗證業務模型，希望后期盡快支持環境共享、自定義域名等，后續還有第二篇將如何將 CMS 接入項目中來，大家敬請期待～

交流群