首页 > 其他分享 >[MDP.NetCore] 使用Azure Portal,開發一個從GitHub持續佈署到Azure Container Apps的Web站台

[MDP.NetCore] 使用Azure Portal,開發一個從GitHub持續佈署到Azure Container Apps的Web站台

时间:2023-11-25 13:22:40浏览次数:44  
标签:Web GitHub zone -- app 頁面 sleep Azure

使用Azure Portal,開發一個從GitHub持續佈署到Azure Container Apps的Web站台

程式碼簽入GitHub之後,啟動GitHub Action流程,編譯並部署程式到Azure Container Apps,是開發系統時常見的功能需求。本篇範例協助開發人員使用GitHub與Azure Portal,逐步完成必要的設計和實作。

操作步驟

1.註冊並登入Azure Portal。於首頁左上角的選單裡,點擊資源群組後,進入資源群組頁面。於資源群組頁面,點擊建立按鈕,依照頁面提示建立一個ResourceGroup,並命名為sleep-zone-group。

01.建立ResourceGroup01.png

01.建立ResourceGroup02.png

01.建立ResourceGroup03.png

2.建立完畢後,於ResourceGroup頁面的屬性頁籤,取得「資源識別碼」。

01.建立ResourceGroup04.png

01.建立ResourceGroup05.png

3.回到Azure Portal。於右上角的選單裡,點擊Cloud Shell按鈕後,開啟Cloud Shell視窗。於Cloud Shell視窗,切換至Bash並執行下列指令,用來取得部署使用的「服務主體憑證」。該指令會建立名為sleep-zone-app-contributor的應用程式註冊,並授權它為sleep-zone-group資源群組的參與者(Contributor)角色。

az ad sp create-for-rbac \
    --name "sleep-zone-app-contributor" \
    --role "Contributor" \
    --scopes xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx \
    --sdk-auth
    
- 服務主體名稱:--name "sleep-zone-app-contributor",可自訂,限制使用英文小寫與「-」。
- 服務主體授權角色:--role "Contributor"。
- 服務主體授權範圍:--scopes xxxxxxxxxxxxxxx。(xxxxx填入先前取得的資源識別碼)

02.建立Application01.png

02.建立Application02.png

4.回到Azure Portal。於首頁左上角的選單裡,點擊容器登錄後,進入容器登錄頁面。於容器登錄頁面,點擊建立按鈕,依照頁面提示建立一個ContainerRegistry,並命名為sleepzone。

03.建立ContainerRegistry01.png

03.建立ContainerRegistry02.png

03.建立ContainerRegistry03.png

5.建立完畢後,於ContainerRegistry頁面的存取金鑰頁籤,開啟「管理使用者」功能。

03.建立ContainerRegistry04.png

03.建立ContainerRegistry05.png

6.回到Azure Portal。於右上角的選單裡,點擊Cloud Shell按鈕後,開啟Cloud Shell視窗。於Cloud Shell視窗,切換至Bash並執行下列指令,用來佈署QuickStart映像檔到ContainerRegistry給後續流程使用。

az acr import \
    --name sleepzone \
    --source mcr.microsoft.com/k8se/quickstart:latest \
    --image sleep-zone-app:latest
    
- 容器登錄名稱:--name sleepzone。(sleepzone為先前建立的容器登錄名稱)
- 來源映像名稱:--source mcr.microsoft.com/k8se/quickstart:latest,固定值。(微軟官方的QuickStart映像檔)
- 目的映像名稱:--image sleep-zone-app:latest,可自訂,格式為image-name:tag-name。(sleep-zone-app為容器應用名稱)

03.建立ContainerRegistry06.png

7.回到Azure Portal。於首頁左上角的選單裡,點擊容器應用程式後,進入容器應用程式頁面。於容器應用程式頁面,點擊建立按鈕,依照頁面提示建立一個ContainerApp,命名為sleep-zone-app、並於容器頁簽設定使用先前建立的容器登錄、於輸入頁簽設定啟用輸入。

04.建立ContainerApp01.png

04.建立ContainerApp02.png

04.建立ContainerApp03.png

04.建立ContainerApp04.png

04.建立ContainerApp05.png

8.註冊並登入GitHub Dashboard。點擊首頁左上角的New按鈕,依照頁面提示建立一個Repository,並命名為SleepZone。

