Öğretici: Azure Static Web Apps'te MySQL veritabanı bağlantısı ekleme (önizleme)

Bu öğreticide, MySQL için Azure Veritabanı Esnek Sunucu veritabanını statik web uygulamanıza bağlamayı öğreneceksiniz. Yapılandırıldıktan sonra, arka uç kodu yazmak zorunda kalmadan verileri işlemek için yerleşik /data-api uç noktaya REST veya GraphQL istekleri yapabilirsiniz.

Kolaylık olması açısından bu öğreticide yerel geliştirme amacıyla Azure veritabanının nasıl kullanılacağı gösterilmektedir, ancak yerel geliştirme gereksinimleriniz için yerel bir veritabanı sunucusu da kullanabilirsiniz.

Dekont

Bu öğreticide MySQL için Azure Veritabanı Esnek Sunucunun nasıl kullanılacağı gösterilmektedir. Başka bir veritabanı kullanmak isterseniz Azure Cosmos DB, Azure SQL veya PostgreSQL öğreticilerine bakın.

Web browser showing results from MySQL in the developer tools console window.

Bu öğreticide aşağıdakilerin nasıl yapılacağını öğreneceksiniz:

MySQL için Azure Veritabanı veritabanını statik web uygulamanıza bağlama
Veri oluşturma, okuma, güncelleştirme ve silme

Ön koşullar

Bu öğreticiyi tamamlamak için mevcut bir MySQL için Azure Veritabanı veritabanınız ve statik web uygulamanız olması gerekir. Ayrıca, Azure Data Studio'yu yüklemeniz gerekir.

Kaynak	Tanım
MySQL için Azure Veritabanı Esnek Sunucu	Veritabanı oluşturmanız gerekiyorsa MySQL için Azure Veritabanı Esnek Sunucu oluşturma kılavuzundaki adımları izleyin. Web uygulamanız için bağlantı dizesi kimlik doğrulaması kullanmayı planlıyorsanız, mySQL kimlik doğrulaması ile veritabanınızı oluşturduğunuzdan emin olun. Daha sonra yönetilen kimlik kullanmak istiyorsanız bu ayarı daha sonra değiştirebilirsiniz.
Mevcut statik web uygulaması	Henüz bir uygulamanız yoksa, Başlangıç kılavuzundaki adımları izleyerek Çerçeve Yok statik web uygulaması oluşturun.
MySQL uzantısıyla Azure Data Studio	Azure Data Studio'yu henüz yüklemediyseniz, MySQL uzantısıyla Azure Data Studio'yu yükleme kılavuzunu izleyin. Alternatif olarak, MySQL veritabanınızı sorgulamak için MySQL Workbench gibi başka bir araç kullanabilirsiniz.

Veritabanınızı Azure Static Web Apps veritabanı bağlantı özelliğiyle çalışacak şekilde yapılandırarak başlayın.

Veritabanı bağlantısını yapılandırma

Veritabanı bağlantılarının çalışması için Azure Static Web Apps'in veritabanınıza ağ erişimi olmalıdır. Ayrıca, yerel geliştirme için bir Azure veritabanı kullanmak için veritabanınızı kendi IP adresinizden gelen isteklere izin verecek şekilde yapılandırmanız gerekir.

Azure portalında MySQL için Azure Veritabanı Sunucusu Esnek Sunucunuza gidin.
Ayarlar bölümünde Ağ'ı seçin.
Güvenlik duvarı kuralları bölümünde Geçerli istemci IP adresinizi ekleyin düğmesini seçin. Bu adım, yerel geliştirmeniz için bu veritabanını kullanabilmenizi sağlar.
Güvenlik duvarı kuralları bölümünde Azure'ın içindeki herhangi bir Azure hizmetinden bu sunucuya genel erişime izin ver onay kutusunu seçin. Bu adım, dağıtılan Statik Web Uygulamaları kaynağınızın veritabanınıza erişmesini sağlar.
Kaydet'i seçin.

Yerel geliştirme için veritabanı bağlantı dizesi alma

Yerel geliştirme için Azure veritabanınızı kullanmak için veritabanınızın bağlantı dizesi almanız gerekir. Geliştirme amacıyla yerel veritabanı kullanmayı planlıyorsanız bu adımı atlayabilirsiniz.

