Skip to content

Commit e0810c0

Browse files
docs: Add steps for deploying with VS Code Web
1 parent bae7596 commit e0810c0

File tree

3 files changed

+148
-3
lines changed

3 files changed

+148
-3
lines changed

README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,9 @@ For additional documentation of the default enabled services of this solution ac
8585
QUICK DEPLOY
8686
</h2>
8787

88-
| [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/Deploy-Your-AI-Application-In-Production) | [![Open in Dev Containers](https://img.shields.io/static/v1?style=for-the-badge&label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/Deploy-Your-AI-Application-In-Production) | [![Open in Visual Studio Code Web](https://img.shields.io/static/v1?style=for-the-badge&label=Visual%20Studio%20Code%20(Web)&message=Open&color=blue&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/azure/?vscode-azure-exp=foundry&agentPayload=eyJiYXNlVXJsIjogImh0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9IYXJzaC1NaWNyb3NvZnQvRGVwbG95LVlvdXItQUktQXBwbGljYXRpb24tSW4tUHJvZHVjdGlvbi9yZWZzL2hlYWRzL2hiLXBzbC12c2NvZGV3ZWIvaW5mcmEvdnNjb2RlX3dlYiIsICJpbmRleFVybCI6ICIvaW5kZXguanNvbiIsICJ2YXJpYWJsZXMiOiB7ImFnZW50SWQiOiAiIiwgImNvbm5lY3Rpb25TdHJpbmciOiAiIiwgInRocmVhZElkIjogIiIsICJ1c2VyTWVzc2FnZSI6ICIiLCAicGxheWdyb3VuZE5hbWUiOiAiIiwgImxvY2F0aW9uIjogIiIsICJzdWJzY3JpcHRpb25JZCI6ICIiLCAicmVzb3VyY2VJZCI6ICIiLCAicHJvamVjdFJlc291cmNlSWQiOiAiIiwgImVuZHBvaW50IjogIiJ9LCAiY29kZVJvdXRlIjogWyJhaS1wcm9qZWN0cy1zZGsiLCAicHl0aG9uIiwgImRlZmF1bHQtYXp1cmUtYXV0aCIsICJlbmRwb2ludCJdfQ==) |
88+
| [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/Deploy-Your-AI-Application-In-Production) | [![Open in Dev Containers](https://img.shields.io/static/v1?style=for-the-badge&label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/Deploy-Your-AI-Application-In-Production) | [![Open in Visual Studio Code Web](https://img.shields.io/static/v1?style=for-the-badge&label=Visual%20Studio%20Code%20(Web)&message=Open&color=blue&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/azure/?vscode-azure-exp=foundry&agentPayload=eyJiYXNlVXJsIjogImh0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9taWNyb3NvZnQvRGVwbG95LVlvdXItQUktQXBwbGljYXRpb24tSW4tUHJvZHVjdGlvbi9yZWZzL2hlYWRzL21haW4vaW5mcmEvdnNjb2RlX3dlYiIsICJpbmRleFVybCI6ICIvaW5kZXguanNvbiIsICJ2YXJpYWJsZXMiOiB7ImFnZW50SWQiOiAiIiwgImNvbm5lY3Rpb25TdHJpbmciOiAiIiwgInRocmVhZElkIjogIiIsICJ1c2VyTWVzc2FnZSI6ICIiLCAicGxheWdyb3VuZE5hbWUiOiAiIiwgImxvY2F0aW9uIjogIiIsICJzdWJzY3JpcHRpb25JZCI6ICIiLCAicmVzb3VyY2VJZCI6ICIiLCAicHJvamVjdFJlc291cmNlSWQiOiAiIiwgImVuZHBvaW50IjogIiJ9LCAiY29kZVJvdXRlIjogWyJhaS1wcm9qZWN0cy1zZGsiLCAicHl0aG9uIiwgImRlZmF1bHQtYXp1cmUtYXV0aCIsICJlbmRwb2ludCJdfQ==) |
8989
|---|---|---|
90-
[Steps to deploy with GitHub Codespaces](docs/github_code_spaces_steps.md)| [Steps to deploy with Dev Container](docs/Dev_ContainerSteps.md) |
90+
[Steps to deploy with GitHub Codespaces](docs/github_code_spaces_steps.md)| [Steps to deploy with Dev Container](docs/Dev_ContainerSteps.md) | [Steps to deploy with VS Code Web](docs/vscode_web_steps.md) |
9191

9292

9393
## Connect to and validate access to the new environment

docs/vscode_web_steps.md

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
### VS Code Web
2+
3+
You can run this solution using VS Code Web. The button will open a web-based VS Code instance in your browser:
4+
5+
1. Open the project:
6+
7+
[![Open in Visual Studio Code Web](https://img.shields.io/static/v1?style=for-the-badge&label=Visual%20Studio%20Code%20(Web)&message=Open&color=blue&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/azure/?vscode-azure-exp=foundry&agentPayload=eyJiYXNlVXJsIjogImh0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9taWNyb3NvZnQvRGVwbG95LVlvdXItQUktQXBwbGljYXRpb24tSW4tUHJvZHVjdGlvbi9yZWZzL2hlYWRzL21haW4vaW5mcmEvdnNjb2RlX3dlYiIsICJpbmRleFVybCI6ICIvaW5kZXguanNvbiIsICJ2YXJpYWJsZXMiOiB7ImFnZW50SWQiOiAiIiwgImNvbm5lY3Rpb25TdHJpbmciOiAiIiwgInRocmVhZElkIjogIiIsICJ1c2VyTWVzc2FnZSI6ICIiLCAicGxheWdyb3VuZE5hbWUiOiAiIiwgImxvY2F0aW9uIjogIiIsICJzdWJzY3JpcHRpb25JZCI6ICIiLCAicmVzb3VyY2VJZCI6ICIiLCAicHJvamVjdFJlc291cmNlSWQiOiAiIiwgImVuZHBvaW50IjogIiJ9LCAiY29kZVJvdXRlIjogWyJhaS1wcm9qZWN0cy1zZGsiLCAicHl0aG9uIiwgImRlZmF1bHQtYXp1cmUtYXV0aCIsICJlbmRwb2ludCJdfQ==)
8+
9+
3. VS Code Web window will open (may take a few minutes to load), Sign in with your Azure account when prompted.
10+
4. Select the subscription where you want to deploy the solution
11+
5. Wait for the environment to initialize (includes all deployment tools)
12+
6. Once the solution opens, the **AI Foundry terminal** will automatically start running the following command to install the required dependencies:
13+
14+
```shell
15+
sh install.sh
16+
```
17+
During this process, you’ll be prompted with the message:
18+
```
19+
What would you like to do with these files?
20+
- Overwrite with versions from template
21+
- Keep my existing files unchanged
22+
```
23+
Choose “**Overwrite with versions from template**” and provide a unique environment name when prompted.
24+
5. Continue with the [deploying steps](#steps-to-provision-network-isolated-environment-using-dev-container).
25+
26+
# Steps to Provision Network Isolated environment using Dev Container
27+
28+
1. Log into your Azure subscription:
29+
30+
```shell
31+
azd auth login
32+
```
33+
34+
![Image showing the entering of the command 'azd auth' in the terminal of VS Code](../img/provisioning/azdauthcommandline.png)
35+
36+
![image showing the authorization window opening in the browser](../img/provisioning/azdauthpopup.png)
37+
38+
![Image showing the password prompt for azure](../img/provisioning/enterpassword.png)
39+
40+
2. Login to azure, run the below command:
41+
```shell
42+
az login --use-device-code
43+
```
44+
The [Azure CLI](https://learn.microsoft.com/en-us/cli/azure/what-is-azure-cli?view=azure-cli-latest) is used by scripts that run during deployment. This will prompt you to select a subscription. Please select the appropriate subscription.
45+
46+
![image showing theaz login in the vs code terminal](../img/provisioning/az_login.png)
47+
48+
3. Now start the deployment of the infrastructure by typing the below command:
49+
```shell
50+
azd up
51+
```
52+
> ⚠️ **Note:** The latest version of the Azure Developer CLI (AZD) is currently limited on prompting for missing parameters. The feature flag parameters in this solution have been temporarily defaulted to `'disabled'` until this limitation is lifted and prompting will resume.
53+
54+
55+
![image showing the terminal in vs code](images/re_use_log/nonwaf.png)
56+
57+
It will prompt you for the region to deploy the resources into as well as any additional Azure resources to be provisioned and configured.
58+
59+
**Important:** Be sure to remember the vm password. This will be used in a later step. You are still required to log into Azure once you connect through the virtual machine.
60+
> ⚠️ **Note:**
61+
> 1. For **WAF Deployment**, Select the **Network Isolation** as **'True'**.
62+
> ![alt text](images/re_use_log/waf.png)
63+
> 2. For **Sample App Deployment**, Select the **appSampleEnabled** as **'True'**.
64+
> ![alt text](images/re_use_log/samapp.png)
65+
66+
4. After completeing the required paramters that you were prompted for, the provisioning of resources will run and deploy the Network Isolated AI Foundry development portal and dependent resources in about 20-30 minutes.
67+
68+
69+
# Post Deployment Steps:
70+
These steps will help to check that the isolated environment was set up correctly.
71+
Follow these steps to check the creation of the required private endpoints in the environment (when set to networkIsolation = true).
72+
73+
One way to verify whether access is private to the foundry is by launching Azure AI Foundry from the portal.
74+
75+
![Image showing if network isolation is checked](images/re_use_log/AI_Foundry_Portal.png)
76+
77+
When a user that is not connected through the virtual network via an RDP approved connection will see the following screen in their browser. This is the intended behavior!
78+
79+
![Image showing the virtual machine in the browser](images/re_use_log/AI_Foundry_view.png)
80+
81+
A more thourough check is to look for the networking settings and checking for private end points.
82+
83+
1. Go to the Azure Portal and select your Azure AI hub that was just created.
84+
85+
2. Click on Resource Management and then Networking.
86+
87+
![Image showing the Azure Portal for AI Foundry Hub and the settings blade](images/re_use_log/Private_network_endpoints.png)
88+
89+
90+
Here, you will find the private endpoints that are connected to the resources within the foundry managed virtual network. Ensure that these private endpoints are active.
91+
The foundry should show that Public access is ‘disabled’.
92+
93+
## Connecting to the isolated network via RDP
94+
1. Navigate to the resource group where the isolated AI Foundry was deployed to and select the virtual machine.
95+
96+
![Image showing the Azure Portal for the virtual machine](../img/provisioning/checkNetworkIsolation5.png)
97+
98+
2. Be sure that the Virtual Machine is running. If not, start the VM.
99+
100+
![Image showing the Azure Portal VM and the start/stop button](../img/provisioning/checkNetworkIsolation6.png)
101+
102+
3. Select “Bastion” under the ‘Connect’ heading in the VM resource.
103+
104+
![Image showing the bastion blade selected](../img/provisioning/checkNetworkIsolation7.png)
105+
106+
4. Supply the username and the password you created as environment variables and press the connect button.
107+
108+
![Image showing the screen to enter the VM Admin info and the connect to bastion button](../img/provisioning/Bastion.png)
109+
110+
5. Your virtual machine will launch and you will see a different screen.
111+
112+
![Image showing the opening of the Virtual machine in another browser tab](../img/provisioning/checkNetworkIsolation9.png)
113+
114+
6. Launch Edge browser and navigate to your Azure AI Foundry. https://ai.azure.com Sign in using your credentials.
115+
116+
117+
7. You are challenged by MFA to connect.
118+
119+
![Image showing the Multi Factor Authentication popup](../img/provisioning/checkNetworkIsolation10.png)
120+
121+
8. You will now be able to view the Azure AI Foundry which is contained in an isolated network.
122+
123+
![Image showing the Azure Foundry AI Hub with a private bubble icon](images/re_use_log/Azure_ai_foundry_inside_vm.png)
124+
125+
## Contributing
126+
127+
This project welcomes contributions and suggestions. Most contributions require you to agree to a
128+
Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
129+
the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
130+
131+
When you submit a pull request, a CLA bot will automatically determine whether you need to provide
132+
a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
133+
provided by the bot. You will only need to do this once across all repos using our CLA.
134+
135+
This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
136+
For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
137+
contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
138+
139+
## Trademarks
140+
141+
This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft
142+
trademarks or logos is subject to and must follow
143+
[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).
144+
Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
145+
Any use of third-party trademarks or logos are subject to those third-party's policies.

infra/vscode_web/install.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
pip install -r requirements.txt --user -q
22

3-
azd init -t Harsh-Microsoft/Deploy-Your-AI-Application-In-Production -b hb-psl-vscodeweb
3+
azd init -t microsoft/Deploy-Your-AI-Application-In-Production

0 commit comments

Comments
 (0)