2024: Blazor の個人認証アカウントのウェブアプリでPostgreSQLのDBを利用 (ASP.NET Core / .Net 8.0 対象）

## Blazor プロジェクトの新規作成
1. Visual Studio 2022を開いて
2. プロジェクトの新規作成を押下
![project_create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/e0c14929-2464-e6a8-e107-11d276c0d6c5.png)
3. Blazorのウエブアプリテンプレートを選択
4. 「次」を押下
![project_create_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/f54540ba-6ad1-9c97-f41b-d375a009ab4e.png)
5. プロジェクト名を入力
6. 「次」を押下
![pla_create_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/233bf75d-9ceb-7aa1-7044-3e4d65281f98.png)
7. 「認証タイプ」のドロップダウンで個人アカウントを選択
8. 「作成」を押下
![pla_create_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/f9263e45-0a14-7372-a4ed-002963fae4b0.png)

## PostgreSQLの設定
デフォールトの設定でSQLServerのデータベースの設定されていますので変更しないといけません。
### PostgreSQLのパッケージのインストール
9. ソリューションを右クリック
![pla_create_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/72711a19-f39b-cb3e-fa75-c9e36e45a51e.png)
10. 右クリックすると表示されるコンテキストメニューで Manage NuGet Packages for Solution... を選択
![pla_create_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/9420ca5d-8c90-4a78-f31b-b600600f23ad.png)
11. NuGet - Solution ペインの Browse タブを選択
12. 検索ボックスで npgsql を入力
13. 左側にあるパッケージ一覧で Npgsql.EntityFrameworkCore.PostgreSQL を選択
![pla_create_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/fb75bbbe-dc36-510b-7648-95251aed4410.png)
14. 左側に表示されるパッケージ詳細で「プロジェクト」のチェックボックスを選択
15. 現れた「インストール」ボタンを押下
![pla_create_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/13377e83-be81-5967-b1a5-6ea5f7e900ef.png)
16. 表示された変更プレビューのダイアログの「適用する」ボタンを押下
![pla_create_11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/956b25f8-f8cf-4778-2b48-ed1d642eef73.png)

### 接続設定
17. `appsettings.json`を開いて
![pla_create_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/d13e0437-92cd-2eb0-478a-1db954c8c6b1.png)
18. `ConnectionStrings`の中のデフォールトのデータベースの接続文字列をPostgreSQLのデータべースの情報で下記のように変更：
```
{
  "ConnectionStrings": {
    "DefaultConnection": "Host=xxx.xxx.xxx.xxx;Port=5432;Database=testdb;Username=testdb;Password=testdb"
  },
...
```
### SQLServerの代わりにPostgreSQLを入れ替える
19. `Program.cs`を開いて
![pla_create_12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/f7b22f97-c38f-d283-42ee-dc63920e4ac7.png)
20. 接続コードで「UseSqlServer」を呼び出す代わりに、「UseNpgsql」を呼び出します：
```
builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseNpgsql(connectionString));
```

### PostgreSQLのデータベース作成
21. SSHでホストにログイン
22. 下記のように psql でデータベースとDBユーザーを作成：
```
$ psql -U postgres
Password for user postgres: 
psql (12.11)
Type "help" for help.

postgres=# create database testdb;
CREATE DATABASE
postgres=# create user testdb with password 'testdb';
CREATE ROLE
postgres=# alter user testdb with encrypted password 'testdb';
ALTER ROLE
postgres=# grant all privileges on database testdb to testdb;
GRANT
postgres=#
```

## Microsoft.EntityFrameworkCoreの設定
23. ソリューションを右クリック
![pla_create_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/72711a19-f39b-cb3e-fa75-c9e36e45a51e.png)
24. 右クリックすると表示されるコンテキストメニューで Manage NuGet Packages for Solution... を選択
![pla_create_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/9420ca5d-8c90-4a78-f31b-b600600f23ad.png)
25. NuGet - Solution ペインの Browse タブを選択
26. 検索ボックスで npgsql を入力
27. 左側にあるパッケージ一覧で Npgsql.EntityFrameworkCore.PostgreSQL を選択
28. 左側に表示されるパッケージ詳細で「プロジェクト」のチェックボックスを選択
29. 現れた「インストール」ボタンを押下
![pla_create_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/bcc0c0ed-88b3-7294-bcc2-573384189056.png)
30. 表示された変更プレビューのダイアログの「適用する」ボタンを押下
![pla_create_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/9c92fb86-07c2-0fb4-aac6-a7fa5e48edb5.png)
31. 表示されたライセンス受諾のダイアログの「同意する」ボタンを押下
![pla_create_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/0eb0ca3f-bf7f-9828-e3a2-9ad78e72b19c.png)

## マイグレーション
デフォールトのの設定でSQLServerのマイグレーションが生成されているのでPostgreSQLの設定が完了の後でPostgreSQLのマイグレーションを生成しないといけません。
### 既存のマイグレーション
32. 既存のマイグレーションのファイルを選択
33. 右クリックすると表示されるコンテキストメニューで「削除」を選択
![pla_create_13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/6b1c3956-ab1d-66f2-6762-728c71941e9e.png)
### 新しいマイグレーションの生成
34. プロジェクトのフォルダーにいる確認して、ソリューションフォルダーにいるなら次のコマンドを実行する：
```
cd PostgreSQLLocalAuth
```
35. 「Package Manager Console」で次のコマンドを実行して新しいマイグレーションを生成します：
```
Add-Migration Initial-Create -OutputDir Data\Migrations
```
### DBでマイグレーションを実行
36. 「Package Manager Console」で次のコマンドを実行してデータベースでマイグレーションを実行します：
```
Update-Database
```
※　PostgreSQLのバージョンが古すぎるとき下記のエラーが発生：
```
42601: syntax error at or near "GENERATED"

POSITION: 53
```
※　PostgreSQLのバージョンが古すぎるとき下記のエラーが発生
```
42P07: relation "AspNetRoles" already exist
```

## 動作確認
ユーザーを登録して、新しく作成したウェブアプリケーションにログインしましょう

37. 登録ページへ移行
![pla_create_14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/1d76b98e-d94c-fe97-325c-2e6037d6ee41.png)
38. メールアドレスと希望のパスワードを入力
39. 「Register」ボタンを押下
![pla_create_15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/a0ed6a28-418e-79b6-cb56-af40575cc398.png)
40. 「click here to confirm your account」リンクをクリック
![pla_create_16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/a319f6e6-a331-e8ca-9eaf-473977c3029d.png)
41. ログインページへ移行
![pla_create_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/8edbfb9c-4ed1-1b0d-dc08-03309cc7ef21.png)
42. メールアドレスと希望のパスワードを入力
43. 「Login」ボタンを押下
![pla_create_18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/12eec42c-f920-82e1-e027-07ead543dd8c.png)
44. ログインが成功した確認できます！
![pla_create_19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/531993/8c3b0518-644b-ed04-5d4c-c524cbe4cd2f.png)