04.使用 github actions+docker 自動部署前後端分離項目 zhontai (.net core+vue)

来源:https://www.cnblogs.com/morang/archive/2023/08/28/zhontai_admin_core_book_04.html
-Advertisement-
Play Games

本文將分享使用 GitHub Actions 完成對一個.Net Core+Vue 的前後端分離項目 zhontai 的構建，並使用 docker 部署到雲伺服器(阿裡雲),及對docker部署.Net Core+Vue的一些經驗分享。 ...


前言

Github Actions是什麼？是 GitHub 提供的一種持續集成/持續部署（CI/CD）工作流程自動化服務,助力項目的自動化構建、測試和部署。
依托於平臺，本文將分享使用 GitHub Actions 完成對一個.Net Core+Vue 的前後端分離項目 zhontai 的構建，並使用 docker 部署到雲伺服器(阿裡雲)

使用說明

經過一番嘗試學習，個人感受是其功能齊全,文檔完善，使用 GitHub 托管倉庫完成自己的 CI/CD，不再需要自己搞構建服務了。
關於使用費用問題：每個用戶/組織都有免費的使用額度：2000 分鐘/月, 不同的項目歸類到不同的組織，完全足夠使用了。

本文環境

後端 asp.net core7.0 項目的部署

執行步驟及重點

  1. 新建 github actions 配置文件: .github\workflows\test-deploy.yml

    • 倉庫的 .github/workflows 目錄中定義將會被 github actions 識別
    • 測試可以用，生產則可以用 on: workflow_dispatch 指定手動構建

  2. 拉取分支

    • actions 庫：actions/checkout@v3

  3. 安裝 Dotnet7

    • actions 庫：actions/setup-dotnet@v3

  4. 執行打包生成 publish_output 目錄

    • dotnet publish ./src/hosts/ZhonTai.Host -c Release -o ./publish_output --self-contained true --runtime linux-x64 --framework net7.0

  5. 使用 ssh 部署到伺服器

    • actions 庫：easingthemes/[email protected]
    • 將 publish_output 複製到 docker 目錄，在將 docker 目錄，將其上傳到伺服器後執行腳本
    • ssh 連接後需要創建掛載目錄，一個資料庫的目錄，一個上傳目錄
    • 預設 ZhonTai.Host 的埠是 8000
    • 創建掛載目錄：mkdir /root/zhontai/volumns/upload -p
    • docker 運行:docker run --name my-zhontai-apihost -d -p 9902:8000 -e -v /root/zhontai/volumns/admindb.db:/app/admindb.db -v /root/zhontai/volumns/upload:/app/wwwroot/upload zhontai/apihost:latest

  6. ssh 使用需要配置的環境變數

    • ${{ secrets.SSH_PRIVATE_KEY }}：伺服器的 ssh 密鑰:~/.ssh/id_rsa 內容
    • ${{ secrets.REMOTE_HOST }}：伺服器 IP: xxx.xxx.xxx.xxx
    • ${{ secrets.REMOTE_USER }}：用戶名 root
    • ${{ secrets.REMOTE_TARGET }}：遠程目錄 /root/zhontai/api

  7. 配置需要的環境變數

    • 配置路徑：項目->Settings->Security->Secrets and variables->Actions->New repository secret
    • ssh 的生成參考ssh-deploy 配置部分
    • ssh-keygen -m PEM -t rsa -b 4096 生成 ssh，然後複製公鑰到 authorized_keys
    • 設置完最好是重啟下

  8. 構建完成

    • 記得開啟雲伺服器的防火牆埠：9902，即可在瀏覽器中訪問到前臺頁面

.github/workflows/test-deploy.yml

