https://github.com/kazenetu/blazorssr-practice

blazor blazor-server csharp
Last synced: 2 months ago
JSON representation
Host: GitHub
URL: https://github.com/kazenetu/blazorssr-practice
Owner: kazenetu
License: mit
Created: 2024-10-20T08:34:43.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2025-02-02T13:32:35.000Z (over 1 year ago)
Last Synced: 2025-02-02T14:28:15.537Z (over 1 year ago)
Topics: blazor, blazor-server, csharp
Language: C#
Homepage:
Size: 22 MB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

          # BlazorSSR-Practice

Blazor静的サーバーレンダリング (SSR) の実装確認

## 実行環境

* .NET8 SDK

## デバッグ時のID/パスワード

* aa/aa

* Docoker利用時

   * admin/admin

## ライセンス

* [MITライセンス](LICENSE)  

* 使用パッケージは[THIRD-PARTY-NOTICES.txt](THIRD-PARTY-NOTICES.txt)を参照

## 実行方法

* ```dotnet run --project WebApp/WebApp.csproj```

* ワンタイムキー有効

  * 実行時にパラメータ指定  

    ```dotnet run --project WebApp/WebApp.csproj -- -p Settings:RequiredAuthentication=true```

  * appsettings.json設定  

    ```json

    {

        "Settings": {

            "RequiredAuthentication": "true"

        }

    }

    ```

## 注意

* レイアウト崩れが発生した場合は```dotnet clean```を試すこと

## フォルダ構成

```

Root

├─ExampleFiles      // ファイルアップロードサンプル用アップロードファイル

├─PdfReport         // PDFSharpを利用したPDF出力

│ ├─DataLists      // PDF出力用データリスト

│ ├─Interfaces     // PDF用インターフェイス

│ ├─Layouts        // PDF出力用レイアウト(C#ソースコードでのPDF定義)

│ └─assets         // フォントファイルを格納する

├─Tools

│ └─Create         // スケルトンコード生成ツール

│    └─Templates   // モード別のソースコード自動生成用テンプレート

├─WebApp

└─WebApp.sln

　 ├─Components    // ページやパーツ、ナビゲーションを格納

　 │ ├─Layout

　 │ ├─Pages

　 │ ├─Parts        // ページングなどのパーツを格納

　 │ └─Providers    // SessionStorageなどを管理するクラスを格納

　 ├─Components    // ページやパーツ、ナビゲーションを格納

　 ├─DI             // DI設定

　 ├─DBAccess       // DBアクセスクラス

　 ├─Extentions     // 拡張関数を格納

　 ├─Models         // Repositoryとページで利用するModelクラス

　 ├─Repositories   // 「SQL発行とModelクラスを返す」メソッド群

　 ├─Interfaces     // DI設定用インターフェイス

　 └─assets         // SQLiteファイルを格納する(デバッグ時に利用)

```

## ログ出力

NLogを利用している。  

* ```@inject ILogger<クラス名> Logger```  

  例:@inject ILogger<**Login**> Logger

* 通常ログ：Logger.LogInformation(**await GetLogMessage("開始")**);

* 例外ログ：Logger.LogError(await GetLogError(ex));

例：ログイン処理

```

/// 

/// ログイン

/// 

/// 

private async void SubmitLogin(EditContext editContext)

{

    try

    {

        Logger.LogInformation(await GetLogMessage("開始"));

        // エラーメッセージクリア

        errorMessages.Clear();

        // 未入力チェック

        var loginModel = editContext.Model as LoginModel;

        if (loginModel?.ID is null)

        {

            // エラーメッセージ

            errorMessages.Add("IDを入力してください。");

        }

        if (loginModel?.Password is null)

        {

            // エラーメッセージ

            errorMessages.Add("パスワードを入力してください。");

        }

        if (errorMessages.Any()) return;

        Logger.LogInformation(await GetLogMessage($"ログインチェック前 ログインID:{loginModel!.ID}"));

        if (!EqalsPassword(loginModel!))

        {

            errorMessages.Add("IDまたはパスワードが間違っています。");

        }

        if (errorMessages.Any()) return;

        // ログイン成功

        var userModel = userRepository.GetUser(loginModel!.ID!);

        await SetAsync(UserModel.SessionFullName, userModel!.Fullname);

        await SetAsync(UserModel.SessionLoggedIn, true);

        await SetAsync(UserModel.SessionAdminRole, userModel!.AdminRole);

        await SetAsync(UserModel.SessionUser, userModel.Serialize());

        Logger.LogInformation(await GetLogMessage($"ログイン成功"));

        // 画面遷移

        Navigation.NavigateTo("/");

        Navigation.Refresh(true);

    }

    catch(Exception ex)

    {

        Logger.LogError(ex, await GetLogError(ex));

        GotoErrorPage();

    }

    finally{

        Logger.LogInformation(await GetLogMessage("終了"));

    }

}

```

