Upload Azure Depolama bloba depolama

Makale
12/03/2021
Okumak için 10 dakika

Azure Depolama React @azure/storage-blob npm paketini kullanarak azure Depolama blob'a görüntü dosyası yüklemek için istemci tarafı @azure uygulaması kullanın.

TypeScript programlama işi sizin için yapılır. Bu öğreticide, Azure uzantılarıyla yerel ve uzak Azure ortamlarının içinden başarıyla Visual Studio Code odaklanmaktadır.

Uygulama mimarisi ve işlevselliği

Bu makale JavaScript geliştiricileri için en önemli Azure görevlerini içerir:

Visual Studio Code ile React/TypeScript uygulamasını yerel olarak Visual Studio Code
Azure Blob Depolama oluşturma ve dosya yüklemeleri için yapılandırma
- CORS Yapılandırma
- Paylaşılan erişim imzaları (SAS) belirteci oluşturma
Hizmette kimlik doğrulaması yapmak için SAS belirteci kullanmak üzere Azure SDK istemci kitaplığı kodunu yapılandırma

üzerinde React örnek uygulama GitHubaşağıdaki öğelerden oluşur:

React 3000 üzerinde barındırılan uygulama
Bloblara yüklemek için Azure SDK istemci Depolama betiği

Azure React bloblara bağlı basit Depolama uygulama.

1. Geliştirme ortamını ayarlama

Etkin aboneliği olan bir Azure kullanıcı hesabı. Ücretsiz bir tane oluşturun.
Node.js makinenize yüklenmiş NPMNode.js LTS'yi yükleyin.
Visual Studio Code makinenize yüklenir.
Visual Studio Code uzantıları:
- Azure Kaynağı
- Azure Depolama - Kaynak Depolama için kullanılır
- Azure Static Web Apps - React uygulamasını oluşturmak ve Azure'a dağıtmak için kullanılır

2. Örnek uygulamanın fork ve clone

Bu GitHub url'sini bir web tarayıcısında açın:

https://github.com/Azure-Samples/js-e2e-browser-file-upload-storage-blob

Bu örnek projenin kendi fork'larınızı oluşturmak için Fork'ı seçin. Bu örneği GitHub azure'a statik bir web uygulaması olarak dağıtmak için kendi GitHub kendi çalışma alanlarınızı oluşturmanız gerekir.
Kod düğmesini seçin ve URL'yi kopyala'ya tıklayın.
Bash terminalinde, kendi hesap adınızla değiştirerek, GitHub REPLACE-WITH-YOUR-ACCOUNT-NAME depoyu klonlamanız gerekir:
```
git clone https://github.com/REPLACE-WITH-YOUR-ACCOUNT-NAME/js-e2e-browser-file-upload-storage-blob
```

Yeni dizine Visual Studio Code.

cd js-e2e-browser-file-upload-storage-blob && code .

3. Bağımlılıkları yükleme ve yerel projeyi çalıştırma

