5
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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ポータル](https://portal.azure.com/)にログインして、**+リソースの作成**→**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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?