The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何用 Angular CLI 與 .NET CLI 快速建立 Monorepo 專案

我們漸漸在不同專案中嘗試 Monorepo 架構,讓前後端分離的專案中可以共用同一個 Repo 來進行專案開發與管理。今天這篇文章我就簡單分享如何利用 Angular CLI 與 .NET CLI 來快速打造一個 Monorepo 的專案。

taiwan-skyline-beautiful-cityscape-sunset

專案架構說明

我們的專案架構大概是這樣的:

  1. 一個前台(Angular)、一個後台(API)
  2. 前台有自己的前端與後端專案
  3. 後台有自己的前端與後端專案

簡單來說,我們有四個專案,希望擺在同一個 Repo 底下。不過,我們此案只有規劃兩位開發者,一位負責做後端開發,一位負責做前端開發,所以我規劃第一層資料夾直接用「開發人員角色」來命名,其 PowerShell 命令如下:

# 建立專案資料夾
mkdir G:\MYPROJ

# 進入專案資料夾
cd G:\MYPROJ

# 建立專案所需的 README.md 說明檔
echo '# MYPROJ' | Out-File -Encoding utf8 README.md

# 建立前後台所需目錄
mkdir backend
mkdir frontend

其目錄架構如下:

G:\MYPROJ
│   README.md
├───backend
└───frontend

先建立初始化版本控管:

git init
git add .
git commit -m "Initial commit"

後端架構建立

首先,我們先建立後端架構,目前我們規劃會有 1 個「方案」且有 3 個「專案」,而透過 .NET CLI 建立專案的順序如下:

# 進入 backend 資料夾
cd backend

# 建立 MYPROJ.API 方案檔 (MYPROJ.API.sln)
dotnet new sln -n MYPROJ.API

# 建立一個類別庫專案
dotnet new classlib -n MYPROJ.Data
dotnet sln MYPROJ.API.sln add .\MYPROJ.Data\MYPROJ.Data.csproj

# 建立前台的 ASP.NET Core Web API 專案
dotnet new webapi -n MYPROJ.API
dotnet sln MYPROJ.API.sln add .\MYPROJ.API\MYPROJ.API.csproj

# 建立後台的 ASP.NET Core Web API 專案
dotnet new webapi -n MYPROJ.API.Backend
dotnet sln MYPROJ.API.sln add .\MYPROJ.API.Backend\MYPROJ.API.Backend.csproj

# 建立 .gitignore 檔案 (預設用 VisualStudio 範本)
dotnet new gitignore

# 回到根目錄
cd ..

最終的目錄結構如下:

G:\MYPROJ\BACKEND
│   .gitignore
│   MYPROJ.API.sln
│
├───MYPROJ.API
│   │   appsettings.Development.json
│   │   appsettings.json
│   │   Program.cs
│   │   MYPROJ.API.csproj
│   │   WeatherForecast.cs
│   │
│   ├───Controllers
│   │       WeatherForecastController.cs
│   │
│   └───Properties
│           launchSettings.json
│
├───MYPROJ.API.Backend
│   │   appsettings.Development.json
│   │   appsettings.json
│   │   Program.cs
│   │   MYPROJ.API.Backend.csproj
│   │   WeatherForecast.cs
│   │
│   ├───Controllers
│   │       WeatherForecastController.cs
│   │
│   └───Properties
│           launchSettings.json
│
└───MYPROJ.Data
    │   Class1.cs
    │   MYPROJ.Data.csproj

建立後端版控:

git add .
git commit -m "Initial commit for backend"

前端架構建立

接著,我們來建立前端架構,目前我們規劃會有 2 個 Angular 應用程式,一個是後台用,一個是前台用,使用 Angular CLI 建立專案的順序如下:

# 建立 workspace 資料夾但不建立應用程式
ng new frontend --create-application=false --skip-git

# 進入 frontend 資料夾
cd frontend

# 建立前台的 Angular 應用程式
ng g application myproj-front --routing --skip-tests --style=css

# 建立後台的 Angular 應用程式
ng g application myproj-back --routing --skip-tests --style=css

# 回到根目錄
cd ..

最終的目錄結構如下:

G:\MYPROJ\FRONTEND
│   .editorconfig
│   .gitignore
│   angular.json
│   package-lock.json
│   package.json
│   README.md
│   tsconfig.json
│
├───.vscode
│       extensions.json
│       launch.json
│       tasks.json
│
└───projects
    ├───myproj-back
    │   │   tsconfig.app.json
    │   │   tsconfig.spec.json
    │   │
    │   └───src
    │       │   favicon.ico
    │       │   index.html
    │       │   main.ts
    │       │   styles.css
    │       │
    │       ├───app
    │       │       app-routing.module.ts
    │       │       app.component.css
    │       │       app.component.html
    │       │       app.component.ts
    │       │       app.module.ts
    │       │
    │       └───assets
    │               .gitkeep
    │
    └───myproj-front
        │   tsconfig.app.json
        │   tsconfig.spec.json
        │
        └───src
            │   favicon.ico
            │   index.html
            │   main.ts
            │   styles.css
            │
            ├───app
            │       app-routing.module.ts
            │       app.component.css
            │       app.component.html
            │       app.component.ts
            │       app.module.ts
            │
            └───assets
                    .gitkeep

建立前端版控:

git add .
git commit -m "Initial commit for frontend"

總結

這篇文章主要介紹如何透過 CLI 工具快速的建立一個 Monorepo 專案架構,然而真實的專案還是要陸續微調到「實用」的狀態,以下我補充說明幾個可以調整的地方。

  • 後端架構微調

    • 將用不到的預設檔案移除

      例如: WeatherForecast.cs, WeatherForecastController.cs, Class1.cs, ... 等等。

    • 微調 Properties/launchSettings.json 的設定

      相關文章: 認識 ASP.NET Core 7.0 的啟動設定檔 (Launch Profile)

    • 新增 SSDL 的 Database Project 對資料庫進行版控

  • 前端架構微調

    • 調整 .vscode/extensions.json 內容,將常用的擴充套件加入

      建議調整如下,唯一真心推薦安裝 Angular Extension Pack 擴充套件包:

      {
        // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
        "recommendations": [
          "doggy8088.angular-extension-pack",
          "esbenp.prettier-vscode"
        ]
      }
      
    • angular.json 定義 proxy.conf.json 的路徑,設定前端的 Proxy 到後端 API

      相關文章: 如何在 Angular CLI 建立 proxy.config.json 轉發呼叫遠端 RESTful APIs

    • 多採用 獨立元件 架構來開發

      # 進入前台的前端 Angular 應用程式,直接進入應用程式的 src/app 目錄
      cd frontend/projects/myproj-front/src/app
      
      # 在該應用程式建立一個 NewsList 獨立元件頁面
      ng generate component NewsList --standalone
      
  • 部署環境整合 (CI/CD)

    • 後端部署指定目標路徑與 IIS 所需的 web.config 檔案

      相關文章: 如何透過 dotnet publish 調整 ASP․NET Core 部署到 IIS 的 Web.config 內容

      dotnet publish -c Release -p:IsTransformWebConfigDisabled=false -p:EnvironmentName=Production -o G:\MYPROJ.API
      
    • 前端部署時設定與後端相符合的目標路徑

      直接將 Angular 建置結果輸出到 ASP.NET Core 的 wwwroot 目錄下

      ng build myproj-front --configuration=production --output-path=G:\MYPROJ.API\wwwroot
      

相關連結

留言評論