↓  

ログ出力結果

```

2024-10-30 19:24:59.1636||INFO|WebApp.Components.Pages.Login|開始 url=http://localhost:5034/login method=SubmitLogin 

2024-10-30 19:24:59.1636||INFO|WebApp.Components.Pages.Login|ログインチェック前 ログインID:aa url=http://localhost:5034/login method=SubmitLogin 

2024-10-30 19:24:59.1994||INFO|WebApp.Components.Pages.Login|aa Aさん ログイン成功 url=http://localhost:5034/login method=SubmitLogin 

2024-10-30 19:24:59.2046||INFO|WebApp.Components.Pages.Login|aa Aさん 終了 url=http://localhost:5034/ method=SubmitLogin 

```

## ソースコード生成ツール

モード別にスケルトンコード生成するツール。

### モード

* 一覧

* 編集

* アップロード

* テンプレート(必要最低限のスケルトンコード)

* スニペット「PDF」(実装例)

* スニペット「CSV」(実装例)

### 生成ファイル

カレントパスにOutputディレクトリに下記を生成する

* Components/Pages/{クラス名}.razor

* DI/DI{クラス名}.cs

* Models/{クラス名}Model.cs

* Models/Input{クラス名}Model.cs  

  → モード edit/upload/template 時に生成

* Repositories/{ClassName}Repository.cs

* Repositories/IRepository/I{ClassName}Repository.cs

### コマンド

```sh

#ルートパス上で実行

dotnet run --project Tools/Create/Create.csproj 　 [options]

```

○必須パラメータ
  

|パラメータ名|設定値|概要|

|---|---|---|

|RunMode|list:一覧モード
edit:詳細
upload:アップロード
template:必要最低限のスケルトンコード
tips_pdf:スニペット「PDF」
tips_csv:スニペット「CSV」|スケルトン生成モード|

|uri|例）order-list|ページのURI
uriからクラス名を自動作成する
例）OderList|

○オプションパラメータ
  

|パラメータ名|設定値|概要|

|---|---|---|

|--edit_key_type
-ekt|例）string|型情報(省略時:int)|

|--title|例）一覧|タイトル名(省略時:クラス名)|

|--repository-rep|例）Shred|共通リポジトリ名※プレフィックスのみ(省略時:クラス名)|

### 実行例

  ```sh

   #一覧ページ生成　ページuri:order-list (クラス名:OrderList) キー型:int(初期値) タイトル名:クラス名(OrderList) リポジトリ名:クラス名(OrderList)

  dotnet run --project Tools/Create/Create.csproj list order-list 

  #詳細ページ生成　ページuri:order-edit (クラス名:OrderEdit) キー型:int(初期値) タイトル名:クラス名(OrderEdit) リポジトリ名:クラス名(OrderEdit)

  dotnet run --project Tools/Create/Create.csproj edit order-edit

  #アップロードページ生成　ページuri:order-upload (クラス名:OrderUpload) キー型:int(初期値) タイトル名:クラス名(OrderUpload) リポジトリ名:クラス名(OrderUpload)

  dotnet run --project Tools/Create/Create.csproj upload order-upload

  #テンプレートページ※生成　ページuri:ex-template (クラス名:ExTemplate) キー型:int(初期値) タイトル名:クラス名(ExTemplate) リポジトリ名:クラス名(ExTemplate)

  #※必要最低限のスケルトンコード

  dotnet run --project Tools/Create/Create.csproj template ex-template

  #スニペット「PDF」ページ生成　ページuri:ex-pdf (クラス名:ExPdf) キー型:int(初期値)  タイトル名:クラス名(ExPdf) リポジトリ名:クラス名(ExPdf)

  dotnet run --project Tools/Create/Create.csproj tips_pdf ex-pdf 

  #スニペット「CSV」ページ生成　ページuri:ex-csv (クラス名:ExCsv) キー型:int(初期値) タイトル名:クラス名(ExCsv) リポジトリ名:クラス名(ExCsv)

  dotnet run --project Tools/Create/Create.csproj tips_csv ex-csv

 ```