Azure portalında MySQL için Azure Veritabanı Sunucusu Esnek Sunucunuza gidin.
Ayarlar bölümünün altında Bağlan'ı seçin.
Uygulamanızdaki Bağlan bölümünde ADO.NET bağlantı dizesi seçin ve bir metin düzenleyicisinde bir kenara bırakın.
{your_password} bağlantı dizesi yer tutucuyu parolanızla değiştirin.
Yer tutucuyu {your_database} veritabanı adıyla MyTestPersonDatabasedeğiştirin. öğesini önümüzdeki adımlarda oluşturacaksınız MyTestPersonDatabase .
Bunlar ek adımlar gerektirdiğinden ve üretim amaçlarına yönelik olduğundan bağlantı dizesi SslMode ve SslCa bölümlerini silin.

Örnek veri oluşturma

Örnek bir tablo oluşturun ve öğreticiyle eşleşecek örnek verilerle bu tabloyu dağıtın. Burada Azure Data Studio'yu kullanabilirsiniz, ancak MySQL Workbench'i veya başka bir aracı kullanabilirsiniz.

Azure Data Studio'da Azure MySQL Esnek Sunucunuza bir bağlantı oluşturun.
Sunucunuza sağ tıklayın ve yeni bir veritabanı oluşturun. Veritabanı adı olarak girin MyTestPersonDatabase ve olacak utf8mb4 karakter kümesini ve harmanlamasını utf8mb4_0900_ai_ciseçin.
Sunucunuza sağ tıklayın ve Yenile'yi seçin.
Veritabanınıza MyTestPersonDatabase sağ tıklayın ve Yeni Sorgu'yu seçin. adlı MyTestPersonTableyeni bir tablo oluşturmak için aşağıdaki betiği çalıştırın.
```
CREATE TABLE MyTestPersonTable (
    Id INT AUTO_INCREMENT NOT NULL,
    Name VARCHAR(25) NULL,
    PRIMARY KEY (Id)
);
```

Tabloya veri MyTestPersonTable eklemek için aşağıdaki betiği çalıştırın.

INSERT INTO MyTestPersonTable (Name)
VALUES ('Sunny');

INSERT INTO MyTestPersonTable (Name)
VALUES ('Dheeraj');

Tablonuza sağ tıklayın ve veritabanınızda MyTestPersonTable veri olduğunu doğrulamak için İlk 1000'i Seç'i seçin.

Statik web uygulamasını yapılandırma

Bu öğreticinin geri kalanı, veritabanı bağlantılarını yerel olarak kullanmak için statik web uygulamanızın kaynak kodunu düzenlemeye odaklanır.

Önemli

Aşağıdaki adımlarda, başlangıç kılavuzunda oluşturulan statik web uygulamasıyla çalıştığınız varsayılır. Farklı bir proje kullanıyorsanız aşağıdaki git komutlarını dal adlarınızla eşleşecek şekilde ayarladığınızdan emin olun.

Dala main geçin.
- Bash
- PowerShell
```
git checkout main
```
```
git checkout main
```
kullanarak git pullyerel sürümünüzü GitHub'da bulunanlarla eşitleyin.
- Bash
- PowerShell
```
git pull origin main
```
```
git pull origin main
```

Veritabanı yapılandırma dosyasını oluşturma

Ardından, statik web uygulamanızın veritabanıyla arabirim oluşturmak için kullandığı yapılandırma dosyasını oluşturun.

