Azure: CDN для WebApp

Автор: | 23/02/2017
Нет комментариев

Задача — поднять Azure CDN (Verizon), и подключить его к Azure WebApp.

Приложение уже создано:

$ azure webapp list -g jm-testing
info:    Executing command webapp list
+ Listing webapps                                                              
data:                                                           
data:    
data:    Web App Name     : jm-wp-vp-test-dev
data:    Enabled          : true
data:    Status           : Running
data:    Last Modified    : 2017-01-30T12:21:03.360Z
data:    Location         : West Europe
data:    App Service Plan : basic-west-europe

Создаём новый CDN профайл:

[simterm]

$ azure cdn profile create -n jm-cdn-test -g jm-testing -l westeurope --sku-name Premium_Verizon

[/simterm]

Тут:

  • -n (--name): имя профайла
  • -g (--resourse-group): имя группы ресурсов, в которую будет задеплоен CDN
  • -l (--location): региональная зона
  • --sku-name: тип CDN-профайла

Проверяем:

[simterm]

$ azure cdn profile show -n jm-cdn-test -g jm-testing
info:    Executing command cdn profile show
+ Get cdn profile jm-cdn-test ...                                              
data:    
data:    Profile name : jm-cdn-test
data:    
data:    Resource Group     : jm-testing
data:    Location           : WestEurope
data:    ResourceState      : Active
data:    ProvisioningState  : Succeeded
data:    Sku                : Premium_Verizon

[/simterm]

Следующим шагом — необходимо добавить Endpoint, который будет указывать на WebApp.

Используем azure cdn endpoint create:

[simterm]

$ azure cdn endpoint create --help
help:    Create endpoint with given name and properties.
help:    
help:    Usage: cdn endpoint create [options] <name> <profile-name> <resource-group> <location> <origin-name> <origin-host-name> [origin-host-header] [origin-path] [content-type-to-compress] [is-compression-enabled] [is-http-allowed] [is-https-allowed] [query-string-caching-behavior]  [http-port] [https-port] [tags]
help:    
help:    Options:
help:      -h, --help                                                           output usage information
help:      -v, --verbose                                                        use verbose output
help:      -vv                                                                  more verbose with debug output
help:      --json                                                               use json output
help:      -n, --name <name>                                                    Name of the endpoint
...

[/simterm]

Вся строка будет выглядеть так:

azure cdn endpoint create --name jm-cdn-test \
--profile-name jm-cdn-test \
--resource-group  jm-testing \
--location westeurope \
--origin-name jm-cdn-test-url \
--origin-host-name jm-wp-dev.azurewebsites.net \
--is-http-allowed true  \
--is-http-allowed true \
--http-port 80 --https-port 443

Тут:

  • --origin-name: имя ендпоинта, которое будет добавлено в его URL в виде <name>.azureedge.net
  • --origin-host-name: имя ресурса, к которому подключается CDN и из которого он будет загружать данные для распросранения в CDN

Выполняем:

[simterm]

$ azure cdn endpoint create --name jm-cdn-test \
> --profile-name jm-cdn-test \
> --resource-group  jm-testing \
> --location westeurope \
> --origin-name jm-cdn-test-url \
> --origin-host-name jm-wp-dev.azurewebsites.net \
> --is-http-allowed true  \
> --is-http-allowed true \
> --http-port 80 --https-port 443
info:    Executing command cdn endpoint create
+ Creating endpoint named jm-cdn-test                                          
data:    
data:    Endpoint name                  : jm-cdn-test
data:    
data:    Profile name                   : jm-cdn-test
data:    Resource Group                 : jm-testing
data:    Location                       : WestEurope
data:    Tags                           :
data:    Host Name                      : jm-cdn-test.azureedge.net
data:    Origin Host Header             : undefined
data:    Origin Path                    : undefined
data:    Content Types To Compress      : 
data:    Is Compression Enabled         : false
data:    Is Http Allowed                : true
data:    Is Https Allowed               : true
data:    Query String Caching Behavior  : NotSet
data:    Origin Names                   : jm-cdn-test-url
data:    OptimizationType               : undefined
data:    Number of geo filters          : 0
data:    Resource State                 : Running
data:    Provisioning State             : Succeeded
data:    
info:    cdn endpoint create command OK

[/simterm]

Проверяем:

[simterm]

$ curl http://jm-cdn-test.azureedge.net/info.php
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
                <title>404 - Not Found</title>
        </head>
        <body>
                <h1>404 - Not Found</h1>
        </body>
</html>

[/simterm]

На обновление данных в сети — может уйти до 90 минут, запускаем на повтор и пьём чай:

[simterm]

$ watch -n 5 curl http://jm-cdn-test.azureedge.net/info.php

[/simterm]

Через какое-то время (около часа) — появилась 404 уже от самого Azure WebApp:

[simterm]

$ curl -s http://jm-cdn-test.azureedge.net/info.php | head -n 5
<!DOCTYPE html>
<html>
<head>
    <title>Microsoft Azure Web App - Error 404</title>
    <style type="text/css">

[/simterm]

Error 404 — Web app not found.

Возникает она из-за параметра Origin host header. Обновляем origin-host-header — устанавливаем его равным (в большистве случаев) origin-host-name:

[simterm]

$ azure cdn endpoint set --name jm-cdn-test --profile-name jm-cdn-test --resource-group jm-testing --origin-host-header jm-wp-dev.azurewebsites.net 
info:    Executing command cdn endpoint set
+ Updating endpoint named jm-cdn-test                                          
data:    
data:    Endpoint name                  : jm-cdn-test
data:    
data:    Profile name                   : jm-cdn-test
data:    Resource Group                 : jm-testing
data:    Location                       : WestEurope
data:    Tags                           :
data:    Host Name                      : jm-cdn-test.azureedge.net
data:    Origin Host Header             : jm-wp-dev.azurewebsites.net
...

[/simterm]

Снова ждём, проверяем:

[simterm]

$ curl -s http://jm-cdn-test.azureedge.net/info.php | head -n 5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<style type="text/css">
body {background-color: #fff; color: #222; font-family: sans-serif;}
pre {margin: 0; font-family: monospace;}

[/simterm]

Готово.

Из встреченных ошибок — 504.

Приложение (jm-wp-dev.azurewebsites.net) закрыто фаерволом. Если открыть доступ всем — то CDN работает, как и ожидалось.

Есть тикет в саппорт на эту тему, если что-то посоветуют толковое — добавлю.

UPD: добавляю — список IP для Verizon есть тут>>>.

Ссылки по теме

http://blog.developin.cloud/going-global-with-your-spa-and-azure-cdn/

https://opbuildstorageprod.blob.core.windows.net/output-pdf-files/en-us/Azure.azure-documents/live/cdn.pdf

https://docs.microsoft.com/en-us/azure/cdn/cdn-edge-performance