# test-deploy.yml
name: 後端測試環境直接部署
# 手動構建
#on: workflow_dispatch
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 拉取倉庫文件
      - name: 拉取master分支代碼
        uses: actions/checkout@v3
        with:
          # 預設當前分支
          ref: 'master'
      # action命令，安裝Dotnet7
      - name: 安裝 Dotnet7
        uses: actions/setup-dotnet@v3
        with:
          dotnet-version: 7.0.400
      # 執行打包命令
      - run: dotnet --version && dotnet publish ./src/hosts/ZhonTai.Host -c Release -o ./publish_output --self-contained true --runtime linux-x64 --framework net7.0
      # 將dist複製到docker目錄中
      - run: cp ./publish_output ./docker -rf
      # 使用 ssh 將api-dist文件拷貝到 linux
      - name: 使用ssh部署
        uses: easingthemes/[email protected]
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          ARGS: '-rlgoDzvc -i --delete'
          SOURCE: 'docker'
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          EXCLUDE: '/node_modules/'
          SCRIPT_BEFORE: |
            mkdir ${{ secrets.REMOTE_TARGET }} -p
          SCRIPT_AFTER: |
            cd ${{ secrets.REMOTE_TARGET }}
            cd docker
            docker build --rm -f ./Dockerfile -t zhontai/apihost:latest .
            # 檢查容器是否存在
            if docker container ls -a | grep -q "my-zhontai-apihost"; then
                echo "容器已存在"
                # 停止並移除容器
                docker stop my-zhontai-apihost
                docker rm my-zhontai-apihost
            fi
            # 容器掛載的路徑
            mkdir /root/zhontai/volumns/upload -p
            docker run --name my-zhontai-apihost -d -p 9902:8000  -e ASPNETCORE_ENVIRONMENT=Testing  -v /root/zhontai/volumns/admindb.db:/app/admindb.db -v /root/zhontai/volumns/upload:/app/wwwroot/upload zhontai/apihost:latest

docker/Dockerfile

  • 打包在 GitHub Actions 完成，生成了 publish_output,所以只需要運行時鏡像部署即可
  • 指定工作目錄為 /app
  • 指定監聽應用埠，Admin.Core 預設埠為 8000,啟動庫為 ZhonTai.Host
# 使用 ASP.NET Core 運行時鏡像作為最終鏡像
FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS runtime

WORKDIR /app

# 複製構建好的應用程式文件
COPY ./publish_output /app

# 設置運行時環境變數
ENV ASPNETCORE_URLS=http://+:8000

# 指定容器啟動時要執行的命令
ENTRYPOINT ["dotnet", "ZhonTai.Host.dll"]

前臺 vue 項目的部署

整個過程類似鏡像構建一樣，一步步設置自己需要的環境，然後執行命令或者設置對應的操作，可以在使用前過一遍中文文檔有個大概的瞭解，本文就跳過基礎介紹直接說實現方式及重點

執行的步驟及重點

  1. 新建 github actions 配置文件: .github\workflows\test-deploy.yml

    • 倉庫的 .github/workflows 目錄中定義將會被 github actions 識別
    • 測試可以用，生產則可以用 on: workflow_dispatch 指定手動構建

  2. 拉取分支

    • actions 庫：actions/checkout@v3

  3. 安裝 node v18.17.1

    • actions 庫：actions/setup-node@v3

  4. 執行打包生成 dist 目錄

    • npm install && npm run build
    • 預設打包使用的 production 環境的配置，如需打包其他環境則可以使用npm run build --mode testing 指定環境 testing，並使用 .env.testing 環境變數文件
    • 使用echo -e "\nVITE_API_URL=${{ secrets.API_HOST }}" >> .env.production 將配置中的 API_HOST 寫入環境變數中

  5. 使用 ssh 部署到伺服器

    • actions 庫：easingthemes/[email protected]
    • 將 dist 複製到 docker 目錄，在將 docker 目錄，將其上傳到伺服器後執行腳本

  6. ssh 使用需要配置的環境變數

    • ${{ secrets.SSH_PRIVATE_KEY }}：伺服器的 ssh 密鑰
    • ${{ secrets.REMOTE_HOST }}：伺服器 IP
    • ${{ secrets.REMOTE_USER }}：用戶名
    • ${{ secrets.REMOTE_TARGET }}：遠程目錄
    • ${{ secrets.API_HOST }}: 介面地址，配置後寫入VITE_API_URL=xxx.com

  7. 配置需要的環境變數

    • 配置路徑：項目->Settings->Security->Secrets and variables->Actions->New repository secret
    • ssh 的生成參考ssh-deploy 配置部分
    • ssh-keygen -m PEM -t rsa -b 4096 生成 ssh，然後複製公鑰到 authorized_keys

  8. 構建完成

    • 記得開啟雲伺服器的防火牆埠：9901，即可在瀏覽器中訪問到前臺頁面

