LoginSignup
5
6

More than 5 years have passed since last update.

Azure WebApp + PHP + BLOBストレージで、ファイルアップロード

Last updated at Posted at 2018-04-23

FNCT創造工学演習、予備実験向けにハンズオンを作成しました。

ストレージアカウント作成

スクリーンショット 2018-04-24 0.05.19.png
Microsoft Azureポータルにログインして、+リソースの作成Storageストレージ アカウントを選択する

スクリーンショット 2018-04-24 0.09.25.png
適切な名前を入力し、アカウントの種類にBLOBストレージ、レプリケーションにローカル冗長ストレージを選択する。
またリソースグループは、適切なものを選択(または作成)しておく。

コンテナ作成

スクリーンショット 2018-04-24 1.05.25.png
ストレージアカウント→概要BLOBをクリックする。

スクリーンショット 2018-04-24 1.06.00.png
新しいコンテナーから、名前にcontainer1を入力、パブリックアクセスレベルにコンテナーを選択し、作成ボタンをクリックする。

WebApp作成

スクリーンショット 2018-04-24 0.14.37.png
WebAppを作成する。
App Serviceプランで適切なプランを選択しておくことを忘れずに。

スクリーンショット 2018-04-24 0.22.29.png
WebAppメニューを下にスクロールして、App Service Editor移動をクリックし、App Service Editor(ブラウザ内開発環境)を開いておく。

composer.phar

https://getcomposer.org/download/Latest Snapshotリンクからcomposer.pherをダウンロードし、App Service Editorを使ってWebAppのルートフォルダにアップロードしておく(ドラッグ アンド ドロップでアップロードできる)。

composer.json

composer.json
{
   "require": {
     "microsoft/windowsazure": "^0.4"
   }
}

同ルートフォルダに、上記の内容でcomposer.jsonを作成する。

Azureのライブラリをインストールする

スクリーンショット 2018-04-24 0.37.32.png
上記2項目で用意したファイルを利用して、Azureのライブラリをインストールする。
App Service EditorのメニューからOpen Consoleを選択し、php composer.phar installを実行する。しばらく時間がかかるので、少々お待ちを。。。

ソース記述

Web Appルートフォルダに下記2ファイルを作成する。

index.html
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <form method="post" action="upload.php" enctype="multipart/form-data">
        ファイル:<input type="file" name="up_file"><br>
        <input type="submit" value="upload">
    </form>
</body>
</html>
upload.php
<html>
    <body>
<?php
    require_once 'vendor/autoload.php';

    use WindowsAzure\Common\ServicesBuilder;
    use MicrosoftAzure\Storage\Common\ServiceException; 

    // 接続
    $connectionString = "******";
    $blobRestProxy = ServicesBuilder::getInstance()->createBlobService($connectionString);

    // アップロード
    $tempFileName = $_FILES["up_file"]["tmp_name"];
    $originalFileName = $_FILES["up_file"]["name"];

    if( is_uploaded_file( $tempFileName ) )
    {
        $content = fopen( $tempFileName, "r" );
        $blobRestProxy->createBlockBlob( "container1", $originalFileName, $content );

        echo "uploaded<br />"; 
    }

    echo "OK<br />";    
?>
    </body>
</html>

コード中の$connectionString = "******";の部分には、ストレージアカウントのメニューからアクセスキーkey1接続文字列をコピーする。
ただし末尾のEndpointSuffix=*****部分は実行時にエラーになるため、貼り付けたあと削除すること。***==;までを残す。
スクリーンショット 2018-04-24 0.47.09.png

動作確認

作成したWeb Appにブラウザからアクセスすると、下記Webページが表示される。
スクリーンショット 2018-04-24 0.53.55.png

適当なファイルを選択してuploadボタンをクリックすると、アップロードが完了する。
アップロード後のページはこちら。uploadedOKが表示されることを確認。
スクリーンショット 2018-04-24 10.09.13.png

またAzureポータルからストレージアカウントを表示すると、アップロードされたファイルが確認できる。
スクリーンショット 2018-04-24 10.11.04.png

ストレージのファイル一覧を表示

upload.php
    // リスト
    $blob_list = $blobRestProxy->listBlobs("container1");
    $blobs = $blob_list->getBlobs();

    foreach($blobs as $blob)
    {
        echo "<a href='".$blob->getUrl()."' target='_blank'>". $blob->getName()."</a><br />";
    }           

上記で作成したupload.php// アップロードの一連の処理のあとに、上記コードを追加する。
アップロードされたファイル一覧が表示される。

content-typeを設定

このままでは適切にcontent-typeが設定されておらず、例えば画像ファイルでもブラウザで表示されるダウンロードされるなど意図しない挙動になる恐れがある(ブラウザによる)。

upload.php
 use WindowsAzure\Common\ServicesBuilder;
 use MicrosoftAzure\Storage\Blob\Models\CreateBlobOptions; // この行を追加
 use MicrosoftAzure\Storage\Common\ServiceException; 

// ...

$content = fopen( $tempFileName, "r" );
$options = new CreateBlobOptions(); // この行を追加
$options->setBlobContentType($contentType); // この行を追加
$blobRestProxy->createBlockBlob( "container1", $originalFileName, $content, $options ); // 引数に $options を追加

upload.phpを既存のコードのうち、2カ所に上記のようなコードを追加する。
するとアップロード元と同じcontent-typeが設定され、適切な挙動が期待できるようになる。

5
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
6