Статьи

Функции Azure. Часть 2. Обслуживание страниц HTML с помощью функций Azure

Ноябрь 30, 2018

Предыдущее руководство. Функции Azure. Часть 1. Начало работы

В последнем уроке мы создали простую функцию Azure, которая возвращала значение. Я собираюсь улучшить этот проект и вернуть HTML-страницу из функции. Поскольку это оказалось намного проще, чем я, я приправил это, добавив не только один способ, но и три различных способа возврата веб-страницы — во-первых, статическую жестко закодированную страницу; во-вторых, страница, которая хранится как часть кода функции Azure; и в-третьих, страница, которая хранится в BLOB-объекте хранилища Azure.

Мы начнем с простой C # Azure Function без аутентификации, как в прошлый раз. Я назову это «HelloWorldHTML». Если вы следите за мной, это то, что вы должны иметь на своем экране:

Давайте начнем с возврата статической жестко закодированной страницы. Просто удалите весь код в функции и замените его следующим кодом:

01
02
03
04
05
06
07
08
09
10
11
12
using System.Net;
using System.Net.Http.Headers;
 
public static async Task<HttpResponseMessage> Run(HttpRequestMessage req, TraceWriter log)
{
  log.Info("C# HTTP trigger function processed a request.");
   
  // Option 1, coded HTML
  var response = req.CreateResponse(HttpStatusCode.OK, "Hello ");
  response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
  return response;
}

Как я уже сказал, очень просто. Здесь есть две новые вещи. Во-первых, нам нужно объявить, что мы используем пространство имен System.Net.Http.Headers потому что мы MediaTypeHeaderValue классом MediaTypeHeaderValue в этом пространстве имен. Во-вторых, мы добавляем в запрос заголовок ContentType , который сообщает браузеру, что мы возвращаем HTML, и должен его арендовать как таковой. Сохраните функцию и нажмите ссылку «Получить URL-адрес функции», чтобы получить прямой URL-адрес функции, откройте новое окно браузера и вставьте URL-адрес функции. Вы должны увидеть эту красивую HTML-страницу в окне вашего браузера:

Очевидно, вы можете вернуть любой HTML здесь, но, поскольку я ленив, это то, что я сделал :-).

Второй вариант — создать HTML-файл в коде функции и загрузить его оттуда. Чтобы создать новый файл, нажмите на текст «Просмотр файлов» в правой части экрана, чтобы открыть файлы, которые составляют функцию:

Это открывает список, как показано ниже:

Вы можете добавить новый файл или загрузить существующий. Я нажму «Добавить» и создам новый файл с именем «hello.html». Ваш список должен выглядеть так:

Давайте добавим простой HTML-код в этот файл, например так:

1
2
3
4
5
6
7
8
<html>
  <head>
    <title>Hello</title>
  </head>
  <body>
    World
  </body>
</html>

Сохраните файл и вернитесь в файл run.csx где находится код функции. Прокомментируйте исходный код (все, что ниже «Варианта 1») и добавьте следующий код:

1
2
3
4
5
6
// Option 2, read from local file
var response = new HttpResponseMessage(HttpStatusCode.OK);
var stream = new FileStream(@"d:\home\site\wwwroot\HelloWorldHTML\hello.html", FileMode.Open);
response.Content = new StreamContent(stream);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return response;

Мы читаем файл из локального хранилища, используя Stream , и устанавливаем этот файл как ответ на запрос. Нам все еще нужно сообщить браузеру, что контент — это HTML, в противном случае он может решить интерпретировать его как что-то еще (как в предыдущем уроке). Сохраните файл и снова перейдите к URL-адресу функции. Теперь вы должны увидеть эту красивую веб-страницу:

Выглядит иначе, чем предыдущий справа, один? Это означает, что код работает :-).

Теперь третий и последний вариант. Я не буду вдаваться в подробности о том, как создать BLOB-объект хранилища Azure и как загрузить файл в это хранилище, поэтому я оставлю это вам для изучения (типичное предложение моих профессоров, когда им нужно было объяснить что-то длинное и утомительное на уроке, но лень это делать…). Я просто предполагаю, что вы его создали, у вас есть контейнер BLOB-объектов с именем «site», где у вас есть файл с именем «hello.html», и что вы знаете, как извлечь строку подключения для учетной записи хранения. Много предположений, но именно так вы двигаетесь вперед.

Возвращаясь к коду, измените первую часть файла (раздел импорта) следующим образом:

1
2
3
4
5
6
#r "Microsoft.WindowsAzure.Storage"
 
using System.Net;
using System.Net.Http.Headers;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;

Первая строка сообщает среде выполнения функции Azure, что эта функция ссылается на внешнюю сборку (библиотеку классов), которая не является частью стандартной среды выполнения. Хранилище Azure — это одна из специальных сборок, на которую можно ссылаться по имени без дополнительной работы, но в случае, если вам нужно сослаться на другие сборки, это также возможно, как описано здесь . Затем мы также заявляем, что используем пространства имен Microsoft.WindowsAzure.Storage и Microsoft.WindowsAzure.Storage.Blob , поэтому наш код выглядит лучше.

Теперь закомментируйте весь код ниже «Вариант 2» в вашем файле функций и добавьте следующий код:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// Option 3, read from external blob
var storageAccount = CloudStorageAccount.Parse("<your azure storage connection string>");
var blobClient = storageAccount.CreateCloudBlobClient();
var container = blobClient.GetContainerReference("site");
var blob = container.GetBlockBlobReference("hello.html");
string text = "";
using (var memoryStream = new MemoryStream())
{
  blob.DownloadToStream(memoryStream);
  text = System.Text.Encoding.UTF8.GetString(memoryStream.ToArray());
}
var response = req.CreateResponse(HttpStatusCode.OK);
response.Content = new StringContent(text);
response.Content.Headers.ContentType = new MediaTypeHeaderValue("text/html");
return response;

Этот код подключается к учетной записи хранения Azure с помощью CloudBlobClient , получает контейнер BLOB- CloudBlobClient с именем «site», а из контейнера — файл. Мы загружаем файл в MemoryStream и делаем Stream содержимым ответа функции. Теперь сохраните файл и снова перейдите к конечной точке URL-адреса функции. Вы должны увидеть что-то вроде этого:

Круто, верно? WordPress остерегайтесь, мы прямо за вами :-).

Надеюсь, вам понравился этот урок, и надеюсь, что вы узнали столько же, сколько я. У меня есть некоторые идеи о том, куда идти дальше, но я рад изучить больше вещей, поэтому оставьте свои идеи в комментариях, и я посмотрю, что я могу сделать.

Желаю вам удачного дня & # 55357; & # 56898;

См. Оригинальную статью здесь: Функции Azure. Часть 2. Обслуживание страниц HTML с помощью функций Azure.

Мнения, высказанные участниками Java Code Geeks, являются их собственными.

35
Share: