azureにweb appを作成する

already existsって、そんなアホな。。phpはversionは指定するそうです。
そりゃそうだよね。

t@Azure:~$ az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name analytics --runtime "PHP|7.0" --deployment-local-git
Website with given name analytics already exists.
t@Azure:~$ az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name hpscript --runtime "PHP|7.0" --deployment-local-git

json
host nameができてます。しかも、これSSLですね。あ、これは凄い!
json読むと、webrootがファイルディレクトのパスっぽいです。

Local git is configured with url of ‘https://hoge.scm.azurewebsites.net/hpscript.git’
{
“additionalProperties”: {},
“availabilityState”: “Normal”,
“clientAffinityEnabled”: true,
“clientCertEnabled”: false,
“cloningInfo”: null,
“containerSize”: 0,
“dailyMemoryTimeQuota”: 0,
“defaultHostName”: “hpscript.azurewebsites.net”,
“deploymentLocalGitUrl”: “https://hoge.scm.azurewebsites.net/hpscript.git”,
“enabled”: true,
“enabledHostNames”: [
“hpscript.azurewebsites.net”,
“hpscript.scm.azurewebsites.net”
],
“ftpPublishingUrl”: “ftp://waws-prod-am2-187.ftp.azurewebsites.windows.net/site/wwwroot”,
“hostNameSslStates”: [
{
“additionalProperties”: {
“ipBasedSslResult”: null,
“ipBasedSslState”: “NotConfigured”,
“toUpdateIpBasedSsl”: null
},
“hostType”: “Standard”,
“name”: “hpscript.azurewebsites.net”,
“sslState”: “Disabled”,
“thumbprint”: null,
“toUpdate”: null,
“virtualIp”: null
},
{
“additionalProperties”: {
“ipBasedSslResult”: null,
“ipBasedSslState”: “NotConfigured”,
“toUpdateIpBasedSsl”: null
},
“hostType”: “Repository”,
“name”: “hpscript.scm.azurewebsites.net”,
“sslState”: “Disabled”,
“thumbprint”: null,
“toUpdate”: null,
“virtualIp”: null
}
],
“hostNames”: [
“hpscript.azurewebsites.net”
],
“hostNamesDisabled”: false,
“hostingEnvironmentProfile”: null,
“httpsOnly”: false,
“id”: “/subscriptions/hogehoge/resourceGroups/myResourceGroup/providers/Microsoft.Web/sites/hpscript”,
“identity”: null,
“isDefaultContainer”: null,
“kind”: “app”,
“lastModifiedTimeUtc”: “2018-04-20T13:04:30.993333”,
“location”: “West Europe”,
“maxNumberOfWorkers”: null,
“name”: “hpscript”,
“outboundIpAddresses”: “hoge”,
“possibleOutboundIpAddresses”: “hoge”,
“repositorySiteName”: “hpscript”,
“reserved”: false,
“resourceGroup”: “myResourceGroup”,
“scmSiteAlsoStopped”: false,
“serverFarmId”: “/subscriptions/hogehogehoge/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan”,
“siteConfig”: null,
“slotSwapStatus”: null,
“snapshotInfo”: null,
“state”: “Running”,
“suspendedTill”: null,
“tags”: null,
“targetSwapSlot”: null,
“trafficManagerHostNames”: null,
“type”: “Microsoft.Web/sites”,
“usageState”: “Normal”
}

azure tutrial

まずvagrant

git clone https://github.com/Azure-Samples/php-docs-hello-world
cd php-docs-hello-world
echo "Hello World!";

Azure Cloud Shellを起動

user nameをset

az webapp deployment user set --user-name  --password 

なに!?

{
  "additionalProperties": {},
  "id": null,
  "kind": null,
  "name": "web",
  "publishingPassword": null,
  "publishingPasswordHash": null,
  "publishingPasswordHashSalt": null,
  "publishingUserName": "hoge",
  "type": "Microsoft.Web/publishingUsers/web",
  "userName": null
}

