.NET での Cloud Storage の使用

.NET Bookshelf チュートリアルのこのパートでは、Cloud Storage 内に画像を保存する方法を説明します。

このページは複数ページからなるチュートリアルの一部です。最初からの説明や設定手順を確認するには、.NET Bookshelf アプリに移動してください。

Cloud Storage バケットの作成

Cloud Storage バケットを作成する手順は次のとおりです。バケットは、Cloud Storage でデータを格納する基本的なコンテナです。

  1. ターミナル ウィンドウで次のコマンドを入力します。

    gsutil mb gs://[YOUR-BUCKET-NAME]

    ここで

    • [YOUR-BUCKET-NAME] は、Cloud Storage バケットの名前を表します。
  2. Bookshelf アプリでアップロードした画像を表示するには、バケットのデフォルトのアクセス制御リスト(ACL)を public-read に設定します。

    gsutil defacl set public-read gs://[YOUR-BUCKET-NAME]

    設定の構成

    1. Visual Studio でサンプルアプリを開くには、getting-started-dotnet\aspnet\3-binary-data ディレクトリで、3-binary-data.sln をダブルクリックします。

    2. [ソリューション エクスプローラ] パネルで、Web.config をクリックします。

    3. Web.config で次の操作を行います。

      1. GoogleCloudSamples:ProjectId に、プロジェクト ID を設定します。

      2. GoogleCloudSamples:BookStore に、このチュートリアルの構造化データの使用で使用したのと同じ値を設定します。

      3. 構造化データの手順で Cloud SQL または SQL Server を使用した場合は、<connectionStrings> XML 要素を見つけ、その手順で使用したのと同じ値を connectionString に設定します。

      4. GoogleCloudSamples:BucketName に、前に作成した Cloud Storage バケットの名前を設定します。

    4. Web.config を保存して閉じます。

    ローカルマシンでのアプリの実行

Visual Studio で F5 キーを押してプロジェクトを実行します。これで、アプリのウェブページを閲覧し、表紙の画像を付けて書籍を追加したり、追加した書籍を編集、削除したりできます。

Compute Engine にアプリをデプロイする

  1. Visual Studio の [ソリューション エクスプローラ] パネルで、3-binary-data を右クリックし、[発行] を選択します。

    アプリを公開

  2. このチュートリアルの Cloud Datastore の使用と同じ手順に従って、新しいカスタム プロファイルを作成します。

  3. [発行] をクリックします。

アプリの構造

バイナリデータの構造の例

このアプリはバイナリデータ(この場合は画像)の格納場所として Cloud Storage を使用します。書籍情報には Cloud Datastore、Cloud SQL、または SQL Server のいずれかの構造化データベースが引き続き使用されます。ブラウザは Cloud Storage から直接、画像を取得します。

コードの説明

このセクションでは、アプリのコードとその動作を順を追って説明します。

ユーザーによるアップロードの処理

ユーザーは、フォームに含まれる新しい <input type="file"> タグを使用して、ファイルをアップロードできます。

<div class="form-group">
    @Html.Label("Cover Image")
    <input type="file" id="image" name="image" value="@Model.Book.ImageUrl" class="form-control">
    @Html.HiddenFor(model => model.Book.ImageUrl)
</div>

Cloud Storage にアップロードする

BooksController.Create() メソッドによって画像がアップロードされます。

// POST: Books/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(Book book, HttpPostedFileBase image)
{
    if (ModelState.IsValid)
    {
        _store.Create(book);
        // If book cover image submitted, save image to Cloud Storage
        if (image != null)
        {
            var imageUrl = await _imageUploader.UploadImage(image, book.Id);
            book.ImageUrl = imageUrl;
            _store.Update(book);
        }
        return RedirectToAction("Details", new { id = book.Id });
    }
    return ViewForm("Create", "Create", book);
}

ImageUploader クラスが Google.Apis.Storage.v1.ClientWrapper.StorageClient API を呼び出し、画像をアップロードします。

_storageClient = StorageClient.Create();
        public async Task<String> UploadImage(HttpPostedFileBase image, long id)
        {
            var imageAcl = PredefinedObjectAcl.PublicRead;

            var imageObject = await _storageClient.UploadObjectAsync(
                bucket: _bucketName,
                objectName: id.ToString(),
                contentType: image.ContentType,
                source: image.InputStream,
                options: new UploadObjectOptions { PredefinedAcl = imageAcl }
            );

            return imageObject.MediaLink;
        }

Cloud Storage から画像を処理する

アプリには画像の公開 URL があるため、画像は簡単に処理できます。Cloud Storage から直接画像を提供すれば、リクエストには Google のグローバル供給インフラストラクチャが使用されるため、アプリが画像のリクエストに応答する必要がなくなります。したがって、CPU サイクルを他のリクエストに割り当てることができます。

<img class="book-image"
     src="@(String.IsNullOrEmpty(Model.ImageUrl) ?
"http://placekitten.com/g/128/192" : Model.ImageUrl)">
このページは役立ちましたか?評価をお願いいたします。