Versuchen Sie, MySql und Blazor mit Docker-Compose auszuführen

Einführung

Ich möchte Docker-Compose auf MySql und Blazor ausführen.

Klicken Sie hier, um die Blazor-Entwicklungsumgebung zu erstellen [https://qiita.com/taskeknight/items/f07d23151b8bd23e456d]

Es wurde mit dem ASP.NET Core Blazor-Hosting-Modell erstellt. Auf der Browserseite wird die WebAssembly-basierte .NET-Laufzeit (Blazor WebAssembly) ausgeführt.

Wir werden Code hinzufügen, um MySql zu laden.

Serverseitiger Code

Erstellen Sie einen Controller, der mit api / MySql auf die Serverseite zugreift. Gehen Sie zu MySql und holen Sie sich die Daten.

C#:BrazorwasmDotNetCoreHostedWithDocker.Server.Controllers.MySQLController.cs

using BrazorwasmDotNetCoreHostedWithDocker.Shared;
using Microsoft.AspNetCore.Mvc;
using MySql.Data.MySqlClient;
using SqlKata.Compilers;
using SqlKata.Execution;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace BrazorwasmDotNetCoreHostedWithDocker.Server.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class MySqlController : ControllerBase
    {
        [HttpGet]
        public async Task<IEnumerable<MySqlData>> Get()
        {
            MySqlConnectionStringBuilder builder = new MySqlConnectionStringBuilder
            {
                Server = "mysql",
                Database = "MyDatabase",
                UserID = "root",
                Password = "root1234",
                SslMode = MySqlSslMode.Required,
            };

            IEnumerable<MySqlData> list = null;
            using (MySqlConnection connection = new MySqlConnection(builder.ConnectionString))
            {
                await connection.OpenAsync();

                MySqlCompiler compiler = new MySqlCompiler();
                QueryFactory db = new QueryFactory(connection, compiler);

                list = db.Query("MyData").Select("Id", "Title", "CreatedAt").Get<MySqlData>();
            }

            return list;
        }
    }
}

Dieses Mal verwende ich eine Bibliothek namens SqlKata. https://sqlkata.com/

Es scheint, dass Dapper intern verwendet wird. Wenn Sie die Klasse beim Abrufen der Daten angeben, wird sie ordnungsgemäß in ein Objekt konvertiert. Ich hatte den Eindruck, dass es sehr lesbar und einfach zu bedienen war.

Clientseitiger Code

Ich möchte die Client-Seite so ändern, dass mit / mysql darauf zugegriffen werden kann. Fügen Sie der Navigation mysql hinzu.

C#:BrazorwasmDotNetCoreHostedWithDocker.Client.Shard.NavMenu.razor

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
・ ・ ・
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="mysql">
                <span class="oi oi-list-rich" aria-hidden="true"></span> MySql
            </NavLink>
        </li>
    </ul>
・ ・ ・
</div>

C#:BrazorwasmDotNetCoreHostedWithDocker.Client.Pages.MySql.razor

@page "/mysql"
@using BrazorwasmDotNetCoreHostedWithDocker.Shared
@inject HttpClient Http

@code {
    private MySqlData[] data;

    protected override async Task OnInitializedAsync()
    {
        data = await Http.GetFromJsonAsync<MySqlData[]>("api/MySql");
    }
}

<h1>MySql</h1>

@if (data == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Title</th>
                <th>CreatedAt</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var value in data)
            {
                <tr>
                    <td>@value.Id</td>
                    <td>@value.Title</td>
                    <td>@value.CreatedAt.ToShortDateString()</td>
                </tr>
            }
        </tbody>
    </table>
}

Gemeinsamer Code

C#:BrazorwasmDotNetCoreHostedWithDocker.Shared.MySqlData.cs

using System;

namespace BrazorwasmDotNetCoreHostedWithDocker.Shared
{
    public class MySqlData
    {
        public int Id { get; set; }
        public string Title { get; set; }
        public DateTime CreatedAt { get; set; }
    }
}

Docker-Compose-Einstellungen

docker-compose.yml

version: '3.7'
services:
    db:
        container_name: mysql
        image: mysql
        ports:
            - "3306:3306"
        volumes:
            - ./db/mysql_init:/docker-entrypoint-initdb.d
            - ./db/mysql_data:/var/lib/mysql
            - ./db/mysql_conf/:/etc/mysql/conf.d
        environment:
            MYSQL_ROOT_PASSWORD: root1234
            MYSQL_USER: test
            MYSQL_PASSWORD: test1234
        command: >
            mysqld
                --character-set-server=utf8
                --collation-server=utf8_unicode_ci
                --skip-character-set-client-handshake
    app:
        container_name: brazor
        build:
            context: .
            dockerfile: Dockerfile
        ports:
            - "80:80"
        environment:
            ASPNETCORE_ENVIRONMENT: Development

Sie können den Entwicklermodus mit "ASPNETCORE_ENVIRONMENT: Development" aufrufen.

MySQL-Einstellungen

Die Datei für MySQL wird im Lösungsordner gespeichert (möglicherweise ist es besser, sie nicht in Visual Stadio zu erstellen).

├─db
   ├─mysql_conf
   │      default_authentication.cnf
   │      
   ├─mysql_data
   │      
   └─mysql_init
           1_create.sql
           2_insert.sql

Wenn Sie es unter / docker-entrypoint-initdb.d speichern, wird es zuerst ausgeführt In docker-compose.yml ist es so eingestellt, dass es auf mysql_init gemountet wird.

Erstellen Sie dort eine Datenbank mit dem Namen "MyDatabase" und eine Tabelle mit dem Namen "MySqlData". Daten einfügen.

1_create.sql

CREATE DATABASE MyDatabase;
use MyDatabase;

CREATE TABLE MySqlData (
    Id INT(11) AUTO_INCREMENT NOT NULL,
    Title VARCHAR(64) NOT NULL,
    CreatedAt Date NOT NULL,
    PRIMARY KEY (id));

2_insert.sql

use MyDatabase;

INSERT INTO MySqlData (Title, CreatedAt) VALUES ('Titel 1', '2020-10-10');
INSERT INTO MySqlData (Title, CreatedAt) VALUES ('Titel 2', '2020-10-11');

Ich wollte mich auf Japanisch registrieren, also habe ich es in docker-compose.yml auf utf8 gesetzt.

            mysqld
                --character-set-server=utf8
                --collation-server=utf8_unicode_ci
                --skip-character-set-client-handshake  #Erzwungenes Überschreiben

Anlaufen

docker-compose up --build

Wenn Sie auf "http: // localhost / mysql" zugreifen und der folgende Bildschirm angezeigt wird, ist dies erfolgreich.

Weitere Hinweise

Beim Betreten des Containers

docker-compose exec db bash

Greifen Sie auf MySQL zu

mysql -u root -p