使用微信雲託管快速部署一個.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 接入項目中來，大家敬請期待～

交流羣