LoginSignup
0
0

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

Last updated at Posted at 2024-01-17

Blazor プロジェクトの新規作成

  1. Visual Studio 2022を開いて
  2. プロジェクトの新規作成を押下
    project_create.png
  3. Blazorのウエブアプリテンプレートを選択
  4. 「次」を押下
    project_create_2.png
  5. プロジェクト名を入力
  6. 「次」を押下
    pla_create_1.png
  7. 「認証タイプ」のドロップダウンで個人アカウントを選択
  8. 「作成」を押下
    pla_create_2.png

PostgreSQLの設定

デフォールトの設定でSQLServerのデータベースの設定されていますので変更しないといけません。

PostgreSQLのパッケージのインストール

  1. ソリューションを右クリック
    pla_create_3.png
  2. 右クリックすると表示されるコンテキストメニューで Manage NuGet Packages for Solution... を選択
    pla_create_4.png
  3. NuGet - Solution ペインの Browse タブを選択
  4. 検索ボックスで npgsql を入力
  5. 左側にあるパッケージ一覧で Npgsql.EntityFrameworkCore.PostgreSQL を選択
    pla_create_5.png
  6. 左側に表示されるパッケージ詳細で「プロジェクト」のチェックボックスを選択
  7. 現れた「インストール」ボタンを押下
    pla_create_6.png
  8. 表示された変更プレビューのダイアログの「適用する」ボタンを押下
    pla_create_11.png

接続設定

  1. appsettings.jsonを開いて
    pla_create_7.png
  2. ConnectionStringsの中のデフォールトのデータベースの接続文字列をPostgreSQLのデータべースの情報で下記のように変更:
{
  "ConnectionStrings": {
    "DefaultConnection": "Host=xxx.xxx.xxx.xxx;Port=5432;Database=testdb;Username=testdb;Password=testdb"
  },
...

SQLServerの代わりにPostgreSQLを入れ替える

  1. Program.csを開いて
    pla_create_12.png
  2. 接続コードで「UseSqlServer」を呼び出す代わりに、「UseNpgsql」を呼び出します:
builder.Services.AddDbContext<ApplicationDbContext>(options =>
    options.UseNpgsql(connectionString));

PostgreSQLのデータベース作成

  1. SSHでホストにログイン
  2. 下記のように 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の設定

  1. ソリューションを右クリック
    pla_create_3.png
  2. 右クリックすると表示されるコンテキストメニューで Manage NuGet Packages for Solution... を選択
    pla_create_4.png
  3. NuGet - Solution ペインの Browse タブを選択
  4. 検索ボックスで npgsql を入力
  5. 左側にあるパッケージ一覧で Npgsql.EntityFrameworkCore.PostgreSQL を選択
  6. 左側に表示されるパッケージ詳細で「プロジェクト」のチェックボックスを選択
  7. 現れた「インストール」ボタンを押下
    pla_create_8.png
  8. 表示された変更プレビューのダイアログの「適用する」ボタンを押下
    pla_create_9.png
  9. 表示されたライセンス受諾のダイアログの「同意する」ボタンを押下
    pla_create_10.png

マイグレーション

デフォールトのの設定でSQLServerのマイグレーションが生成されているのでPostgreSQLの設定が完了の後でPostgreSQLのマイグレーションを生成しないといけません。

既存のマイグレーション

  1. 既存のマイグレーションのファイルを選択
  2. 右クリックすると表示されるコンテキストメニューで「削除」を選択
    pla_create_13.png

新しいマイグレーションの生成

  1. プロジェクトのフォルダーにいる確認して、ソリューションフォルダーにいるなら次のコマンドを実行する:
cd PostgreSQLLocalAuth
  1. 「Package Manager Console」で次のコマンドを実行して新しいマイグレーションを生成します:
Add-Migration Initial-Create -OutputDir Data\Migrations

DBでマイグレーションを実行

  1. 「Package Manager Console」で次のコマンドを実行してデータベースでマイグレーションを実行します:
Update-Database

※ PostgreSQLのバージョンが古すぎるとき下記のエラーが発生:

42601: syntax error at or near "GENERATED"

POSITION: 53

※ PostgreSQLのバージョンが古すぎるとき下記のエラーが発生

42P07: relation "AspNetRoles" already exist

動作確認

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

  1. 登録ページへ移行
    pla_create_14.png
  2. メールアドレスと希望のパスワードを入力
  3. 「Register」ボタンを押下
    pla_create_15.png
  4. 「click here to confirm your account」リンクをクリック
    pla_create_16.png
  5. ログインページへ移行
    pla_create_17.png
  6. メールアドレスと希望のパスワードを入力
  7. 「Login」ボタンを押下
    pla_create_18.png
  8. ログインが成功した確認できます!
    pla_create_19.png
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0