05.建立Repository01.png

05.建立Repository02.png

9.建立完畢後,於Repository頁面,點擊右上角的Setting按鈕進入Setting頁面,並選擇左側選單裡Secrets and variables的Action頁籤。於Action頁籤,點選New repository secret按鈕,依照頁面提示建立一個名為AZURE_CREDENTIALS的Actions Secret,Secret內容則是填入先前取得的「服務主體憑證」。

05.建立Repository03.png

05.建立Repository04.png

05.建立Repository05.png

10.Clone SleepZone Repository到本機Repository資料夾,於本機Repository資料夾裡建立src資料夾。開啟命令提示字元進入src資料夾,輸入下列指令,用以安裝MDP.WebApp範本、並且建立一個名為WebApplication1的Web站台。

// 建立Web站台
dotnet new install MDP.WebApp
dotnet new MDP.WebApp -n WebApplication1

06.建立WebApplication01.png

06.建立WebApplication02.png

11.於本機Repository資料夾裡,進入src/WebApplication1資料夾,並加入Dockerfile。

FROM mcr.microsoft.com/dotnet/aspnet:6.0 AS base
WORKDIR /app
EXPOSE 80
EXPOSE 443

FROM mcr.microsoft.com/dotnet/sdk:7.0 AS build
WORKDIR /repo
COPY . .
RUN dotnet publish "src/WebApplication1/WebApplication1.csproj" -c Release -o /app/publish /p:UseAppHost=false

FROM base AS final
WORKDIR /app
COPY --from=build /app/publish .
ENTRYPOINT ["dotnet", "WebApplication1.dll"]

06.建立WebApplication03.png

12.於本機Repository資料夾裡,建立.github\workflows資料夾,並加入azure-build-deployment.yml。

// azure-build-deployment.yml

name: azure-build-deployment

on:
  push:
    branches:
      - main

env:
  RESOURCE_GROUP_NAME: sleep-zone-group
  CONTAINER_APPS_NAME: sleep-zone-app 
  CONTAINER_REGISTRY_NAME: sleepzone
  DOCKER_FILE_PATH: ./src/WebApplication1/Dockerfile

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:  

      - name: Login Azure CLI
        uses: azure/login@v1
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Checkout GitHub Repository  
        uses: actions/checkout@v4
      
      - name: Deploy ContainerRegistry
        uses: azure/CLI@v1
        with:
          inlineScript: >-
            az acr build
            --registry ${{ env.CONTAINER_REGISTRY_NAME }} 
            --file ${{ env.DOCKER_FILE_PATH }} 
            --image ${{ env.CONTAINER_APPS_NAME }}:${{ github.sha }} .

      - name: Deploy ContainerApp
        uses: azure/CLI@v1
        with:
          inlineScript: >-
            az containerapp update
            --name ${{ env.CONTAINER_APPS_NAME }}
            --resource-group ${{ env.RESOURCE_GROUP_NAME }}
            --image ${{ env.CONTAINER_REGISTRY_NAME }}.azurecr.io/${{ env.CONTAINER_APPS_NAME }}:${{ github.sha }}
			
- Git分支名稱:main,要特別注意Repository裡的分支是 master or main。
- 資源群組名稱:RESOURCE_GROUP_NAME: sleep-zone-group,可自訂,限制使用英文小寫與「-」。
- 容器應用名稱:CONTAINER_APPS_NAME: sleep-zone-app,可自訂,限制使用英文小寫與「-」。
- 容器登錄名稱:CONTAINER_REGISTRY_NAME: sleepzone,可自訂,限制使用英文小寫。
- Dockerfile路徑:DOCKER_FILE_PATH: ./src/WebApplication1/Dockerfile,路徑區分大小寫,相對於Repository資料夾。

06.建立WebApplication04.png

13.簽入並推送本機Repository的變更,到遠端GitHub主機之後。回到GitHub Dashboard,進入SleepZone Repository頁面。可以於Actions頁籤裡,可以看到GitHub Action流程已經觸發執行並成功完成部署。(需時約兩分鐘)

07.執行結果01.png