Bu Visual Studio Code CtrlShift ile tümleşik bash terminali açın ve aşağıdaki komutu çalıştırarak ` örneğin bağımlılıklarını yükleyin.
```
npm install
```
Aynı terminal penceresinde komutunu çalıştırarak web uygulamasını çalıştırın.
```
npm start
```
Bir web tarayıcısı açın ve web uygulamasını yerel bilgisayarınızda görüntülemek için aşağıdaki URL'yi kullanın.
```
http://localhost:3000/
```
Tarayıcınızda uygulamanın yapılandırılmamış olduğu metinle birlikte basit bir web Depolama görüyorsanız öğreticinin bu bölümünde başarılı oldunız.
Terminalde CtrlC tuşlarıyla Visual Studio Code durdurun.

4. Depolama uzantısıyla Visual Studio oluşturma

Azure Depolama gidin. Aboneliğe sağ tıklayın ve öğesini Create Storage Account... seçin.

Kaynak kaynağınızı oluşturma hakkında bilgi için aşağıdaki tabloyu kullanarak Depolama izleyin.

Özellik	Değer
Yeni web uygulaması için genel olarak benzersiz bir ad girin.	Kaynak adınız için `fileuploaddemo` gibi bir Depolama girin. Bu benzersiz ad, sonraki bölümde kullanılan kaynak adınızdır. En fazla 24 karakter uzunluğunda olacak şekilde yalnızca karakter ve sayı kullanın. Daha sonra kullanmak için bu hesap adına ihtiyacınız vardır.

Uygulama oluşturma işlemi tamamlandığında, yeni kaynak hakkında bilgi ile birlikte bir bildirim görüntülenir.

5. Paylaşılan erişim imzanız (SAS) belirtecnizi oluşturma

CORS'u yapılandırmadan önce SAS belirteci oluşturma.

Yeni Visual Studio Code uzantısında Depolama sağ tıklayın ve Portalda Aç'ı seçin. Bu işlem Azure portal kaynağınıza Depolama açar.
Güvenlik + ağ bölümünde Paylaşılan erişim imzası'ı seçin.

SAS belirteci aşağıdaki ayarlarla yapılandırabilirsiniz.

Özellik	Değer
İzin verilen hizmetler	Blob
İzin verilen kaynak türleri	Hizmet, Kapsayıcı, Nesne
İzin verilen izinler	Okuma, yazma, silme, listele, ekle, oluştur
Blob sürümü izinleri	İşaretli
Blob dizini izinlerine izin ver	Okuma/Yazma ve Filtre denetlenir
Başlangıç ve sona erme tarihi/saati	Başlangıç tarihi/saati kabul edin ve bitiş tarihi saatlerini gelecekte 24 saat olarak ayarlayın. SAS belirtecin yalnızca 24 saat için iyidir.
Yalnızca HTTPS	Seçili
Tercih edilen yönlendirme katmanı	Temel
İmzalama Anahtarı	key1 seçildi

SAS belirteci görüntüde olduğu gibi yapılandırma. Ayarlar görüntünün altında açıklanmıştır.

SAS'yi ve bağlantı dizesini oluştur’u seçin.
SAS belirteci hemen kopyalayın. Bu belirteci listeleyesiniz, dolayısıyla kopyalanmazsa yeni bir SAS belirteci oluşturabilirsiniz.

6. .env dosyasında Depolama değerleri ayarlama

SAS belirteci, bulut tabanlı kaynağınıza sorgular yapılırken kullanılır.

Projenin kökünde .env bir dosya adı oluşturun.
Depolama değerleriyle birlikte iki gerekli değişken ekleyin:
```
REACT_APP_STORAGESASTOKEN=
REACT_APP_STORAGERESOURCENAME=
```
React, statik dosyaları bu değişkenlerle derlemez.
Belirteç bir soru işaretiyle başlıyorsa, işaretini ? kaldırın. Kod dosyası size ? sağlar, bu nedenle belirteçte buna ihtiyacınız yok.

7. Azure kaynak kaynağı için CORS Depolama yapılandırma

İstemci tarafı kodunun depolama hesabınıza erişe React kaynağınız için CORS'yi yapılandırma.

Azure portallarındayken, kaynak paylaşımı Ayarlar (CORS) öğesini seçin.

Blob hizmeti CORS'lerini görüntüde olduğu gibi yapılandırma. Ayarlar görüntünün altında açıklanmıştır.

Özellik	Değer
İzin verilen çıkış noktaları	`*`
İzin verilen yöntemler	Düzeltme eki dışında hepsi.
İzin verilen üst bilgiler	`*`
Kullanıma sunulan üst bilgiler	`*`
Yaş üst sınırı	86400

CORS'yi görüntüde göster olarak yapılandırma. Ayarlar görüntünün altında açıklanmıştır.

Ayarları kaynağa kaydetmek için ayarların üst tarafından Kaydet'i seçin. Kod, bu CORS ayarlarıyla çalışmak için herhangi bir değişiklik gerektirmez.

8. Bir hesapla bağlantıyı doğrulamak için projeyi Depolama çalıştırma

SAS belirtecin ve depolama hesabı adınız src/azure-storage-blob.ts dosyasında ayarlanır, bu nedenle uygulamayı çalıştırmaya hazırsınız.

Uygulama çalışmıyorsa yeniden başlat:
```
npm start
```
Tarayıcıda aşağıdaki URL'yi açın:

http://localhost:3000
Karşıya yüklemek için images klasörden bir görüntü seçin ve images seçin.
React ön uç istemci kodu, Azure'da kimlik doğrulaması yapmak için ./src/azure-storage-blob.ts dosyasına çağrır, ardından bir Depolama Kapsayıcısı oluşturun (henüz yoksa) dosyayı bu kapsayıcıya yükler.

9. Statik web uygulamasını Azure'a dağıtma

Bu Visual Studio Code Azure gezginini seçin.
Değişikliklerinizi işlemenizi isteyen bir açılır pencere görüyorsanız bunu yapma. Örnek, değişiklik yapmadan dağıtıma hazır olması gerekir.

Değişiklikleri geri almak için Visual Studio Code çubuğundaki Kaynak Denetimi simgesini seçin. Ardından Değişiklikler listesinde değiştirilen her dosyayı seçin ve Değişiklikleri at simgesini seçin.
Abonelik adına sağ tıklayın ve Statik Web Uygulaması Oluştur (Gelişmiş) öğesini seçin.

Aşağıdaki bilgileri sağlamak için istemleri izleyin:

İstem	Enter
Yeni statik web uygulamasının adını girin.	Kaynağınız için benzersiz bir ad oluşturun. Örneğin, gibi bir depo adı için adınız ön uç `upload-file-to-storage` kullanabilirsiniz.
Yeni kaynaklar için bir kaynak grubu seçin.	Depolama kaynağınız için oluşturduğunuz kaynak grubunu kullanın.
SKU seçme	Bu öğretici için ücretsiz SKU'ları seçin. Zaten kullanılan ücretsiz bir Statik Web Uygulaması kaynağınız varsa, sonraki fiyatlandırma katmanını seçin.
Varsayılan proje yapısını yapılandırmak için derleme ön ayarını seçin.	Öğesini React.
Uygulama kodunuzun konumunu seçin	`/` - Package.json dosyasının deponun kökünde olduğunu gösterir.
Kaynak kodunuzun Azure İşlevleri seçin	Varsayılan değeri kabul et. Bu örnek bir API kullanmasa da, daha sonra bir api ekebilirsiniz.
Derleme çıkışının yolunu girin...	`build` Bu, uygulamanın statik (oluşturulan) dosyalarınıza giden yoludur.
Yeni kaynaklar için bir konum seçin.	Size yakın bir bölge seçin.

İşlem tamamlandığında bir bildirim açılır görüntülenir. İş Akışını Görüntüle/Düzenle'yi seçin.

10. Azure Depolama gizli dizilerini GitHub ekleme

Bir web tarayıcısında, iki gizli GitHub değerlerini eklemek için örnek projenin kendi GitHub örneğine geri dönebilirsiniz:
```
https://github.com/YOUR-GITHUB-ACCOUNT/js-e2e-browser-file-upload-storage-blob/settings/secrets/actions
```

11. Depolama kaynağına bağlanmak için statik web uygulamasını yapılandırma

Azure GitHub bağlanmak için iş akışını ve gizli dizileri Depolama.

Bu Visual Studio Code iş akışı YAML dosyasını açın ve bölümünden sonra .github/workflows iki depolama ortamı with değişkenlerini dosyasına build_and_deploy_job ekleyin.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_123456 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
            REACT_APP_STORAGESASTOKEN: ${{secrets.REACT_APP_STORAGESASTOKEN}}
            REACT_APP_STORAGERESOURCENAME: ${{secrets.REACT_APP_STORAGERESOURCENAME}}

Bu işlem gizli dizileri derleme sürecine çeker.

Bu Visual Studio Code, Kaynak Denetimi, CtrlShift G ve ardından değiştirilen *.yml dosyasını eklemek için ekleme simgesini seçin.
Commit'iniz için gibi bir açıklama Adding Storage secrets girin.
Durum çubuğundaki GitHub eşitle simgesini seçerek kendi uygulamanıza bir fork itin.
Uzak depodan itip çekmek istediğinizden emin olmak için açılır pencerede Tamam'ı seçin.

Bu adımda bir hata alırsanız, git uzak dosyanızı kontrol edin ve bunun için fork'larınızı kopyalayın: .
Bu itme, statik web uygulamanız için yeni bir derlemeyi tetikler ve dağıtır.

12. Derleme ve dağıtma işinin tamamlandıktan emin olmak

Web tarayıcısında, örnek projenin GitHub web sitenize geri dönebilirsiniz.
Eylemler'ive ardından CI/CD Azure Static Web Apps eylemlerini seçin.
Sürecin tamamlandıktan sonra derleme ve dağıtma işini seçin.

13. Azure tarafından dağıtılan statik web uygulamasını kullanma

Bu Visual Studio Code Azure gezgininden Statik web uygulamanıza sağ tıklayın ve
Yeni web tarayıcısı penceresinde bir dosya seçin ve dosyayı karşıya yükleyin.

Depolama hesabıyla yerel bağlantı sorunlarını giderme

Bir hata aldıysanız veya dosyanız kapsayıcıya yüklenemediyse, şunları kontrol edin:

SAS belirtecini yeniden oluşturun ve belirtecin kapsayıcı düzeyinde değil Depolama kaynak düzeyinde oluşturulduğundan emin olun. Yeni belirteci doğru konumdaki koda kopyalayın.
Koda kopyalanmış belirteç dizesinin, dizenin ? başındaki (soru işareti) içermesini denetleme.
Kaynak kaynağınız için CORS Depolama doğrulayın.

Upload düğmesi işlevselliği

src/App.tsxTypeScript dosyası, create-react-app ile bu uygulama oluşturma işlemi kapsamında sağlanır. Dosya, dosya seçimi düğmesini ve karşıya yükleme düğmesini ve bu işlevi sağlamak için destekleyen kodu sağlayacak şekilde değiştirilmiştir.

Azure Blob depolamaya bağlanan Depolama vurgulanır. çağrısı, uploadFileToBlob kapsayıcıda yer alan tüm blobları (dosyaları) düz bir liste olarak döndürür. Bu liste işleviyle DisplayImagesFromContainer birlikte görüntülenir.

// ./src/App.tsx

import React, { useState } from 'react';
import Path from 'path';
import uploadFileToBlob, { isStorageConfigured } from './azure-storage-blob';

const storageConfigured = isStorageConfigured();

const App = (): JSX.Element => {
  // all blobs in container
  const [blobList, setBlobList] = useState<string[]>([]);

  // current file to upload into container
  const [fileSelected, setFileSelected] = useState(null);

  // UI/form management
  const [uploading, setUploading] = useState(false);
  const [inputKey, setInputKey] = useState(Math.random().toString(36));

  const onFileChange = (event: any) => {
    // capture file into state
    setFileSelected(event.target.files[0]);
  };

  const onFileUpload = async () => {
    // prepare UI
    setUploading(true);

    // *** UPLOAD TO AZURE STORAGE ***
    const blobsInContainer: string[] = await uploadFileToBlob(fileSelected);

    // prepare UI for results
    setBlobList(blobsInContainer);

    // reset state/form
    setFileSelected(null);
    setUploading(false);
    setInputKey(Math.random().toString(36));
  };

  // display form
  const DisplayForm = () => (
    <div>
      <input type="file" onChange={onFileChange} key={inputKey || ''} />
      <button type="submit" onClick={onFileUpload}>
        Upload!
          </button>
    </div>
  )

  // display file name and image
  const DisplayImagesFromContainer = () => (
    <div>
      <h2>Container items</h2>
      <ul>
        {blobList.map((item) => {
          return (
            <li key={item}>
              <div>
                {Path.basename(item)}
                <br />
                <img src={item} alt={item} height="200" />
              </div>
            </li>
          );
        })}
      </ul>
    </div>
  );

  return (
    <div>
      <h1>Upload file to Azure Blob Storage</h1>
      {storageConfigured && !uploading && DisplayForm()}
      {storageConfigured && uploading && <div>Uploading</div>}
      <hr />
      {storageConfigured && blobList.length > 0 && DisplayImagesFromContainer()}
      {!storageConfigured && <div>Storage is not configured.</div>}
    </div>
  );
};

export default App;

Upload SDK istemci kitaplığıyla azure Depolama blob'a dosya ekleme

Dosyayı Azure Depolama'ye yükleme kodu çerçeveden bağımsızdır. Kod bir öğretici için hazır olduğu için basitlik ve anlama açısından seçimler yapıldı. Bu seçenekler açıklanmıştır; Kasıtlı kullanım, güvenlik ve verimlilik için kendi projenizi gözden geçirmeniz gerekir.

Örnek, genel olarak erişilebilen bir kapsayıcı ve dosya oluşturur ve kullanır. Kendi projeniz içinde dosyalarınızın güvenliğini sağlamak için, kaynağınıza genel kimlik doğrulaması gerektirmeden her blob nesnesinde çok belirli izinlere kadar bunu kontrol etmek için birçok katmanınız vardır.

Bağımlılıklar ve değişkenler

azure-storage-blob.ts TypeScript dosyası bağımlılıkları yükler ve gerekli değişkenleri ortam değişkenleri veya sabit kodlu dizelerle çeker.

Değişken	Açıklama
`sasToken`	ile oluşturulan SAS belirteci Azure portal bir ile `?` oluşturulur. Değişkeninize ayarlamadan önce `sasToken` kaldırın.
`container`	Blob depolamada kapsayıcının adı. Bunu bir dosya sistemi için klasör veya dizinle eşdeğer olarak düşünebilirsiniz.
`storageAccountName`	Kaynak adınız.

// THIS IS SAMPLE CODE ONLY - NOT MEANT FOR PRODUCTION USE
import { BlobServiceClient, ContainerClient} from '@azure/storage-blob';

const containerName = `tutorial-container`;
const sasToken = process.env.REACT_APP_STORAGESASTOKEN;
const storageAccountName = process.env.REACT_APP_STORAGERESOURCENAME;

İstemci Depolama ve adımları yönetme

işlevi, uploadFileToBlob dosyanın ana işlevidir. Depolama hizmeti için istemci nesnesini oluşturur, ardından istemciyi kapsayıcı nesnesine oluşturur, dosyayı karşıya yükler ve ardından kapsayıcıda tüm blobların listesini alır.

const uploadFileToBlob = async (file: File | null): Promise<string[]> => {
  if (!file) return [];

  // get BlobService = notice `?` is pulled out of sasToken - if created in Azure portal
  const blobService = new BlobServiceClient(
    `https://${storageAccountName}.blob.core.windows.net/?${sasToken}`
  );

  // get Container - full public read access
  const containerClient: ContainerClient = blobService.getContainerClient(containerName);
  await containerClient.createIfNotExists({
    access: 'container',
  });

  // upload file
  await createBlobInContainer(containerClient, file);

  // get list of blobs in container
  return getBlobsInContainer(containerClient);
};

