You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-web-pubsub/howto-integrate-app-gateway.md
+14-14Lines changed: 14 additions & 14 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,7 +73,7 @@ When the three components are configured, you should see something like the scre
73
73
74
74
:::image type="content" source="media/howto-integrate-app-gateway/create-resource-step6.jpg" alt-text="Screenshot of creating an Application Gateway resource - finished":::
75
75
76
-
One thing that is worth highlighting is that you configure **non-WebSocket** connections exactly the same way. You can learn more about [Application Gateway's native support for proxying WebSocket connections](https://learn.microsoft.com/azure/application-gateway/features#websocket-and-http2-traffic).
76
+
One thing that is worth highlighting is that you configure **non-WebSocket** connections exactly the same way. You can learn more about [Application Gateway's native support for proxying WebSocket connections](../application-gateway/features.md)
77
77
78
78
79
79
### Test and verify Application Gateway is configured properly
@@ -89,7 +89,7 @@ Repeat a similar step and expect the same error message.
You should see the same error message "Invalid value of 'hub'." This error shows that your Application Gateway resource successfully routed the traffic using the routing rule we configured earlier and returned a response back on behalf of Web PubSub.
92
+
You should see the same error message "Invalid value of 'hub'." This error shows that your Application Gateway resource successfully routed the traffic using the configured routing rule.
93
93
94
94
### Test and verify Application Gateway can proxy WebSocket connections
95
95
#### Publish messages through Web PubSub
@@ -162,10 +162,10 @@ export WebPubSubConnectionString="<replace with the connection string of your We
162
162
163
163
npm run start
164
164
```
165
-
You should see "server running on 3000" in the console. Every 2 seconds, the program asks Web PubSub service to broadcast a message to all connected web clients. Even though, no web clients are connected with your Web PubSub resource at the moment, you can see this flow in action by enabling the [Live Trace Tool feature](./howto-troubleshoot-resource-logs.md##launch-the-live-trace-tool), where you can monitor important logging in real time.
165
+
You should see "server running on 3000" in the console. Every 2 seconds, the program asks Web PubSub service to broadcast a message to all connected web clients. Even though, no web clients are connected with your Web PubSub resource at the moment, you can see this flow in action by enabling the [Live Trace Tool feature](./howto-troubleshoot-resource-logs.md#launch-the-live-trace-tool), where you can monitor important logging in real time.
166
166
167
167
#### Receive messages in the browser
168
-
It wouldn't be illuminating if we don't receive the broadcasted messages. Inside the server folder you created earlier, let's create a simple HTML file where we put the client code. The static file will be served by the `express` app.
168
+
It wouldn't be illuminating if we don't receive the broadcasted messages. Inside the server folder, you created earlier, let's create a simple HTML file where we put the client code. The `express` app serves this static file.
We need to bring your Web PubSub resource in the same Virtual Network that your Application Gateway is in. We achieve it by creating a Private Endpoint. [You can learn more about Private Endpoint here.](https://learn.microsoft.com/azure/private-link/private-endpoint-overview)
272
+
We need to bring your Web PubSub resource in the same Virtual Network that your Application Gateway is in. We achieve it by creating a Private Endpoint. [You can learn more about Private Endpoint here.](../private-link/private-endpoint-overview.md)
273
273
274
274
275
275
### Create a separate subnet for your Private Endpoint
@@ -281,13 +281,13 @@ Locate the Virtual Network resource that we created earlier and create a new sub
281
281
282
282
### Create a Private Endpoint for your Web PubSub resource
283
283
Locate your Web PubSub resource on Azure portal and go to "Networking" blade.
284
-
:::image type="content" source="media/howto-integrate-app-gateway/webpubsub-create-private-endpoint-step1.jpg" alt-text="Screenshot of creating another subnet":::
284
+
:::image type="content" source="media/howto-integrate-app-gateway/webpubsub-create-private-endpoint-step1.jpg" alt-text="Screenshot of creating a separate subnet":::
285
285
286
286
Create a Private Endpoint in the same region as your Web PubSub resource.
287
-
:::image type="content" source="media/howto-integrate-app-gateway/webpubsub-create-private-endpoint-step2.jpg" alt-text="Screenshot of creating another subnet":::
287
+
:::image type="content" source="media/howto-integrate-app-gateway/webpubsub-create-private-endpoint-step2.jpg" alt-text="creenshot of creating an Private Endpoint for Web PubSub resource":::
288
288
289
289
Select the separate subnet we just created.
290
-
:::image type="content" source="media/howto-integrate-app-gateway/webpubsub-create-private-endpoint-step3.jpg" alt-text="Screenshot of creating another subnet":::
290
+
:::image type="content" source="media/howto-integrate-app-gateway/webpubsub-create-private-endpoint-step3.jpg" alt-text="Screenshot of placing Web PubSub's Private Endpoint in the newly created subnet":::
291
291
292
292
### Refresh the backend pool of your Application Gateway resource
293
293
Your Application Gateway resource doesn't know that you created a Private Endpoint for your Web PubSub resource. Locate your Application Gateway resource and refresh the backend pools.
@@ -318,7 +318,7 @@ Locate `index.html` in the public folder, and change the line where `endpoint` v
318
318
</script>
319
319
```
320
320
321
-
Web App provides a handy command to deploy an app as a ZIP file. [You can learn more about the `az webapp up` command](https://learn.microsoft.com/azure/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-cli#deploy-to-azure) and the tasks it automates for you.
321
+
Web App provides a handy command to deploy an app as a ZIP file. [You can learn more about the `az webapp up` command](../app-service/quickstart-nodejs.md) and the tasks it automates for you.
322
322
323
323
Locate the server folder you created in step 1.
324
324
```bash
@@ -359,7 +359,7 @@ Make sure you select the same Virtual Network your Web PubSub resource is in.
By default, Web App redirects HTTP traffic to HTTPs. We need to diablethis default behavior. Note that this is not recommended for production workload.
362
+
By default, Web App redirects HTTP traffic to HTTPs. We need to disable this default behavior. This is not recommended for production workload.
363
363
:::image type="content" source="media/howto-integrate-app-gateway/web-app-turn-off-https-redirect.jpg" alt-text="Screenshot of turning off automatic HTTPs redirect":::
364
364
365
365
### Verify that everything works
@@ -372,14 +372,14 @@ So far in step 2, you
372
372
6. set two environment variables on your Web App resource,
373
373
7. disabled Web App's default behavior of redirecting HTTP traffic to HTTPs.
374
374
375
-
Now, open your web browser and enter the domain name of your Web App. If you inspect the page, open the Network panel, you see that the clients goes to Web App for the access token and then uses the token to establish a WebSocket connection with Application Gateway.
375
+
Now, open your web browser and enter the domain name of your Web App. If you inspect the page, open the Network panel, you see that the client goes to Web App for the access token and then uses the token to establish a WebSocket connection with Application Gateway.
376
376
377
377
:::image type="content" source="media/howto-integrate-app-gateway/web-app-serves-access-token.jpg" alt-text="Screenshot of getting an access token from a Web App":::
378
378
379
379
:::image type="content" source="media/howto-integrate-app-gateway/connect-with-webpubsub-indirect-azure.jpg" alt-text="Screenshot of successfully establishing a WebSocket connection through Application Gateway":::
380
380
381
-
If you have the Console panel open, you will see the broadcasted messages, as well.
382
-
:::image type="content" source="media/howto-integrate-app-gateway/connect-with-webpubsub-indirect-azure-messages.jpg" alt-text="Screenshot of getting messages Application Gateway, which proxies traffic for Web PubSub":::
381
+
If you have the Console panel open, you see the broadcasted messages, as well.
382
+
:::image type="content" source="media/howto-integrate-app-gateway/connect-with-webpubsub-indirect-azure.jpg" alt-text="Screenshot of getting messages from Application Gateway, which proxies traffic for Web PubSub":::
0 commit comments