Terminalinizi açın ve bağlantı dizesi tutmak için yeni bir değişken oluşturun. Söz dizimi, kullandığınız kabuk türüne bağlı olarak değişebilir.
- Bash
- PowerShell
```
export DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
```
$env:DATABASE_CONNECTION_STRING='<YOUR_CONNECTION_STRING>'
```
değerini bir metin düzenleyicisinde ayırdığınız bağlantı dizesi değeriyle değiştirdiğinizden <YOUR_CONNECTION_STRING> emin olun.
Statik Web Uygulamaları CLI'sını yüklemek veya güncelleştirmek için npm kullanın. Durumunuz için en uygun komutu seçin.

Yüklemek için kullanın npm install.
- Bash
- PowerShell
```
npm install -g @azure/static-web-apps-cli
```
```
npm install -g @azure/static-web-apps-cli
```
Güncelleştirmek için kullanın npm update.
- Bash
- PowerShell
```
npm update
```
```
npm update
```
swa db init Veritabanı yapılandırma dosyası oluşturmak için komutunu kullanın.
- Bash
- PowerShell
```
swa db init --database-type mysql
```
```
swa db init --database-type mysql
```
komutu swa-db-connections init klasöründe staticwebapp.database.config.json dosyasını oluşturur.
Bu örneği oluşturduğunuz staticwebapp.database.config.json dosyasına yapıştırın.

{
  "$schema": "https://github.com/Azure/data-api-builder/releases/latest/download/dab.draft.schema.json",
  "data-source": {
    "database-type": "mysql",
    "options": {
      "set-session-context": false 
    },
    "connection-string": "@env('DATABASE_CONNECTION_STRING')"
  },
  "runtime": {
    "rest": {
      "enabled": true,
      "path": "/rest"
    },
    "graphql": {
      "allow-introspection": true,
      "enabled": true,
      "path": "/graphql"
    },
    "host": {
      "mode": "production",
      "cors": {
        "origins": ["http://localhost:4280"],
        "allow-credentials": false
      },
      "authentication": {
        "provider": "StaticWebApps"
      }
    }
  },
  "entities": {
    "Person": {
      "source": "MyTestPersonTable",
      "permissions": [
        {
          "actions": ["*"],
          "role": "anonymous"
        }
      ]
    }
  }
}

Sonraki adıma geçmeden önce, yapılandırma dosyasının farklı yönlerini açıklayan aşağıdaki tabloyu gözden geçirin. Yapılandırma dosyasıyla ilgili tüm belgeler için Data API Builder belgelerine bakın.

Özellik	Açıklama
Veritabanı bağlantısı	Geliştirme aşamasında çalışma zamanı, yapılandırma dosyasındaki bağlantı dizesi değerinden bağlantı dizesi okur. bağlantı dizesi doğrudan yapılandırma dosyasında belirtebilirsiniz ancak en iyi yöntem bağlantı dizesi yerel bir ortam değişkeninde depolamaktır. Gösterimi aracılığıyla yapılandırma dosyasındaki ortam değişkeni değerlerine `@env('DATABASE_CONNECTION_STRING')` başvurabilirsiniz. bağlantı dizesi değerinin üzerine, veritabanınızı bağladığınızda toplanan bilgilerle dağıtılan site için Statik Web Uygulamaları tarafından yazılır.
API uç noktası	REST uç noktası üzerinden `/data-api/rest` kullanılabilirken GraphQL uç noktası bu yapılandırma dosyasında yapılandırıldığı gibi üzerinden `/data-api/graphql` kullanılabilir. REST ve GraphQL yollarını yapılandırabilirsiniz, ancak `/data-api` ön ek yapılandırılamaz.
API Güvenliği	Ayarlar, `runtime.host.cors` API'ye istekte bulunabilecek izin verilen kaynakları tanımlamanıza olanak sağlar. Bu durumda, yapılandırma bir geliştirme ortamını yansıtır ve konumu izin http://localhost:4280 verilenler listesine ekler.
Varlık modeli	REST API'deki yollar aracılığıyla veya GraphQL şemasındaki türler olarak kullanıma sunulan varlıkları tanımlar. Bu durumda, Kişi adı, veritabanı şeması ve tablo eşlemesi iken `entities.<NAME>.source` uç noktaya gösterilen addır. API uç noktası adının tablo adıyla aynı olması gerekmeyen noktalara dikkat edin.
Varlık güvenliği	Dizide `entity.<NAME>.permissions` listelenen izin kuralları, bir varlığın yetkilendirme ayarlarını denetler. Rolleri olan bir varlığın güvenliğini, rollerle yolları güvenli hale getirme yönteminizle aynı şekilde sağlayabilirsiniz.

Dekont

Sitenizi dağıttığınızda yapılandırma dosyasının connection-string, host.modeve graphql.allow-introspection özelliklerinin üzerine yazılır. Veritabanınızı Statik Web Apps kaynağınıza bağladığınızda toplanan kimlik doğrulama ayrıntılarıyla bağlantı dizesi üzerine yazılır. host.mode özelliği olarakproductiongraphql.allow-introspection, özelliği ise olarak falseayarlanır. Bu geçersiz kılmalar, geliştirme ve üretim iş yükleriniz genelinde yapılandırma dosyalarınızda tutarlılık sağlarken, veritabanı bağlantıları etkinleştirilmiş Statik Web Apps kaynağınızın güvenli ve üretime hazır olmasını sağlar.

Statik web uygulaması veritabanına bağlanacak şekilde yapılandırıldığında bağlantıyı doğrulayabilirsiniz.

Giriş sayfasını güncelleştirme

index.html dosyasındaki body etiketler arasındaki işaretlemeyi aşağıdaki HTML ile değiştirin.

<h1>Static Web Apps Database Connections</h1>
<blockquote>
    Open the console in the browser developer tools to see the API responses.
</blockquote>
<div>
    <button id="list" onclick="list()">List</button>
    <button id="get" onclick="get()">Get</button>
    <button id="update" onclick="update()">Update</button>
    <button id="create" onclick="create()">Create</button>
    <button id="delete" onclick="del()">Delete</button>
</div>
<script>
    // add JavaScript here
</script>

Uygulamayı yerel olarak başlatma

Artık web sitenizi çalıştırabilir ve veritabanındaki verileri doğrudan işleyebilirsiniz.

Veritabanı yapılandırmasıyla statik web uygulamasını başlatın.
```
swa start --data-api-location swa-db-connections
```

CLI başlatıldığından, staticwebapp.database.config.json dosyasında tanımlandığı gibi uç noktalar aracılığıyla veritabanınıza erişebilirsiniz.

Uç http://localhost:4280/data-api/rest/<ENTITY_NAME> nokta , PUTve POST kabul eder GETve DELETE veritabanındaki verileri işlemeyi istemektedir.

Uç http://localhost:4280/data-api/graphql nokta GraphQL sorgularını ve mutasyonlarını kabul eder.

Verileri işleme

Aşağıdaki framework-agnostic komutları veritabanınızda tam CRUD işlemlerinin nasıl yapılacağını gösterir.

Her işlevin çıkışı tarayıcının konsol penceresinde görüntülenir.

CMD/CTRL + SHIFT + I tuşlarına basarak geliştirici araçlarını açın ve Konsol sekmesini seçin.

Tüm öğeleri listeleme

index.html dosyasındaki script etiketler arasına aşağıdaki kodu ekleyin.

async function list() {
  const endpoint = '/data-api/rest/Person';
  const response = await fetch(endpoint);
  const data = await response.json();
  console.table(data.value);
}

Bu örnekte:

API için fetch varsayılan istek fiilini GETkullanır.
Yanıt yükündeki veriler özelliğinde value bulunur.

async function list() {

  const query = `
      {
        people {
          items {
            Id
            Name
          }
        }
      }`;

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ query: query })
  });
  const result = await response.json();
  console.table(result.data.people.items);
}

Bu örnekte:

GraphQL sorgusu veritabanından Id ve Name alanlarını seçer.
Sunucuya geçirilen istek, özelliğin query sorgu tanımını barındırdığı bir yük gerektirir.
Yanıt yükündeki veriler özelliğinde data.people.items bulunur.

Sayfayı yenileyin ve Liste düğmesini seçin.

Tarayıcının konsol penceresinde artık veritabanındaki tüm kayıtları listeleyen bir tablo görüntülenir.

Kimlik	Ad
Kategori 1	Güneşli
2	Dheeraj

İşte tarayıcınızda nasıl görünmesi gerektiğinin ekran görüntüsü.

Web browser showing results from a database selection in the developer tools console window.

Kimliğe göre alma

index.html dosyasındaki script etiketler arasına aşağıdaki kodu ekleyin.

async function get() {
  const id = 1;
  const endpoint = `/data-api/rest/Person/Id`;
  const response = await fetch(`${endpoint}/${id}`);
  const result = await response.json();
  console.table(result.value);
}

Bu örnekte:

Uç nokta ile /person/Idson eklenmiştir.
Kimlik değeri uç nokta konumunun sonuna eklenir.
Yanıt yükündeki veriler özelliğinde value bulunur.

async function get() {

  const id = 1;

  const gql = `
    query getById($id: Int!) {
      person_by_pk(Id: $id) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
    },
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query),
  });
  const result = await response.json();
  console.table(result.data.person_by_pk);
}