* オプション:型情報指定  

 ```sh

  #一覧ページ生成　ページuri:order-list (クラス名:OrderList) キー型:string タイトル名:クラス名(OrderList) リポジトリ名:クラス名(OrderList)

   dotnet run --project Tools/Create/Create.csproj list order-list --edit_key_type string 

  #詳細ページ生成　ページuri:order-edit (クラス名:OrderEdit) キー型:string タイトル名:クラス名(OrderEdit) リポジトリ名:クラス名(OrderEdit)

  dotnet run --project Tools/Create/Create.csproj edit order-edit --edit_key_type string 

  #アップロードページ生成　ページuri:order-upload (クラス名:OrderUpload) キー型:string タイトル名:クラス名(OrderUpload) リポジトリ名:クラス名(OrderUpload)

  dotnet run --project Tools/Create/Create.csproj upload order-upload --edit_key_type string 

  #テンプレートページ※生成　ページuri:ex-template (クラス名:ExTemplate) キー型:string タイトル名:クラス名(ExTemplate) リポジトリ名:クラス名(ExTemplate)

  #※必要最低限のスケルトンコード

  dotnet run --project Tools/Create/Create.csproj template ex-template --edit_key_type string 

  #スニペット「PDF」ページ生成　ページuri:ex-pdf (クラス名:ExPdf) キー型:string タイトル名:クラス名(ExPdf) リポジトリ名:クラス名(ExPdf)

  dotnet run --project Tools/Create/Create.csproj tips_pdf ex-pdf --edit_key_type string 

  #スニペット「CSV」ページ生成　ページuri:ex-csv (クラス名:ExCsv) キー型:string タイトル名:クラス名(ExCsv) リポジトリ名:クラス名(ExCsv)

  dotnet run --project Tools/Create/Create.csproj tips_csv ex-csv --edit_key_type string 

 ```

* オプション:型情報、タイトル指定  

 ```sh

  #一覧ページ生成　ページuri:order-list (クラス名:OrderList) キー型:string タイトル名:一覧 リポジトリ名:クラス名(OrderList)

   dotnet run --project Tools/Create/Create.csproj list order-list --edit_key_type string --title "一覧"

  #詳細ページ生成　ページuri:order-edit (クラス名:OrderEdit) キー型:string タイトル名:編集 リポジトリ名:クラス名(OrderEdit)

  dotnet run --project Tools/Create/Create.csproj edit order-edit --edit_key_type string --title "編集"

  #アップロードページ生成　ページuri:order-upload (クラス名:OrderUpload) キー型:string タイトル名:アップロード リポジトリ名:クラス名(OrderUpload)

  dotnet run --project Tools/Create/Create.csproj upload order-upload --edit_key_type string --title "アップロード"

  #テンプレートページ※生成　ページuri:ex-template (クラス名:ExTemplate) キー型:string タイトル名:テンプレート リポジトリ名:クラス名(ExTemplate)

  #※必要最低限のスケルトンコード

  dotnet run --project Tools/Create/Create.csproj template ex-template --edit_key_type string --title "テンプレート"

  #スニペット「PDF」ページ生成　ページuri:ex-pdf (クラス名:ExPdf) キー型:string タイトル名:スニペット「PDF」 リポジトリ名:クラス名(ExPdf)

  dotnet run --project Tools/Create/Create.csproj tips_pdf ex-pdf --edit_key_type string --title "スニペット「PDF」"

  #スニペット「CSV」ページ生成　ページuri:ex-csv (クラス名:ExCsv) キー型:string タイトル名:スニペット「CSV」 リポジトリ名:クラス名(ExCsv)

  dotnet run --project Tools/Create/Create.csproj tips_csv ex-csv --edit_key_type string --title "スニペット「CSV」"

 ```

