乐趣区

关于云托管:使用微信云托管快速部署一个Net-Core项目一

jiezi

前几天微信将小程序开发者工具内的云托管降级为微信云托管，新增了很多诸如 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<IFreeSql>(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<OpenApiService>();

调用该服务咱们写一个 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 接入我的项目中来，大家敬请期待～

立刻体验

请应用 PC 端浏览器拜访以下地址：https://cloud.weixin.qq.com/ 即可开始体验并享有首月收费额度。

交换群

退出移动版