Bu örnekte:

GraphQL sorgusu veritabanından Id ve Name alanlarını seçer.
Sunucuya geçirilen istek, özelliğin query sorgu tanımını barındırdığı bir yük gerektirir.
Yanıt yükündeki veriler özelliğinde data.person_by_pk bulunur.

Sayfayı yenileyin ve Al düğmesini seçin.

Tarayıcının konsol penceresinde artık veritabanından istenen tek kaydın listelendiği bir tablo görüntülenir.

Kimlik	Ad
Kategori 1	Güneşli

Güncelleştir

index.html dosyasındaki script etiketler arasına aşağıdaki kodu ekleyin.

Statik Web Uygulamaları hem hem PATCH de fiillerini PUT destekler. İstek PUT kaydın tamamını güncelleştirirken PATCH kısmi bir güncelleştirme yapar.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

Bu örnekte:

Uç nokta ile /person/Id/son eklenmiştir.
Kimlik değeri uç nokta konumunun sonuna eklenir.
REST fiili, veritabanı kaydını güncelleştirmektir PUT .
Yanıt yükündeki veriler özelliğinde value bulunur.

async function update() {

  const id = 1;
  const data = {
    Name: "Molly"
  };

  const gql = `
    mutation update($id: Int!, $item: UpdatePersonInput!) {
      updatePerson(Id: $id, item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id,
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const res = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await res.json();
  console.table(result.data.updatePerson);
}

Bu örnekte:

GraphQL sorgusu veritabanından Id ve Name alanlarını seçer.
query nesnesi özelliğinde GraphQL sorgusunu query tutar.
GraphQL işlevine bağımsız değişken değerleri özelliği aracılığıyla query.variables geçirilir.
Sunucuya geçirilen istek, özelliğin query sorgu tanımını barındırdığı bir yük gerektirir.
Yanıt yükündeki veriler özelliğinde data.updatePerson bulunur.

Sayfayı yenileyin ve Güncelleştir düğmesini seçin.

Tarayıcının konsol penceresinde artık güncelleştirilmiş verileri gösteren bir tablo görüntülenir.

Kimlik	Ad
Kategori 1	Molly

Oluşturma

index.html dosyasındaki script etiketler arasına aşağıdaki kodu ekleyin.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const endpoint = `/data-api/rest/Person/`;
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data)
  });
  const result = await response.json();
  console.table(result.value);
}

Bu örnekte:

Uç nokta ile /person/son eklenmiştir.
REST fiili, veritabanı kaydı eklemektir POST .
Yanıt yükündeki veriler özelliğinde value bulunur.

async function create() {

  const data = {
    Name: "Pedro"
  };

  const gql = `
    mutation create($item: CreatePersonInput!) {
      createPerson(item: $item) {
        Id
        Name
      }
    }`;

  const query = {
    query: gql,
    variables: {
      item: data
    } 
  };

  const endpoint = "/data-api/graphql";
  const result = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const response = await result.json();
  console.table(response.data.createPerson);
}

Bu örnekte:

GraphQL sorgusu veritabanından Id ve Name alanlarını seçer.
query nesnesi özelliğinde GraphQL sorgusunu query tutar.
GraphQL işlevine bağımsız değişken değerleri özelliği aracılığıyla query.variables geçirilir.
Sunucuya geçirilen istek, özelliğin query sorgu tanımını barındırdığı bir yük gerektirir.
Yanıt yükündeki veriler özelliğinde data.updatePerson bulunur.

Sayfayı yenileyin ve Oluştur düğmesini seçin.

Tarayıcının konsol penceresinde artık veritabanındaki yeni kaydı gösteren bir tablo görüntülenir.

Kimlik	Ad
3	Pedro

Silme

index.html dosyasındaki script etiketler arasına aşağıdaki kodu ekleyin.

async function del() {
  const id = 3;
  const endpoint = '/data-api/rest/Person/Id';
  const response = await fetch(`${endpoint}/${id}`, {
    method: "DELETE"
  });
  if(response.ok) {
    console.log(`Record deleted: ${ id }`)
  } else {
    console.log(response);
  }
}

Bu örnekte:

Uç nokta ile /person/Id/son eklenmiştir.
Kimlik değeri uç nokta konumunun sonuna eklenir.
REST fiili, veritabanı kaydını kaldırmaktır DELETE .
Silme işlemi başarılı olursa yanıt yükü ok özelliği olur true.

async function del() {

  const id = 3;

  const gql = `
    mutation del($id: Int!) {
      deletePerson(Id: $id) {
        Id
      }
    }`;

  const query = {
    query: gql,
    variables: {
      id: id
    }
  };

  const endpoint = "/data-api/graphql";
  const response = await fetch(endpoint, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(query)
  });

  const result = await response.json();
  console.log(`Record deleted: ${ result.data.deletePerson.Id }`);
}

Bu örnekte:

GraphQL sorgusu, alanı veritabanından seçer Id .
query nesnesi özelliğinde GraphQL sorgusunu query tutar.
GraphQL işlevine bağımsız değişken değerleri özelliği aracılığıyla query.variables geçirilir.
Sunucuya geçirilen istek, özelliğin query sorgu tanımını barındırdığı bir yük gerektirir.
Yanıt yükündeki veriler özelliğinde data.deletePerson bulunur.

Sayfayı yenileyin ve Sil düğmesini seçin.

Tarayıcının konsol penceresinde artık silme isteğinden gelen yanıtı gösteren bir tablo görüntülenir.

Kayıt silindi: 3

Artık sitenizle yerel olarak çalıştığınıza göre, artık bunu Azure'a dağıtabilirsiniz.

Sitenizi dağıtma

Bu siteyi üretim ortamına dağıtmak için yapılandırma dosyasını işlemeniz ve değişikliklerinizi sunucuya göndermeniz yeterlidir.

İzlemek için dosya değişikliklerini ekleyin.
```
git add .
```

Yapılandırma değişikliklerini işleme.

git commit -am "Add database configuration"

Değişikliklerinizi sunucuya gönderme.
```
git push origin main
```

Veritabanını statik web uygulamanıza Bağlan

Sitenizin Statik Web Apps örneği ile veritabanınız arasında bağlantı oluşturmak için aşağıdaki adımları kullanın.

Statik web uygulamanızı Azure portalında açın.
Ayarlar bölümünde Veritabanı bağlantısı'nı seçin.
Üretim bölümünün altında Var olan veritabanını bağla bağlantısını seçin.

Var olan veritabanını bağla penceresinde aşağıdaki değerleri girin:

Özellik	Değer
Veritabanı Türü	Açılan listeden veritabanı türünüzü seçin.
Abonelik	Açılan listeden Azure aboneliğinizi seçin.
Kaynak Adı	İstediğiniz veritabanını içeren veritabanı sunucusu adını seçin.
Veritabanı Adı	Statik web uygulamanıza bağlamak istediğiniz veritabanının adını seçin.
Kimlik Doğrulaması Türü	Bağlan ion dizesini seçin ve MySQL kullanıcı adını ve parolasını girin.

Tamam'ı seçin.

Veritabanınızın Statik Web Apps kaynağınıza bağlı olduğunu doğrulayın

Veritabanınızı statik web uygulamanıza bağladıktan ve sitenin oluşturulması tamamlandıktan sonra, veritabanı bağlantısını doğrulamak için aşağıdaki adımları kullanın.

Statik web uygulamanızı Azure portalında açın.
Temel Bileşenler bölümünde Statik Web Apps kaynağınızın URL'sini seçerek statik web uygulamanıza gidin.
Tüm öğeleri listelemek için Listele düğmesini seçin.

Çıktı, bu ekran görüntüsünde gösterilene benzemelidir.

Kaynakları temizleme

Bu öğretici sırasında oluşturulan kaynakları kaldırmak istiyorsanız veritabanının bağlantısını kaldırmanız ve örnek verileri kaldırmanız gerekir.

Veritabanının bağlantısını kaldırma: Statik web uygulamanızı Azure portalında açın. Ayarlar bölümünde Veritabanı bağlantısı'nı seçin. Bağlı veritabanının yanında Ayrıntıları görüntüle'yi seçin. Veritabanı bağlantısı ayrıntıları penceresinde Bağlantıyı Kaldır düğmesini seçin.
Örnek verileri kaldırma: Veritabanınızda adlı MyTestPersonTabletabloyu silin.

Sonraki adımlar

API ekleme

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2023-10-18

Aracılığıyla paylaş

Öğretici: Azure Static Web Apps'te MySQL veritabanı bağlantısı ekleme (önizleme)

Ön koşullar

Veritabanı bağlantısını yapılandırma

Yerel geliştirme için veritabanı bağlantı dizesi alma

Örnek veri oluşturma

Statik web uygulamasını yapılandırma

Veritabanı yapılandırma dosyasını oluşturma

Giriş sayfasını güncelleştirme

Uygulamayı yerel olarak başlatma

Verileri işleme

Tüm öğeleri listeleme

Kimliğe göre alma

Güncelleştir

Oluşturma

Silme

Sitenizi dağıtma

Veritabanını statik web uygulamanıza Bağlan

Veritabanınızın Statik Web Apps kaynağınıza bağlı olduğunu doğrulayın

Kaynakları temizleme

Sonraki adımlar

Geri Bildirim

Ek kaynaklar