Skip to content

Commit 998788a

Browse files
v-shilsv-shils
authored
Merge pull request #274931 from msangapu-msft/appspaces
updates
2 parents 4cb21a4 + 9339ae4 commit 998788a

18 files changed

+599
-218
lines changed

‎.openpublishing.redirection.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1870,6 +1870,14 @@
18701870
"redirect_url": "/azure/jenkins/tutorial-jenkins-deploy-web-app-azure-app-service",
18711871
"redirect_document_id": false
18721872
},
1873+
{
1874+
"source_path_from_root": "/articles/app-spaces/quickstart-deploy-web-app.md",
1875+
"redirect_url": "/azure/app-spaces/quickstart-deploy-sample-app"
1876+
},
1877+
{
1878+
"source_path_from_root": "/articles/app-spaces/deploy-app-spaces-template.md",
1879+
"redirect_url": "/azure/app-spaces/quickstart-deploy-your-app"
1880+
},
18731881
{
18741882
"source_path_from_root": "/articles/application-insights/app-insights-analytics-reference.md",
18751883
"redirect_url": "/azure/kusto/query/",

‎articles/app-spaces/deploy-app-spaces-template.md

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎articles/app-spaces/how-to-add-components.md

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
---
2+
title: Add components in App Spaces
3+
description: Learn how to add App Spaces components in the Azure portal.
4+
ms.author: msangapu
5+
author: msangapu-msft
6+
ms.service: app-spaces
7+
ms.topic: how-to
8+
ms.date: 05/20/2024
9+
zone_pivot_groups: app-spaces-add-component
10+
---
11+
12+
13+
# Add App Spaces components
14+
15+
[App Spaces](https://go.microsoft.com/fwlink/?linkid=2234200) is an intelligent service for developers that reduces the complexity of creating and managing web apps. This guide shows you how to add components to an existing App Spaces app. Components can be a back-end app (Azure Container App), a front-end app (Static Web App), or a database (MariaDB, PostgreSQL, Qdrant).
16+
17+
[!include [component types](./includes/component-types-table.md)]
18+
19+
## Add components
20+
21+
To add a component to your App Space, select **+ Add component** on the _App Space_ page.
22+
23+
::: zone pivot="custom"
24+
25+
Follow these steps to add a custom app component.
26+
27+
### Add tab
28+
29+
- In the _Add_ tab, select **GitHub repository**, and select the **Next** button at the bottom of the page.
30+
31+
### Configure tab
32+
33+
#### [Container App (back end)](#tab/aca/)
34+
35+
1. In the _Connect to GitHub to import your repository_ section, enter the following values.
36+
37+
| Setting | Action |
38+
|---|---|
39+
| GitHub account | Select your GitHub account. |
40+
| Organization | Select your organization. |
41+
| Repository | Select your GitHub code repository. If you can't find your repository, you to [enable other permissions on GitHub](https://docs.github.com/get-started/learning-about-github/access-permissions-on-github). |
42+
| Branch | Select your GitHub branch. |
43+
| App location | Enter the location of your code in your GitHub repository. Use `/` for the root directory. |
44+
| Listening port |Specify the port that your web server is listening on. External requests being made to port 80 or 443 get routed to this port internally for your application to server content from. |
45+
| Startup command (optional) | Under *Advanced configurations*, enter a **Startup command** or leave blank for none.|
46+
47+
1. In the _Configure app details_ section, enter the following values.
48+
49+
| Setting | Action |
50+
|---|---|
51+
| Component name | Enter a name for your component. |
52+
53+
1. Select the **Add** button at the bottom of the page.
54+
55+
[!include [deployment note](./includes/provision-text-aca.md)]
56+
#### [Static Web App (front end)](#tab/swa/)
57+
1. In the _Connect to GitHub to import your repository_ section, enter the following values.
58+
59+
| Setting | Action |
60+
|---|---|
61+
| GitHub account | Select your GitHub account. |
62+
| Organization | Select your organization. |
63+
| Repository | Select your GitHub code repository. If you can't find your repository, you need to [enable other permissions on GitHub](https://docs.github.com/get-started/learning-about-github/access-permissions-on-github). |
64+
| Branch | Select your GitHub branch. |
65+
| App location | Enter the location of your code in your GitHub repository. Use `/` for the root directory. |
66+
| Output location (optional) | Enter the location of your build output relative to your app location. For example, a value of 'build' when your app location is set to '/app' causes the content at '/app/build' to be served. |
67+
68+
1. Enter the following values in the _Configured app details_ section.
69+
70+
| Setting | Action |
71+
|---|---|
72+
| Component name | Enter a name for your component. |
73+
74+
1. Select the **Add** button at the bottom of the page.
75+
76+
[!include [deployment note](./includes/provision-text-swa.md)]
77+
78+
* * *
79+
80+
::: zone-end
81+
82+
::: zone pivot="sample"
83+
84+
Follow these steps to add a sample template app.
85+
86+
### Add tab
87+
88+
1. In the _Add_ tab, select **Template**, and select the **Next** button at the bottom of the page.
89+
90+
1. Under _Templates_, select an app and then select the **Next** button at the bottom of the page.
91+
92+
### Configure tab
93+
94+
1. Enter the following values in the _Connect to GitHub_ section.
95+
96+
| Setting | Action |
97+
|---|---|
98+
| GitHub account | Select your GitHub account. |
99+
| Organization | Select your organization. |
100+
| New repository | Enter a name for your new repository. |
101+
102+
103+
1. In the _Configure app details_ section, enter the following values.
104+
105+
| Setting | Action |
106+
|---|---|
107+
| Component name | Enter a name for your component. |
108+
109+
1. Select the **Add** button at the bottom of the page.
110+
111+
::: zone-end
112+
113+
::: zone pivot="database"
114+
115+
Follow these steps to add a database component.
116+
117+
### Add tab
118+
119+
- In the _Add_ tab, select **Database**, and then select the **Next** button at the bottom of the page.
120+
121+
### Configure tab
122+
123+
1. In the _Configure_ tab, enter the following values.
124+
125+
| Setting | Action |
126+
|---|---|
127+
| Database type | Select a database type. |
128+
| Component name | Enter a name for your component. |
129+
130+
1. Select the **Add** button at the bottom of the page.
131+
132+
::: zone-end
133+
134+
## Related content
135+
136+
- [App Spaces overview](overview.md)
137+
- [Deploy an App Spaces template](deploy-app-spaces-template.md)

‎articles/app-spaces/how-to-manage-components.md

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
---
2+
title: Manage components in App Spaces
3+
description: Learn how to manage App Spaces in the Azure portal.
4+
ms.author: msangapu
5+
author: msangapu-msft
6+
ms.service: app-spaces
7+
ms.topic: how-to
8+
ms.date: 05/20/2024
9+
zone_pivot_groups: app-spaces-component-types
10+
---
11+
12+
# Manage components in App Spaces
13+
14+
You can manage the components of your App Spaces by selecting the component on the __App Space__ page.
15+
16+
[!include [component types](./includes/component-types-table.md)]
17+
18+
::: zone pivot="static"
19+
## Deployment
20+
21+
The **Deployment** section in App Spaces provides a detailed log of all deployment activities and utilizes GitHub Actions to automate the deployment process. You can redeploy the application if necessary. The section also includes a **Workflow run** log that tracks the deployment process step-by-step, starting from setting up the job, logging into Azure, checking out the branch, building and pushing the container image to the registry, and completing the job. This detailed workflow, powered by GitHub Actions, ensures transparency and provides insights into the deployment timeline, making it easier to manage and troubleshoot deployments.
22+
::: zone-end
23+
::: zone pivot="app"
24+
## Deployment
25+
The **Deployment** section in App Spaces provides a detailed log of all deployment activities and utilizes GitHub Actions to automate the deployment process. You can redeploy the application if necessary. The section also includes a **Workflow run** log that tracks the deployment process step-by-step, starting from setting up the job, logging into Azure, checking out the branch, building and pushing the container image to the registry, and completing the job. This detailed workflow, powered by GitHub Actions, ensures transparency and provides insights into the deployment timeline, making it easier to manage and troubleshoot deployments.
26+
::: zone-end
27+
::: zone pivot="database"
28+
::: zone-end
29+
30+
::: zone pivot="static"
31+
## Logs
32+
App Spaces provides robust logging capabilities for static app components, which can be filtered over a range of time periods from the last hour to the last 30 days. You can enable logs through the **Log Settings** button, which offers different configuration options. The **Auto** setting automatically collects logs for HTTP requests, global errors, and usage analytics. For more customized tracking, you can choose the **Manual with npm packages** option to set up custom event tracking with IntelliSense. Alternatively, the **Manual with React and Angular plug-ins** option allows you to configure connection strings to define where to send telemetry data by replacing the placeholder `YOUR_CONNECTION_STRING` with the actual connection string. These flexible logging options ensure comprehensive monitoring and analysis tailored to specific needs.
33+
34+
Select **Open in advanced queries** to go to the [Log Analytics workspace](../azure-monitor/logs/log-analytics-workspace-overview.md).
35+
36+
For Application Insights, see [Enable a framework extension for Application Insights JavaScript SDK](https://go.microsoft.com/fwlink/?linkid=2269911).
37+
::: zone-end
38+
::: zone pivot="app"
39+
## Logs
40+
41+
Select system logs to check service-level events, or console logs to debug code. For more information, see [Use queries in Log Analytics](../azure-monitor/logs/queries.md).
42+
43+
Select **Open in advanced queries** to go to the [Log Analytics workspace](../azure-monitor/logs/log-analytics-workspace-overview.md).
44+
::: zone-end
45+
::: zone pivot="database"
46+
::: zone-end
47+
48+
::: zone pivot="static"
49+
## Metrics
50+
This tab provides metrics for Static Web Apps, displayed in two primary graphs: **Requests** and **Data Out**.
51+
- The **Requests** graph tracks the number of HTTP requests made to the static web app, giving insights into traffic and user activity.
52+
- The **Data Out** graph measures the amount of data transferred from the app to users, which helps in understanding bandwidth usage. You can filter these metrics to view data over various time ranges.
53+
::: zone-end
54+
::: zone pivot="app"
55+
## Metrics
56+
This tab provides metrics for Azure Container Apps, displayed in three primary graphs: **Requests**, **CPU Usage Nanocores**, and **Memory Working Set Bytes**.
57+
- The **Requests** graph provides a visual representation of HTTP requests made to the app, offering valuable insights into app traffic and user engagement over time.
58+
- The **CPU Usage Nanocores** graph illustrates the CPU utilization of the app in nanocores, aiding in monitoring resource consumption and performance optimization.
59+
- The **Memory Working Set Bytes** graph displays the memory usage of the app, enabling users to track memory utilization trends and identify potential memory-related issues.
60+
::: zone-end
61+
::: zone pivot="database"
62+
::: zone-end
63+
64+
## Settings
65+
66+
::: zone pivot="static"
67+
The **Settings** tab is divided into four main categories: General, Domains, Routes, and Authentication.
68+
69+
- In the **General** settings, you can specify the component name, ensuring easy identification and management.
70+
- The **Domains** section provides information about the current domains associated with your app, and you can create new [App Service domains](../app-service/manage-custom-dns-buy-domain.md) as needed.
71+
- The **Routes** section allows you to [define route rules to restrict access to users based on specific roles or to perform actions such as redirects or rewrites](../static-web-apps/configuration.md#routes).
72+
- The **Authentication** section is where you set up an authentication provider for your site. The available providers are Google and GitHub. Here, you can configure the client ID, client secret, and the API path for getting roles. After authentication, this API path will be called with the user's claims, and it must return an array of roles to determine which routes the user can access based on the roles defined in the Routes section. Learn more at [Authenticate and authorize Static Web Apps](../static-web-apps/authentication-authorization.yml).
73+
74+
75+
::: zone-end
76+
::: zone pivot="app"
77+
The **Settings** tab is divided into three categories: General, Environment variables, and Secrets.
78+
79+
- In **General** section, options include defining the component name for easy identification within the app space, specifying the listening port to manage inbound connections, and configuring the ingress settings for controlling network traffic routing to the database.
80+
- In the **Environment variables** section, you can set up essential environment-specific variables, such as database usernames, connection strings, mount locations, and other parameters crucial for seamless database operations.
81+
- In the **Secrets** section provides a secure repository for storing sensitive data by inputting key/value pairs. These secrets can be referenced by environment variables, ensuring the protection of confidential information within the database component.
82+
::: zone-end
83+
::: zone pivot="database"
84+
The **Settings** tab is divided into three categories: General, Environment variables, and Secrets.
85+
86+
- In **General** section, options include defining the component name for easy identification within the app space, specifying the listening port to manage inbound connections, and configuring the ingress settings for controlling network traffic routing to the database.
87+
- In the **Environment variables** section, you can set up essential environment-specific variables, such as database usernames, connection strings, mount locations, and other parameters crucial for seamless database operations.
88+
- In the **Secrets** section provides a secure repository for storing sensitive data by inputting key/value pairs. These secrets can be referenced by environment variables, ensuring the protection of confidential information within the database component.
89+
::: zone-end
90+
91+
92+
## Info
93+
94+
::: zone pivot="static"
95+
This tab shows the following details:
96+
97+
| Name | Description |
98+
|------|-------------|
99+
| URL | The direct link to your app|
100+
| Location | The Azure region where your app is hosted|
101+
| Resource group | The specific resource group managing your app|
102+
| Pricing | [Pricing details](https://go.microsoft.com/fwlink/?linkid=2260405)|
103+
| Repository | The GitHub repository used for the app's source code|
104+
| Branch | The GitHub branch used for the app's source code|
105+
| Subscription | The Azure subscription under which the app is running|
106+
| Resource name | The internal name used within Azure App Spaces|
107+
::: zone-end
108+
::: zone pivot="app"
109+
110+
This tab shows the following details:
111+
112+
| Name | Description |
113+
|------|-------------|
114+
| URL | The direct link to your app|
115+
| Location | The Azure region where your app is hosted|
116+
| Resource group | The specific resource group managing your app|
117+
| Pricing | [Pricing details](https://go.microsoft.com/fwlink/?linkid=2261690)|
118+
| Repository | The GitHub repository used for the app's source code|
119+
| Branch | The GitHub branch used for the app's source code|
120+
| Subscription | The Azure subscription under which the app is running|
121+
| Resource name | The internal name used within Azure App Spaces|
122+
123+
::: zone-end
124+
::: zone pivot="database"
125+
126+
This tab shows the following details:
127+
128+
| Name | Description |
129+
|------|-------------|
130+
| URL | The direct link to your app|
131+
| Location | The Azure region where your app is hosted|
132+
| Resource group | The specific resource group managing your app|
133+
| Pricing | [Pricing details](https://go.microsoft.com/fwlink/?linkid=2261690)|
134+
| Subscription | The Azure subscription under which the app is running|
135+
| Resource name | The internal name used within Azure App Spaces|
136+
137+
::: zone-end
138+
139+
## Related content
140+
141+
- [App Spaces overview](overview.md)
142+
- [Deploy a starter app in App Spaces](quickstart-deploy-starter-app.md)
143+
- [Deploy your app in App Spaces](quickstart-deploy-your-app.md)

‎articles/app-spaces/includes/clean-up-resources.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
author: msangapu-msft
3+
ms.author: msangapu
4+
ms.topic: include
5+
ms.date: 05/22/2024
6+
---
7+
When you're finished with the sample app, you can remove all of the App Spaces resources from Azure. It helps you avoid extra charges and keeps your Azure subscription uncluttered. Deleting an App Spaces is the fastest way to remove all Azure resources for your app.
8+
9+
- From the *App Space* page, select **Delete space** to delete the App Spaces and its associated resources.

‎articles/app-spaces/includes/component-types-table.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
author: msangapu-msft
3+
ms.author: msangapu
4+
ms.topic: include
5+
ms.date: 05/22/2024
6+
---
7+
App Spaces uses a concept of components. The following table describes the component types, app types, and the Azure services used by App Spaces.
8+
9+
|Component type | App type| Azure service |
10+
|--------|----------|-----------|
11+
|App component|Back end|Azure Container Apps|
12+
|Static app component|Front end|Static Web Apps|
13+
|Database component|N/A|Azure Container Apps|

‎articles/app-spaces/includes/provision-text-aca.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
author: msangapu-msft
3+
ms.author: msangapu
4+
ms.topic: include
5+
ms.date: 05/22/2024
6+
---
7+
8+
For a back-end app, App Spaces creates the following resources for you during deployment:
9+
- Azure Container App environment
10+
- Azure Container App
11+
- Virtual network + subnet (sub resource of virtual network)
12+
- Continuous deployment with GitHub Actions
13+
- Contributor RBAC (Role-based access control) role assigned to user-assigned identity over the scope of the resource group (for OpenID Connect purposes)
14+
- A Log Analytics workspace

‎articles/app-spaces/includes/provision-text-swa.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
author: msangapu-msft
3+
ms.author: msangapu
4+
ms.topic: include
5+
ms.date: 05/22/2024
6+
---
7+
8+
For a front-end app, App Spaces creates the following resources for you during deployment:
9+
- A Static Web App
10+
- A Log Analytics workspace
11+
- An App Insights
12+

0 commit comments

Comments
 (0)