Upload bloba

işlevi, createBlobInContainercreateBlobInContainer sınıfı uploadData yöntemini kullanarak dosyayı kapsayıcıya yükler. Resim görüntüleme gibi dosya türüne bağlı olan tarayıcı işlevselliğini kullanmak için içerik türü isteğiyle birlikte gönder gerekir.

const createBlobInContainer = async (containerClient: ContainerClient, file: File) => {
  
  // create blobClient for container
  const blobClient = containerClient.getBlockBlobClient(file.name);

  // set mimetype as determined from browser with file upload control
  const options = { blobHTTPHeaders: { blobContentType: file.type } };

  // upload file
  await blobClient.uploadData(file, options);
}

Blobların listesini al

işlevi getBlobsInContainer kapsayıcıda bloblar için getBlobsInContainer sınıfı listBlobsFlat yöntemini kullanarak URL'lerin listesini alır. URL'ler HTML'de görüntü src görüntüsü olarak kullanılacak şekilde oluşturulur: <img src={item} alt={item} height="200" /> .

// return list of blobs in container to display
const getBlobsInContainer = async (containerClient: ContainerClient) => {
  const returnedBlobUrls: string[] = [];

  // get list of blobs in container
  // eslint-disable-next-line
  for await (const blob of containerClient.listBlobsFlat()) {
    // if image is public, just construct URL
    returnedBlobUrls.push(
      `https://${storageAccountName}.blob.core.windows.net/${containerName}/${blob.name}`
    );
  }

  return returnedBlobUrls;
}

Kaynakları temizleme

Bu Visual Studio Code Kaynak Grupları için Azure gezginini kullanın, kaynak grubunuza sağ tıklayın ve Sil'i seçin.

Bu, kaynak grubunuz ve Statik Web uygulaması Depolama dahil olmak üzere gruptaki tüm kaynakları siler.

Sonraki adımlar

Bu uygulamaya devam etmek için aşağıdaki seçeneklerden birini kullanarak uygulamayı barındırmak için Azure'a dağıtmayı öğrenin:

Upload web uygulaması olarak uygulama
Upload hizmet için uygulama kodu uzantısını Visual Studio web uygulaması kaynağına bağlantı
Upload Azure VM'ye uygulama uygulama
Azure Blob Depolama belgeleri
@azure/storage-blob
- NPM paketi
- Başvuru belgeleri
Azure Statik Web uygulaması