14.回到Azure Portal。於首頁左上角的選單裡,點擊容器應用程式後,進入容器應用程式頁面。於ContainerApp頁面的概觀頁籤,點擊「應用程式 URL」鏈結,在開啟的Browser視窗內,可以看到由WebApplication1程式碼所提供的Hello World。

07.執行結果02.png

07.執行結果03.png

07.執行結果04.png

15.完成上述步驟之後,每次推送程式碼到GitHub,都會啟動GitHub Action流程,編譯並部署程式到Azure Container Apps。

07.執行結果05.png

标签:Web,GitHub,zone,--,app,頁面,sleep,Azure
From: https://www.cnblogs.com/clark159/p/17855409.html

相关文章

  • WEB端常见的bug
    页面布局方面1、页面一行内容超长展示错乱需要根据长度的边界值设计用例,一般有超长的验证,预期一般是折行显示或者省略显示。2、更换设备布局错乱可能出现在兼容问题,需要考虑各种设备(win、mac)、浏览器版本内核。页面元素方面1、输入域提示信息不明确输入框没有......
  • webpack原理实战笔记
    我是歌谣想加入前端技术群私信我最近开始webpack原理的书写目录结构核心依赖{"name":"mywebpack","version":"1.0.0","description":"","main":"index.js","scripts":{"test"......
  • JavaWeb实现文件上传和下载
    环境配置:导入依赖jar包。commons-fileupload-1.4.jarcommons-io-2.6.jar上传表单的enctype属性enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。语法<formenctype="value">1属性值值 描述application/x-www-form-urlencoded 在发送前编码所有字符(默认)multi......
  • Java Web 实现文件上传和下载接口功能
    1.上传java代码实现@ResponseBody@PostMapping("/upload")publicResponseVoupload(@RequestParam(value="file",required=false)MultipartFilemultipartFile){Filefile=newFile("上传到服务器的文件地址");try{......
  • 【开源】基于JavaWeb的快乐贩卖馆管理系统 毕业设计
    一、摘要1.1项目介绍基于JAVA+Vue+SpringBoot+MySQL的快乐贩卖馆管理系统,包含了视频模块、视频收藏模块、视频打分模块、视频交友模块、视频购物车模块和视频订单模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础......
  • 【开源】基于JavaWeb的智慧家政系统 毕业设计
    一、摘要1.1项目介绍基于微信小程序+JAVA+Vue+SpringBoot+MySQL的智慧家政系统,包含了地址管理模、订单管理、家政分类管理、家政服务管理、用户反馈管理模块,还包含系统自带的用户管理、部门管理、角色管理、菜单管理、日志管理、数据字典管理、文件管理、图表展示等基础模块,基于微......
  • 两巨头Facebook 和 GitHub 联手推出 Atom-IDE
    9月13日,GitHub宣布与Facebook合作推出了Atom-IDE——它包括一系列将类IDE功能带到Atom的可选工具包。初次发布的版本包括更智能、感知上下文的自动完成;导航功能,如大纲视图和定义跳转(outlineviewandgoto-definition),以及其他有用的功能;还包括错误、警告提醒和格式化......
  • Web API(一些记录)
    WebAPI(一些记录)1.注意当使用间隔函数的时候做轮播图,点点的效果,删除需要放在间隔函数内,不能在函数外面声明,在外面的话删的点就固定了,放里面就是每执行一次就再选择一次2.i--在事件点击函数里面也是立马执行吗,不是先把函数里面的其他东西执行完,再执行i--吗?答:是的因为i--它是独......
  • 一些方便的webassembly 工具
    WebAssembly团队提供了一些方便的webassembly工具集包含的工具集wat2wasm 将WebAssembly文本格式(.wat)转换为WebAssembly二进制格式(.wasm)wasm2wat 是wat2wasm的反向工具,将二进制格式转换回文本格式(.wat)wasm-objdump 类似于传统的objdump工具,它打印有关WebAssembly二进制......
  • 用于webdav图床对比PicGo、PicList、lsky
    用于webdav图床对比PicGo、PicList、lsky需求场景:本人有自建WebDAV,非坚果云,有可访问的公网域名(内网穿透出来的),需要一个图床可以沟通Window、安卓、ios经过多方比对,结论如下:PicGo不支持WebDAV,但是我发现了一个二开项目PicListPicList支持WebDAV,但是没有网页端,无法沟通三端lsk......