Essayez d'exécuter MySql et Blazor avec docker-compose

introduction

Je voudrais exécuter docker-compose sur MySql et Blazor.

Cliquez ici pour créer l'environnement de développement Blazor [https://qiita.com/taskeknight/items/f07d23151b8bd23e456d)

Il est construit avec le modèle d'hébergement ASP.NET Core Blazor. Du côté du navigateur, le runtime .NET basé sur WebAssembly (Blazor WebAssembly) est en cours d'exécution.

Nous ajouterons du code pour charger MySql.

Code côté serveur

Créez un contrôleur pour accéder au côté serveur avec ʻapi / MySql`. Accédez à MySql et récupérez les données.

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;
        }
    }
}

Cette fois, j'utilise une bibliothèque appelée SqlKata. https://sqlkata.com/

Il semble que Dapper est utilisé en interne et lorsque vous spécifiez la classe lors de l'obtention des données, elle est correctement convertie en objet. J'ai eu l'impression que c'était très lisible et facile à utiliser.

Code côté client

Je voudrais modifier le côté client pour qu'il soit accessible avec / mysql. Ajoutez mysql à la navigation.

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>
}

Code commun

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; }
    }
}

paramètres de composition de docker

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

Vous pouvez entrer en mode développeur avec ʻASPNETCORE_ENVIRONMENT: Development`.

Paramètres MySql

Le fichier pour MySql est stocké dans le dossier solution (il peut être préférable de ne pas le créer sur Visual Stadio).

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

Si vous le stockez sous / docker-entrypoint-initdb.d, il sera exécuté en premier, donc Dans docker-compose.yml, il est configuré pour être monté sur mysql_init.

Créez une base de données appelée MyDatabase et une table appelée MySqlData ici, Insertion de données.

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 ('Titre 1', '2020-10-10');
INSERT INTO MySqlData (Title, CreatedAt) VALUES ('Titre 2', '2020-10-11');

Je voulais m'enregistrer en japonais, donc je l'ai défini sur utf8 dans docker-compose.yml.

            mysqld
                --character-set-server=utf8
                --collation-server=utf8_unicode_ci
                --skip-character-set-client-handshake  #Écrasement forcé

Commencez

docker-compose up --build

Si vous accédez à http: // localhost / mysql et que l'écran suivant apparaît, cela réussit.

Autres notes

En entrant dans le conteneur

docker-compose exec db bash

Accéder à MySql

mysql -u root -p