.github/workflows/test-deploy.yml

  • 完整的部署配置
# test-deploy.yml
name: 前端直接部署
# 手動構建
# on: workflow_dispatch
# 自動構建
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 拉取倉庫文件
      - name: 拉取master分支代碼
        uses: actions/checkout@v3
        with:
          # 預設當前分支
          ref: 'master'
      # action命令，安裝Node v18.17.1
      - name: 安裝 node
        uses: actions/setup-node@v3
        with:
          node-version: 18.17.1
          cache: 'npm'
      # 執行打包命令
      - run: |
          if [ -n "${{ secrets.API_HOST }}" ]; then
            # 使用設置中的介面地址
            echo -e "\nVITE_API_URL=${{ secrets.API_HOST }}" >> .env.production
          fi
      - run: node -v && npm -v && npm install && npm run build
      # 將dist複製到docker目錄中
      - run: cp ./dist ./docker -rf
      # 使用 ssh 將dist文件拷貝到 linux
      - name: 使用ssh部署到伺服器
        uses: easingthemes/[email protected]
        with:
          SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
          ARGS: '-rlgoDzvc -i --delete'
          SOURCE: 'docker'
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: ${{ secrets.REMOTE_USER }}
          TARGET: ${{ secrets.REMOTE_TARGET }}
          EXCLUDE: '/node_modules/'
          SCRIPT_BEFORE: |
            mkdir ${{ secrets.REMOTE_TARGET }} -p
          SCRIPT_AFTER: |
            cd ${{ secrets.REMOTE_TARGET }}
            cd docker
            docker build --rm -f ./Dockerfile -t zhontai/adminui:latest .
            # 檢查容器是否存在
            if docker container ls -a | grep -q "my-zhontai-adminui"; then
                echo "容器已存在,停止並移除容器"
                docker stop my-zhontai-adminui
                docker rm my-zhontai-adminui
            fi
            docker run --name my-zhontai-adminui -d -p 9901:80 zhontai/adminui:latest

docker/Dockerfile

  • 使用 nginx 1.18 鏡像，添加前端頁面及 nginx 配置
  • 對應使用腳本：docker build --rm -f ./Dockerfile -t zhontai/adminui:latest .
FROM nginx:1.18
EXPOSE 80
COPY ./dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

docker/nginx.conf

  • nginx v1.18 的配置,外層沒有 http 節點了
  • 並且會覆蓋預設的 default.conf 才行