freeレベル
なんでchinaないんだ?なぞだ。

t@Azure:~$ az appservice list-locations --sku FREE
[
  {
    "name": "Central US"
  },
  {
    "name": "North Europe"
  },
  {
    "name": "West Europe"
  },
  {
    "name": "Southeast Asia"
  },
  {
    "name": "East Asia"
  },
  {
    "name": "West US"
  },
  {
    "name": "East US"
  },
  {
    "name": "Japan West"
  },
  {
    "name": "Japan East"
  },
  {
    "name": "East US 2"
  },
  {
    "name": "North Central US"
  },
  {
    "name": "South Central US"
  },
  {
    "name": "Brazil South"
  },
  {
    "name": "Australia East"
  },
  {
    "name": "Australia Southeast"
  },
  {
    "name": "Central India"
  },
  {
    "name": "West India"
  },
  {
    "name": "South India"
  },
  {
    "name": "Canada Central"
  },
  {
    "name": "Canada East"
  },
  {
    "name": "West Central US"
  },
  {
    "name": "West US 2"
  },
  {
    "name": "UK West"
  },
  {
    "name": "UK South"
  },
  {
    "name": "Korea South"
  },
  {
    "name": "Korea Central"
  },
  {
    "name": "France South"
  },
  {
    "name": "France Central"
  }
]

リソースグループを作成
az group create –name myResourceGroup –location “West Europe”
appservice planを作成
az appservice plan create –name myAppServicePlan –resource-group myResourceGroup –sku FREE

{
  "additionalProperties": {},
  "adminSiteName": null,
  "appServicePlanName": "myAppServicePlan",
  "geoRegion": "West Europe",
  "hostingEnvironmentProfile": null,
  "id": "/subscriptions/hoge/resourceGroups/myResourceGroup/providers/Microsoft.Web/serverfarms/myAppServicePlan",
  "isSpot": false,
  "kind": "app",
  "location": "West Europe",
  "maximumNumberOfWorkers": 1,
  "name": "myAppServicePlan",
  "numberOfSites": 0,
  "perSiteScaling": false,
  "provisioningState": "Succeeded",
  "reserved": false,
  "resourceGroup": "myResourceGroup",
  "sku": {
    "additionalProperties": {},
    "capabilities": null,
    "capacity": 0,
    "family": "F",
    "locations": null,
    "name": "F1",
    "size": "F1",
    "skuCapacity": null,
    "tier": "Free"
  },
  "spotExpirationTime": null,
  "status": "Ready",
  "subscription": "ほげ",
  "tags": null,
  "targetWorkerCount": 0,
  "targetWorkerSizeId": 0,
  "type": "Microsoft.Web/serverfarms",
  "workerTierName": null
}

リソース グループ:Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナー
デプロイ:主にネットワークを通じて提供されるWebアプリケーションなどのシステム開発工程において、システムを利用可能な状態にする
(1)myresourcegroupをWest Europeに作成
(2)Azure App Service プランの作成 myAppServicePlanというプラン名

app service:
“.NET、.NET Core、Java、Ruby、Node.js、PHP、Python を使用して、強力な Web アプリ、モバイル アプリ、API アプリをすばやく構築できます。Azure App Service を既存のフレームワークに統合して、継続的インテグレーション、ライブサイト デバッグ、および業界最高レベルの Microsoft Visual Studio IDE などの最先端の機能を活用することで、比類ない開発者生産性を実現できます。また、Azure Marketplace から、事前構築済みのアプリ、API、コネクタのエコシステムも活用できます。Visual Studio Team Services、Bitbucket、Docker Hub、および GitHub と統合された CI/CD 機能を使用することで、更新プログラムを簡単にデプロイできます。”
“Azure Web Apps を使用すると、インフラストラクチャを管理することなく、お好きなプログラミング言語で Web アプリケーションを構築してホストすることができます。”

