Skip to content

Commit 26283aa

Browse files
chenkenntvicancy
authored andcommitted
Update samples: (#98)
1. Upgrade signin sample to latest webjob SDK version 2. Fix demo site for signin and flightmap demo 3. Improve some of the deployment steps
1 parent 0c4f4ef commit 26283aa

File tree

6 files changed

+100
-43
lines changed

6 files changed

+100
-43
lines changed

docs/azure-integration.md

Lines changed: 41 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,47 @@ In this tutorial you'll learn how to use Azure web app to host your hub logic an
66
## Deploy SignalR Hub to Azure Web App
77

88
Azure Web App is a service for hosting web applications, which is a perfect choice for hosting our SignalR hub.
9-
Azure Web App supports container, so we will build our application into a Docker container and deploy it to web app.
109

11-
### Build Docker Image
10+
In this topic we will introduce two ways to deploy web apps:
11+
12+
### Deploy through Local Git
13+
14+
The easiest way to deploy web app is using local Git:
15+
16+
1. Create a web app:
17+
```
18+
az appservice plan create --name <plan_name> --resource-group <resource_group_name> --sku S1 --is-linux
19+
az webapp create \
20+
--resource-group <resource_group_name> --plan <plan_name> --name <app_name> \
21+
--runtime "dotnetcore|2.1"
22+
```
23+
24+
2. Deploy your app to web app:
25+
26+
```
27+
az webapp deployment source config-local-git --resource-group <resource_group_name> --name <app_name>
28+
az webapp deployment user set --user-name <user_name> --password <password>
29+
30+
git init
31+
git remote add origin <deploy_git_url>
32+
git add -A
33+
git commit -m "init commit"
34+
git push origin master
35+
```
36+
37+
3. Update app settings:
38+
39+
```
40+
az webapp config appsettings set --resource-group <resource_group_name> --name <app_name> --setting PORT=5000
41+
az webapp config appsettings set --resource-group <resource_group_name> --name <app_name> \
42+
--setting Azure__SignalR__ConnectionString=<connection_string>
43+
```
44+
45+
### Deploy through Docker Image
46+
47+
Azure Web App also supports container, so we can build our application into a Docker container and deploy it to web app.
48+
49+
#### Build Docker Image
1250
1351
First use the [Dockerfile](../samples/ChatRoom/Dockerfile) to build our application into a Docker container image:
1452
@@ -58,7 +96,7 @@ docker tag chatroom <acr_name>.azurecr.io/chatroom
5896
docker push <acr_name>.azurecr.io/chatroom
5997
```
6098

61-
### Deploy to Azure Web App
99+
#### Deploy Docker Image to Azure Web App
62100

63101
First create an Azure Web App:
64102

samples/FlightMap/README.md

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This sample shows how to use Azure SignalR Service to build a realtime monitoring dashboard. Open the application, and you'll see flight locations in realtime.
44

5-
A live demo can be found [here](http://flightmap-demo1.azurewebsites.net/).
5+
A live demo can be found [here](https://signalr-flightmap-demo.azurewebsites.net/).
66

77
## How does it work?
88

@@ -16,36 +16,39 @@ In real world scenarios you can replace the web server and the blob storage with
1616

1717
## Deploy to Azure
1818

19-
1. Add your bing map key to `index.html`:
19+
1. Create a Bing Maps API for Enterprise on Azure and add your Bing map key to `index.html`:
2020

2121
```
2222
<script src='https://www.bing.com/api/maps/mapcontrol?callback=getMap&key=<bing_map_key>'
2323
```
2424
25-
1. Build docker image
25+
1. Create a SignalR Service instance using [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest):
2626
2727
```
28-
docker build -t flightmap .
28+
az group create --name <resource_group_name> --location WestUS
29+
az signalr create --resource-group <resource_group_name> --name <signalr_name> --sku Standard_S1
2930
```
3031
31-
1. Push the docker image to a docker registry such as DockHub or[Azure Container Registry](https://azure.microsoft.com/en-us/services/container-registry/). Below are the commands to push to Azure Container Registry.
32+
1. Create a web app using [Azure CLI].
3233
3334
```
34-
docker login <acr_name>.azurecr.io
35-
docker tag flightmap <acr_name>.azurecr.io/flightmap
36-
docker push <acr_name>.azurecr.io/flightmap
35+
az appservice plan create --name <plan_name> --resource-group <resource_group_name> --sku S1 --is-linux
36+
az webapp create \
37+
--resource-group <resource_group_name> --plan <plan_name> --name <app_name> \
38+
--runtime "dotnetcore|2.1"
3739
```
3840
39-
1. Create a SignalR Service in Azure portal.
40-
41-
1. Create a web app using [Azure CLI](https://docs.microsoft.com/en-us/cli/azure/install-azure-cli?view=azure-cli-latest).
41+
1. Deploy flight map to web app:
4242
4343
```
44-
az group create --name <resource_group_name> --location CentralUS
45-
az appservice plan create --name <plan_name> --resource-group <resource_group_name> --sku S1 --is-linux
46-
az webapp create \
47-
--resource-group <resource_group_name> --plan <plan_name> --name <app_name> \
48-
--deployment-container-image-name nginx
44+
az webapp deployment source config-local-git --resource-group <resource_group_name> --name <app_name>
45+
az webapp deployment user set --user-name <user_name> --password <password>
46+
47+
git init
48+
git remote add origin <deploy_git_url>
49+
git add -A
50+
git commit -m "init commit"
51+
git push origin master
4952
```
5053
5154
1. Prepare flight data
@@ -66,16 +69,18 @@ In real world scenarios you can replace the web server and the blob storage with
6669
6770
A simple data generator can be found in [generate.js](data/generate.js). You can use it to generate some random flight data from input time range, plane count, and coordinates. You can also write your own data generate or download real data from other websites (e.g. https://www.adsbexchange.com/). Then upload the flight data to an online storage (recommend to use Azure blob storage) so it can be referenced in the web app.
6871
69-
1. Update web app with above docker image:
72+
Below commands creates an Azure storage account and upload the flight data to Azure blob:
73+
74+
```
75+
az storage account create --location WestUS --name <account_name> --resource-group <resource_group_name> --sku Standard_LRS
76+
az storage container create --account-name <account_name> --name <container_name> --public-access blob
77+
az storage blob upload --container-name <container_name> --account-name <account_name> -n data.json -f data.json
78+
```
79+
80+
1. Update settings of web app:
7081
7182
```
72-
az webapp config container set \
73-
--resource-group <resource_group_name> --name <app_name> \
74-
--docker-custom-image-name <acr_name>.azurecr.io/flightmap \
75-
--docker-registry-server-url https://<acr_name>.azurecr.io \
76-
--docker-registry-server-user <acr_name> \
77-
--docker-registry-server-password <acr_password>
78-
az webapp config appsettings set --resource-group <resource_group_name> --name <app_name> --setting PORT=80
83+
az webapp config appsettings set --resource-group <resource_group_name> --name <app_name> --setting PORT=5000
7984
az webapp config appsettings set --resource-group <resource_group_name> --name <app_name> \
8085
--setting Azure__SignalR__ConnectionString=<connection_string>
8186
az webapp config appsettings set --resource-group <resource_group_name> --name <app_name> \
@@ -84,6 +89,15 @@ In real world scenarios you can replace the web server and the blob storage with
8489
--setting DataFileUrl=<data_file_url>
8590
```
8691
92+
Connection string and date file url can be get from the following commands:
93+
94+
```
95+
az signalr key list --resource-group <resource_group_name> --name <signalr_name>
96+
az storage blob url --container-name <container_name> --account-name <account_name> --name data.json
97+
```
98+
99+
> There're different ways to deploy web app to Azure, please refer to [this doc](../../docs/azure-integration.md) for more details.
100+
87101
## How to run
88102
89103
Once everything is deployed, a URL will be available to you to test the application at:

samples/RealtimeSignIn/README.md

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This sample application shows how to build a realtime application using Azure SignalR Service and serverless architecture. When you open the homepage of the application, you will see how many people have visited this page (and their OS and browser distribution) and the page will automatically update when others open the same page.
44

5-
A live demo can be found [here](https://signalrsignin.azurewebsites.net).
5+
A live demo can be found [here](https://signalr-signin-demo.azurewebsites.net/).
66

77
## How Does It Work
88

@@ -37,7 +37,7 @@ Here is a diagram that illustrates the structure of this appliaction:
3737
az storage table create --account-name <account_name> --name SignInInfo
3838
az storage container create --account-name <account_name> --name content --public-access blob
3939
```
40-
**> Note:** Please take note of the endpoints created in the previous commands, as you will need it later to add to the Function App's application settings.
40+
> Please take note of the endpoints created in the previous commands, as you will need it later to add to the Function App's application settings.
4141
4242
3. Navigate to the ```/content``` folder and upload the static files
4343

@@ -50,19 +50,23 @@ Here is a diagram that illustrates the structure of this appliaction:
5050

5151
### Deploy Azure Function
5252

53-
1. Create a SignalR Service in Azure portal.
53+
1. Create a SignalR Service instance:
54+
55+
```
56+
az group create --name <resource_group_name> --location WestUS
57+
az signalr create --resource-group <resource_group_name> --name <signalr_name> --sku Standard_S1
58+
```
5459

5560
2. Create Azure function
5661

5762
```
58-
az group create --name <resource_group_name> --location CentralUS
5963
az storage account create --resource-group <resource_group_name> --name <storage_account_name> \
6064
--location CentralUS --sku Standard_LRS
6165
az functionapp create --resource-group <resource_group_name> --name <function_name> \
6266
--consumption-plan-location CentralUS --storage-account <storage_account_name>
6367
```
6468

65-
**> Note:** Please provide a unique name for ```function_name```
69+
> Please provide a unique name for ```function_name```
6670
6771
3. Navigate to the ```/function``` folder and configure the deployment credentials
6872

@@ -71,7 +75,7 @@ Here is a diagram that illustrates the structure of this appliaction:
7175
az functionapp deployment user set --user-name <user_name> --password <password>
7276
```
7377

74-
**> Note: **Please take note of the Git url returned as you will need it later on.
78+
> Please take note of the Git url returned as you will need it later on.
7579
7680
4. Build and deploy Azure function
7781

@@ -99,7 +103,7 @@ Here is a diagram that illustrates the structure of this appliaction:
99103
100104
```
101105

102-
**> Note: ** ```table_connection_string``` can be located in the Azure Portal from the Access Key section of the created storage account. ```blob_host``` is the blob service endpoint hostname (without https://), which you can find in the Blob Service Containers section. ```signalr_connection_string``` refers to the connection string you used before in the Chatroom sample.
106+
> ```table_connection_string``` can be located in the Azure Portal from the Access Key section of the created storage account. ```blob_host``` is the blob service endpoint hostname (without https://), which you can find in the Blob Service Containers section. ```signalr_connection_string``` refers to the connection string you used before in the Chatroom sample.
103107
104108
## Run the application
105109

samples/RealtimeSignIn/function/RealtimeSignIn.csproj

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,12 @@
33
<TargetFramework>net461</TargetFramework>
44
</PropertyGroup>
55
<ItemGroup>
6-
<PackageReference Include="Microsoft.Azure.WebJobs" Version="2.2.0" />
7-
<PackageReference Include="Microsoft.Azure.WebJobs.Extensions" Version="2.2.0" />
8-
<PackageReference Include="Microsoft.Azure.WebJobs.Extensions.Http" Version="1.1.0" />
9-
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="5.1.3" />
10-
<PackageReference Include="UAParser" Version="3.0.0" />
11-
<PackageReference Include="WindowsAzure.Storage" Version="7.2.1" />
6+
<PackageReference Include="Microsoft.Azure.WebJobs" Version="3.0.9" />
7+
<PackageReference Include="Microsoft.Azure.WebJobs.Extensions" Version="3.0.2" />
8+
<PackageReference Include="Microsoft.Azure.WebJobs.Extensions.Http" Version="3.0.2" />
9+
<PackageReference Include="System.IdentityModel.Tokens.Jwt" Version="5.4.0" />
10+
<PackageReference Include="UAParser" Version="3.1.38" />
11+
<PackageReference Include="WindowsAzure.Storage" Version="9.3.3" />
1212
</ItemGroup>
1313
<ItemGroup>
1414
<Reference Include="Microsoft.CSharp" />

samples/RealtimeSignIn/function/SignInFunction.cs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
using System.Threading.Tasks;
88
using Microsoft.Azure.WebJobs;
99
using Microsoft.Azure.WebJobs.Extensions.Http;
10-
using Microsoft.Azure.WebJobs.Host;
10+
using Microsoft.Extensions.Logging;
1111
using UAParser;
1212

1313
namespace RealtimeSignIn
@@ -17,14 +17,14 @@ public static class SignInFunction
1717
private const string HubName = "signin";
1818

1919
[FunctionName("signin")]
20-
public static async Task<HttpResponseMessage> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")]HttpRequestMessage req, TraceWriter log)
20+
public static async Task<HttpResponseMessage> Run([HttpTrigger(AuthorizationLevel.Anonymous, "get", "post")]HttpRequestMessage req, ILogger log)
2121
{
2222
var table = new SignInTable(Environment.GetEnvironmentVariable("TableConnectionString"));
2323
var signalR = new AzureSignalR(Environment.GetEnvironmentVariable("AzureSignalRConnectionString"));
2424

2525
var ua = Parser.GetDefault().Parse(req.Headers.UserAgent.ToString());
2626
// add sign-in record
27-
table.Add(ua.OS.Family, ua.UserAgent.Family);
27+
table.Add(ua.OS.Family, ua.UA.Family);
2828

2929
// calculate statistics
3030
var stats = table.GetStats();
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
{
2+
"version": "2.0"
23
}

0 commit comments

Comments
 (0)