* オプション:型情報、タイトル、リポジトリ指定  

 ```sh

  #一覧ページ生成　ページuri:order-list (クラス名:OrderList) キー型:string タイトル名:一覧 リポジトリ名:Shared

  dotnet run --project Tools/Create/Create.csproj list order-list --edit_key_type string --title "一覧" -rep Shared

  #詳細ページ生成　ページuri:order-edit (クラス名:OrderEdit) キー型:string タイトル名:編集 リポジトリ名:Shared

  dotnet run --project Tools/Create/Create.csproj edit order-edit --edit_key_type string --title "編集" -rep Shared

  #アップロードページ生成　ページuri:order-upload (クラス名:OrderUpload) キー型:string タイトル名:アップロード リポジトリ名:Shared

  dotnet run --project Tools/Create/Create.csproj upload order-upload --edit_key_type string --title "アップロード" -rep Shared

  #テンプレートページ※生成　ページuri:ex-template (クラス名:ExTemplate) キー型:string タイトル名:テンプレート リポジトリ名:Shared

  #※必要最低限のスケルトンコード

  dotnet run --project Tools/Create/Create.csproj template ex-template --edit_key_type string --title "テンプレート" -rep Shared

  #スニペット「PDF」ページ生成　ページuri:ex-pdf (クラス名:ExPdf) キー型:string タイトル名:スニペット「PDF」 リポジトリ名:Shared

  dotnet run --project Tools/Create/Create.csproj tips_pdf ex-pdf --edit_key_type string --title "スニペット「PDF」" -rep Shared

  #スニペット「CSV」ページ生成　ページuri:ex-csv (クラス名:ExCsv) キー型:string タイトル名:スニペット「CSV」 リポジトリ名:Shared

  dotnet run --project Tools/Create/Create.csproj tips_csv ex-csv --edit_key_type string --title "スニペット「CSV」" -rep Shared

 ```

## マスター用ソースコード生成ツール

マスタ一覧ページ・編集ページのスケルトンコード生成するツール。

### 生成ファイル

カレントパスにOutputディレクトリに下記を生成する

* Components/Pages/{クラス名}List.razor

* Components/Pages/{クラス名}Edit.razor

* DI/DI{クラス名}.cs

* Models/{クラス名}Model.cs

* Models/Input{クラス名}Model.cs  

* Repositories/{ClassName}Repository.cs

* Repositories/IRepository/I{ClassName}Repository.cs

### コマンド

```sh

#ルートパス上で実行

dotnet run --project Tools/CreateMaster/CreateMaster.csproj 　<接続文字列> <テーブル名>

```

○必須パラメータ
  

|パラメータ名|設定値|概要|

|---|---|---|

|DBモード|SQLite
PostgreSQL|DBの設定|

|接続文字列|SQLite：SQLiteファイル(.db)のパス
PostgreSQL：Server=<サーバー>;Port=<ポート番号>;User Id=<ユーザID>;Password=<パスワード>;Database=>|SQLiteはファイルパスを指定|

|テーブル名|マスターテーブル名|物理テーブル名|

○オプションパラメータ
  

|パラメータ名|設定値|概要|

|---|---|---|

|--url_prefix
-u|例）user|@pageに設定するURLのプレフィックス(省略時:クラス名)|

|--use_hyphen
-useHyp|例）false|@urlの値を作成する際、ハイフンかアンダーバーか設定(省略時:true)
true:ハイフン(-)
false:アンダーバー(_)|

### 実行例

  ```sh

   #SQLite　WebApp/assets/Test.db(相対パス)　対象テーブル m_user(ユーザーマスタ)

   dotnet run --project Tools/CreateMaster/CreateMaster.csproj  SQLite "WebApp/assets/Test.db" m_user

   #PostgreSQL　Docker立ち上げ必須　対象テーブル m_user(ユーザーマスタ)

   dotnet run --project Tools/CreateMaster/CreateMaster.csproj PostgreSQL "Server=localhost;Port=5433;User Id=test;Password=test;Database=testDB" m_user

   #オプションあり：「URLプレフィックス：user、アンダーバー設定」SQLite　WebApp/assets/Test.db(相対パス)　対象テーブル m_user(ユーザーマスタ)

   dotnet run --project Tools/CreateMaster/CreateMaster.csproj  SQLite "WebApp/assets/Test.db" m_user --url_prefix user --use_hyphen false

 ```