OSがどうなっているかブラックボックスでよくわからんな。
要するに.NET、.NET Core、Java、Ruby、Node.js、PHP、Pythonやそれにつくライブラリーは既にインストールされているってこと?
まずOSのファイル構成が見たいです。

Microsoft windows server 2016 datacenter

azureでMS windows serverに接続します。
Processorはxeonですね。

これから、どうしたら使えるんでしょう?
接続はわかりましたが、サーバーとしての使い方がわかりません。

全然よくわかってませんが、とりあえずIISをインストールするみたいですね。

IISを入れます。

と思ったら、memoryが少なすぎて入れられない、と警告が。
これではお話にならない、というか何もできないので、VMは一旦削除します。

あああああ、デプロイに30分かかったとおもったら、VM削除にも時間がかかりすぎる。勘弁してくれ。

あ、centos-basedも行けますね。
ただ、これだとawsでもやれるので、やはりMS severですか。

iisが入ったので、port80を開けます。

あれ、SSH:80で接続できんぞ。。。

あ、ipでiisが表示されるから、OKなのか。

メニュー多すぎてよくわからん。。。。

SSDとHDD

SSD(ソリッド・ステート・ドライブ)は高速・無音のストレージ
-> UBSメモリーと同じように、内臓しているメモリーチップにデータの読み書きを行う
HDD(hard disc drive)
-> パソコンのデータを保存、内臓ストレージ、補助記憶を担当

azureで最安のプランを選びます

IOPSは,ディスクが1秒当たりに処理できるI/Oアクセスの数

ちなみにさくらVPSのローカルが30GBなので、かなり容量が小さいイメージです。

デプロイが終わりました。

Bounce rateとExite rateを表示

$date1 = date("Y-m-d H:i:s", strtotime("- 2 day"));
// $date2 = date("Y-m-d H:i:s", strtotime("- 1 day"));
$date2 = date("Y-m-d H:i:s");
echo $date1 ." ~ ".$date2 ."<br>";

$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");
$filter =  [
	'date' => [ '$gte' => $date1, '$lte' => $date2]
];
$options = [
  'projection' => ['_id' => 0],
  'sort' => ['_id' => -1],
];
$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $mng->executeQuery('app.na007', $query);

foreach ($cursor as $document) {
  // var_dump($document);
  $pv[] = $document->date;
  $cookie[] = $document->cookie;
  $session[] = $document->session;
  if(!is_null($document->referrer)){
  $referrer = $document->referrer;
  }
}
// var_dump($session);
$uu = array_unique($cookie);
$session = array_unique($session);
$bounce = (count($pv) - count($referrer))/ count($pv) * 100;
$exit = (count($pv) - count($session))/ count($pv) * 100;
echo "<br>Users :".count($uu)."<br>";
echo "Pageviews :".count($pv)."<br>";
echo "Bounce rate :" .sprintf('%.2f',$bounce)."%<br>";
echo "Exit rate:" .sprintf('%.2f',$exit)."%<br>";

直帰率、離脱率のところまで一通りできたので、これをAzureに載せたい。

sessionがsetされていた時は、そのままsessionIDを使う

sessionは、リクエスト毎に再setしますが、IDだけは、json.parseした値を再度setします。

var unix = Math.floor((new Date).getTime()/1E3);
var visit = "New User";
var char = "abcdefghijklmnopqrstuvwxyz123456789";
        var id = "";
        for(var i=0; i<10; i++){
            id += char[Math.floor(Math.random()*35)];
        }
