Azure FunctionsのHTTPトリガーでBlob Storageにある画像を表示する（Azure Functions v1、Python 3.6.1）

Azure FunctionsのHTTPトリガーでBlob Storageにある画像を表示してみましょう。
※Chrome上のAzure Portalの表示がなんか調子悪いのでEdgeでやってます。

## Function Appの作成
[Azure Portal](https://portal.azure.com/)にログインします。
``リソースの作成``からFunction Appを作成します。
![azure01.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/63454522-3376-ce84-17ad-acd7ee1af936.png)

できたら、リソースに移動します。
Pythonでやりたいので、ランタイムバージョンを`~1`に変更します。
<img width="718" alt="azure04.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/053aa4b7-2c61-0e14-dc68-7e9e998e2f93.png">

カスタム関数を作成します。
<img width="677" alt="azure05.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/b728c599-5eb9-e2c7-163a-7567478e88ff.png">

HTTP triggerを選択し、作成します。
<img width="213" alt="azure07.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/41bcd45a-e1f3-6395-a304-497804fca404.png">

[Azure FunctionsでPython3を使う](https://qiita.com/SatoshiGachiFujimoto/items/8e2829394c217d9385be#azure-functions%E3%81%A7python3%E3%82%92%E4%BD%BF%E3%81%86)を参考にPythonの設定をします。

~~~
https://{your-app-name}.scm.azurewebsites.net/DebugConsole
~~~

を開きます。`{your-app-name}`にはFunction Appの名前を入れてください。（例：gachimoto-blob）

下記コマンドでPython3をインストールします。

~~~
> cd D:\home\site\tools
> nuget.exe install -Source https://www.siteextensions.net/api/v2/ -OutputDirectory D:\home\site\tools python361x64
> mv /d/home/site/tools/python361x64.3.6.1.3/content/python361x64/* /d/home/site/tools/
~~~

pipでazure-storageライブラリをインストールしましょう。

~~~
> D:\home\site\tools\python.exe -m pip install azure-storage
~~~

<img width="599" alt="azure11.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/a8013cd2-dc39-0600-f150-b0176e88ae58.png">


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

ストレージアカウントを作成します。
![azure10.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/b78980fd-d166-1a15-0139-649e6919aba4.png)

デプロイが完了したら、リソースへ移動します。
ストレージアカウント名とkey1をメモります。
![azure13.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/14d5ceab-775c-bd8d-8272-e456b09791ee.png)


## コンテナの作成

コンテナを作成します。testという名前のコンテナを作成しました。Blobはアクセスできるようにしています。

<img width="433" alt="azure16.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/1b93dc89-4fc9-ad9b-ed8b-2159b61737bc.png">
<img width="830" alt="azure17.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/6dde5b81-4688-abcd-4624-d879667c640b.png">

## 画像のアップロード

testコンテナへ、`lena.jpg`をアップロードしてみました。
<img width="830" alt="azure17.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/28fad5f0-1dd3-0128-b15b-ccd923c73128.png">

Blobのアクセスを可能にしているので、URLから見れてしまいます。
例：https://{your-storage-account}.blob.core.windows.net/test/lena.jpg
<img width="811" alt="azure24.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/955b47d7-cfe6-15fd-7725-b7b6c10e3a2a.png">

## Function Appの関数作成

画像のアップロードができたら、Function Appに戻ります。

HttpTriggerPython31の内容を次のようにします。

~~~python
import os
import json
from azure.storage.blob import BlockBlobService

account_name='{your-storage-account}'
account_key='{your-storage-account-key}'
container_name='test'

service = BlockBlobService(account_name=account_name,account_key=account_key)
blobs = service.list_blobs(container_name)

files = []
for blob in blobs:
    files.append(blob.name)

def write_http_response(status, body):
    return_dict = {
        "status": status,
        "body": body,
        "headers": {
            "Content-Type": "text/html"
        }
    }
    output = open(os.environ['res'], 'w')
    output.write(json.dumps(return_dict))

write_http_response(200, "<html><h1>" + files[0] + "</h1><img src=" + "\"" + "https://{your-storage-account}.blob.core.windows.net/test/" + files[0] + "\"" + ">" + "</html>")
~~~

`account_name`と`account_key`には、メモったストレージアカウント名とkey1を入れます。

testコンテナの中にあるBlobのリストを取得し、リストの一番最初のファイルのURLをHTMLタグに入れて返しています。

`統合`からHTTPメソッドを`GET`に変更します。
<img width="834" alt="azure22.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/330095e9-e118-3b7c-021d-8b42bf713b9a.png">

`保存および実行`をクリックし、出力が進捗状況200 OKになれば成功です。

~~~
<html><h1>lena.jpg</h1><img src="https://{your-storage-account}.blob.core.windows.net/test/lena.jpg"></html>
~~~

関数のURLを取得し、開いてみましょう。
![azure25.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/bead16a4-957f-39b3-e2e4-a615be29f852.png)

lena.jpgが表示されたらOKです。
<img width="295" alt="azure26.PNG" src="https://qiita-image-store.s3.amazonaws.com/0/63863/2a82c17f-5596-1854-22fd-ee340c2903cf.png">

## まとめ
- Azure Functionsを用いて、Blob Storageの画像を表示しました
- GETでHTMLを返すやつができました
- 次はクエリ文字列つけたり、見れる人制限したり、SAS使ったりしたいですよね？

## 参考文献
- [Content-Typeの一覧](https://qiita.com/AkihiroTakamura/items/b93fbe511465f52bffaa)