## 郵便番号データ加工ツール

[日本郵政が配布する郵便番号データ(utf_ken_all.csv)](https://www.post.japanpost.jp/zipcode/dl/utf-zip.html)の加工結果を出力する。

### 生成ファイル

カレントパスのOutputディレクトリに下記を生成する

* PostData.csv

### ファイルレイアウト

|カラム名|補足|

|---|---|

|郵便番号||

|都道府県名カナ||

|市町村名カナ||

|町域名カナ|未設定の場合あり| 

|都道府県名||

|市町村名||

|町域名|未設定の場合あり| 

|住所|郵便番号検索時に使用| 

|住所カナ|郵便番号検索時に使用| 

### コマンド

```sh

#ルートパス上で実行

dotnet run --project Tools/ModifyUtfKenAll/ModifyUtfKenAll.csproj 

```

○必須パラメータ
  

|パラメータ名|設定値|概要|

|---|---|---|

|InputFile|読込むcsvファイルのフルパス|utf_ken_all.csvを指定すること|

### 実行例

```sh

#ルートパス上で実行

dotnet run --project Tools/ModifyUtfKenAll/ModifyUtfKenAll.csproj Tools/ModifyUtfKenAll/ExampleFiles/utf_ken_all_tokyo.csv

```

### Docker実行方法

* **事前準備**

   1. Docker環境構築

      1. Dockerインストール

         * OSによってインストールする(例：WindowsならWSL2など)

   1. Dockerコンテナのビルド

      1. ```cd Docker```を実行

      1. 初回のみビルドを実行  

         ```docker compose build```

* **初回デプロイ**

   1. Webアプリケーションをpublishする

      1. WebアプリケーションをLinux用にpublishする  

         ```dotnet publish --runtime linux-x64 --property:PublishDir="./bin/Release/source"```  

         ※```WebApp\bin\Release\source```が作成される

   1. publish結果をDockerディレクトリにコピーする  

      ```WebApp\bin\Release```の「source」ディレクトリを  

      Dockerディレクトリ直下にコピーする

   1. Docker実行

         ```sh

         docker compose up -d

         ```

   

   1. ローカルブラウザでアクセスできるか確認する  

      ```http://localhost/```

* **再デプロイ**

   1. Webアプリケーションをpublishする

      1. **ローカル開発環境**：WebアプリケーションをLinux用にpublishする  

         ```dotnet publish --runtime linux-x64 --property:PublishDir="./bin/Release/source"```  

         ※```WebApp\bin\Release\source```が作成される

   1. publish結果をDockerディレクトリにコピーする  

      ```WebApp\bin\Release```の「source」ディレクトリを  

      Dockerディレクトリ直下にコピーする

   1. Docker再起動  

         ```sh

         docker compose restart

         ```

   1. ローカルブラウザでアクセスできるか確認する  

      ```http://localhost/```

* **利用終了**  

   利用終了時は下記を実行する

   1. Dockerコンテナ停止・削除  

         ```sh

         docker compose down

         ```

* 補足1：**PostgeSQLを利用して開発する**  

   ※Docker実行している前提

   * VisualStudioCode

      * 通常通り開発を行える

      * Webアプリケーションの実行コマンドは下記の通り

         1. ターミナル上で下記を実行  

            ```sh

            dotnet run --project WebApp/WebApp.csproj -- -p Settings:RequiredAuthentication=true - p DB:ConnectionStrings:postgres="Server=localhost;Port=5433;User Id=test;Password=test;Database=testDB" - p DB:Target="postgres"

            ```  

            ※DB接続文字列とPostgeSQL選択をパラメータで指定する

* 補足2：**初期データをもう一度入れる場合**

   1. Dockerコンテナ停止・削除  

         ```sh

         docker compose down

         ```

   1. PostgeSQLのボリュームを削除する  

         ```sh

         docker volume rm postgresql_data_blazor

         ```

   1. Docker実行

         ```sh

         docker compose up -d

         ```
ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

https://github.com/kazenetu/blazorssr-practice

Awesome Lists containing this project

README

○必須パラメータ

○オプションパラメータ

○必須パラメータ

○オプションパラメータ

○必須パラメータ