if(navigator.cookieEnabled){
    var all=document.cookie + ";";
    var cStart = all.indexOf("_na=",0);
    if(cStart == -1){   
        var expire = new Date();
        expire.setTime(expire.getTime() + 1000*3600*24*365*2);
        document.cookie="_na=NA1."+id+"."+unix+";expires=" + expire.toUTCString();
        var data = '{"path":"'+location.pathname+'", "time":"'+unix+'","id":"'+id+'"}';
        window.sessionStorage.setItem(['ScribeTransport'],[data]);
        a.push(['cookie',id]);
        a.push(['vist',visit]);
        a.push(['referrer',document.referrer]);
    } else {
        visit = "Returned User";
        a.push(['visit',visit]);
        var cEnd = all.indexOf(";",cStart);
		var cID = all.substring(cStart+8,cEnd - 11); //_na=NA1.0000000000.
		a.push(['cookie',cID]);
        var c = window.sessionStorage.getItem(['ScribeTransport']);
        if(c){
            d = JSON.parse(c);
            var data = '{"path":"'+location.pathname+'", "time":"'+unix+'","id":"'+d.id+'"}';
            window.sessionStorage.setItem(['ScribeTransport'],[data]);
            a.push(['referrer',d.path]);
            a.push(['avgtime',(unix - d.time)]);        
        }else {
            var data = '{"path":"'+location.pathname+'", "time":"'+unix+'","id":"'+id+'"}';
            window.sessionStorage.setItem(['ScribeTransport'],[data]);
        }       
    }
}

a.push(['page',location.pathname]);
$(function(){
    $(document).ready(function(){
            var postData = {"userdata": a};
            $.post(
                "doubleclick.php",
                 postData,
                 function(data){
                    $(".box").html(data);
                }
            );
        });
});

OK!

mongoDBで~以上、~以下

analytics.php

$date1 = date("Y-m-d H:i:s", strtotime("- 2 day"));
$date2 = date("Y-m-d H:i:s", strtotime("- 1 day"));
echo $date1 ."~".$date2 ."<br>";


$mng = new MongoDB\Driver\Manager("mongodb://localhost:27017");

$filter =  [
	'date' => [ '$gte' => $date1, '$lte' => $date2]
];
$options = [
  'projection' => ['_id' => 0],
  'sort' => ['_id' => -1],
];
$query = new MongoDB\Driver\Query($filter, $options);
$cursor = $mng->executeQuery('app.na007', $query);

foreach ($cursor as $document) {
  // var_dump($document);
  $pv[] = $document->date;
  $cookie[] = $document->cookie;
  if(!is_null($document->referrer)){
  $referrer = $document->referrer;
  }
}
$uu = array_unique($cookie);
echo "<br>Users :".count($uu)."<br>";
echo "Pageviews :".count($pv)."<br>";
$bounce = (count($pv) - count($referrer))/ count($pv);
echo "Bounce rate :" .sprintf('%.2f',$bounce)."<br>";

Bounce rateは直帰率です。

Exitは離脱率なので、uniqueなsession / PVですね。やはり、sessionのIDは必要のようです。
twitterのsessionのjsonでいう、idあたりでしょうか。

クリックで開閉するアコーディオン

<style>
	.child{
		display:none;
	}
</style>

<ul>
	<li>
		<a class="toggle">サービス別</a>
		<ul class="inner child">
			<li><a href="#demo01">ビッグデータBI</a></li>
			<li><a href="#demo01">クラウドコンピューティング</a></li>
			<li><a href="#demo01">決済</a></li>
			<li><a href="#demo01">CRM(顧客管理)</a></li>
			<li><a href="#demo01">オープンソースソフトウェア</a></li>
		</ul>
	</li>
	<li>
		<a class="toggle">業種別</a>
		<ul class="inner child">
			<li>官公庁・自治体</li>
			<li>教育</li>
			<li>医療・ヘルスケア</li>
			<li>金融</li>
			<li>製造</li>
			<li>流通</li>
		</ul>
	</li>
	<li>
		<a class="toggle">導入事例</a>
		<ul class="inner child">
			<li>NASA</li>
			<li>学校法人伊藤学園</li>
			<li>東京信用金庫</li>
			<li>橋梁モニタリングシステム</li>
			<li>充電管理システム</li>
		</ul>
	</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	function demo01(){
		$(this).next().slideToggle(300);
	}
	$(".toggle").click(demo01);
</script>

slide toggleで開閉します。