server {
    listen       80;
    server_name  localhost;
    charset utf-8;
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

一些碎碎念

  1. 本文的做法適用於測試，如果要構建生產，還需要更加嚴謹，比如需要手動執行，而不是自動構建，以及可以將打包和部署分開，生成構建物體，快速回滾部署
  2. 本文為了演示遠程 docker，所以每次都是構建了 docker，其實也可以直接上傳到伺服器目錄，不需要重啟 docker
  3. 文章大部分都是用命令完成，方便遷移到其他構建工具，後續也可以直接在Github使用。

不完全踩坑記錄

  • ssh部署：看了好久才看明白，一開始生成了沒有複製到authorized_keys，然後生成了密鑰沒重啟就是連接不上
  • docker nginx：nginx.conf掛載的地址不對，之前的舊版本是在/etc/nginx/nginx.conf,新的在/etc/nginx/conf.d/default.conf
  • nginx.conf的格式新版去掉了http節點，直接配置server節點就行，配置文件沒對，導致誤以為是我history模式nginx寫法不對
  • 覆蓋.env.production中介面地址的配置，想要換行加一句，試了好多次才行：echo -e "\nVITE_API_URL=xxx" >> .env.production
  • api項目掛載的位置搞錯了幾次：資料庫和文件上傳的地址分別是：/app/admindb.db,/app/wwwroot/upload
  • api項目掛載文件需要先行創建目錄，啟動後將會生成資料庫
  • api項目的埠預設8000

時間過得太快了，周末兩天第一次沉下心研究了一天Github Actions,各種嘗試踩坑，第二天將過程整理分享出來，寫完這句，發現眨眼間就周一了。
似乎學習，能讓我在迷茫中找到些許方向吧。

By 易墨 轉載請註明出處

相關資料

項目說明

如果對部署的項目感興趣可以參考前兩篇文章

Github Actions 相關地址

本文使用到的 action 庫

作者：易墨
Github：yimogit
純靜態工具站點：metools
說明：歡迎拍磚,不足之處還望園友們指出;
迷茫大概是因為想的太多做的太少。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 【pandas小技巧】--花哨的DataFrame
    最近github上發現了一個庫（`plottable`），可以用簡單的方式就設置出花哨的 `DataFrame` 樣式。 github上的地址：[https://github.com/znstrider/plottable](https://github.com/znstrider/plottabl ...
  • Kafka為什麼這麼快？
    Kafka 是一個基於發佈-訂閱模式的消息系統，它可以在多個生產者和消費者之間傳遞大量的數據。Kafka 的一個顯著特點是它的高吞吐率，即每秒可以處理百萬級別的消息。那麼 Kafka 是如何實現這樣高得性能呢？本文將從七個方面來分析 Kafka 的速度優勢。 - 零拷貝技術 - 僅可追加日誌結構 - ...
  • gRPC with JWT
    在 gRPC 中使用 JWT（JSON Web Tokens）進行身份驗證是一種常見的做法，它可以幫助你確保請求方的身份和許可權。下麵是一種使用 gRPC 和 JWT 進行身份驗證的步驟： 1. **生成和簽發 JWT：** 在用戶登錄成功後，你需要生成一個 JWT 並將其簽發給用戶。JWT 中可以包 ...
  • github.com/json-iterator/go 詳細教程
    最近接觸到了 [github.com/json-iterator/go](https://github.com/json-iterator/go) , 是由滴滴開源的第三方json編碼庫，它同時提供Go和Java兩個版本。 > 文中大量內容來自 github 上的 wiki 文檔，有興趣的朋友可以直 ...
  • UVA908[Re-connecting Computer Sites]題解
    [原題](https://www.luogu.com.cn/problem/UVA908) ## 1.題意分析 題意就是給你很多組數，對於每組數，有三組小數據。第一組小數據先輸入一個n表示頂點數，然後再輸入n-1條邊表示初始邊數。其它組小數據先輸入一個數k，表示增加的邊的數量，然後再輸入k條邊，表示 ...
  • 微服務網關 —— SpringCloud Netflix Zuul
    ## 概述 Spring Cloud Zuul 是 Spring Cloud Netflix 子項目的核心組件之一，可以作為微服務架構中的 API 網關使用，有以下用途： - 鑒權：對於訪問每個服務的請求進行鑒權，拒絕鑒權失敗的請求 - 監控：對系統的請求進行監控，記錄請求響應日誌，實時統計當前系統 ...
  • RocketMQ 入門實戰(1)--簡介
    RocketMQ 是一個純 Java、分散式、隊列模型的開源消息中間件；前身是 MetaQ，是阿裡參考 Kafka 研發的一個隊列模型的消息中間件，後開源給 Apache 基金會併成為 Apache 的頂級項目，具有高性能、高可靠、高實時、分散式的特點。 1、基本概念 1.1、主題（Topic） A ...
  • Python 潮流周刊#17：Excel 終於支持 Python 了、Meta 重磅開源新項目、Mojo 新得 1 億美元融資
    ### 歡迎訪問我的GitHub > 這裡分類和彙總了欣宸的全部原創(含配套源碼)：[https://github.com/zq2599/blog_demos](https://github.com/zq2599/blog_demos) ### 關於IDEA的預覽版 - IDEA會啟用新的UI，這事 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類