使用微信雲託管快速部署一個.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
這樣資料庫部分就配置注入成功了，然後就是呼叫資料庫查詢資料了，選一個 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 接入專案中來，大家敬請期待～
交流群