|
| 1 | +# Deploying the project to the cloud |
| 2 | + |
| 3 | +The CD portion of CI/CD is continuous delivery or continuous deployment. In a nutshell, it's about taking the product you're building and putting it somewhere to be accessed by the people who need it. There's numerous ways to do this, and the process can become rather involved. We're going to focus on taking our application and deploying it to Azure. |
| 4 | + |
| 5 | +> [!NOTE] |
| 6 | +> We've taken a couple of shortcuts with the application structure to ensure things run smoothly in this workshop. |
| 7 | +
|
| 8 | +## Scenario |
| 9 | + |
| 10 | +With the prototype built, the shelter is ready to begin gathering feedback from external users. They want to deploy the project to the internet, and ensure any updates merged into main are available as quickly as possible. |
| 11 | + |
| 12 | +## Return to main |
| 13 | + |
| 14 | +To streamline the process, we're going to work directly with the **main** branch. Let's change back to the **main** branch and obtain the updates we pushed previously. |
| 15 | + |
| 16 | +1. Return to your codespace, or reopen it by navigating to your repository and selecting **Code** > **Codespaces** and the name of your codespace. |
| 17 | +2. Open a new terminal window by selecting <kbd>Ctl</kbd>+<kbd>Shift</kbd>+<kbd>`</kbd>. |
| 18 | +3. Run the following commands to checkout the main branch and obtain the updates from the repository: |
| 19 | + |
| 20 | + ```sh |
| 21 | + git checkout main |
| 22 | + git pull |
| 23 | + ``` |
| 24 | + |
| 25 | +## Identity management |
| 26 | + |
| 27 | +Whenever you're interacting with an external service, you of course need credentials to perform any actions. This holds true when you're creating any form of automated tasks, such as a workflow in GitHub. There are several ways to manage identities, including access tokens, shared passwords, and [Open ID Connect (OIDC)](https://docs.github.com/en/actions/security-for-github-actions/security-hardening-your-deployments/about-security-hardening-with-openid-connect), with the latter being the newest and preferred mechanism. The advantage to OIDC is it uses short-lived tokens and provides granular control over the operations which can be performed. |
| 28 | + |
| 29 | +Creating and setting up the credentials is typically a task performed by administrators. However, there are tools which can manage this for you, one of which we'll be taking advantage of! |
| 30 | +
|
| 31 | +## Asking Azure how to deploy to Azure |
| 32 | +
|
| 33 | +We previously talked about [extensions for GitHub Copilot chat](./5-context.md#chat-participants-and-extensions), which allow you to interact with external services. These external services could provide access to information about your DevOps flow, database, and other resources. One such extension is the [Azure extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azure-github-copilot), which as the name implies allows you to interact with Azure. You can use the extension to get advice on how to deploy your application, check the status of services, and perform other operations. We'll use this extension to ask how to deploy our application. |
| 34 | + |
| 35 | +As we've done with other tasks, we don't have a specific prompt to use when talking with Azure, as part of the experience is to learn how best to interact with GitHub Copilot. The requirements for the deployment are: |
| 36 | + |
| 37 | +- Deploy the project to the cloud |
| 38 | +- Use a GitHub action to manage the deployment process |
| 39 | + |
| 40 | +1. Open GitHub Copilot Chat. |
| 41 | +2. Activate the Azure extension by typing `@azure`, selecting <kbd>Tab</kbd> then asking the extension how to perform the task you wish to perform (see the requirements above). |
| 42 | + |
| 43 | + > [!NOTE] |
| 44 | + > Since this is your first time using the extension, you will be prompted to signin to Azure. Follow the prompts as they appear. |
| 45 | + |
| 46 | +3. You should receive a response which highlights the `azd` command, which can be used to both initialize a cloud environment and create the workflow. |
| 47 | + |
| 48 | +## Overview of the response from Copilot |
| 49 | + |
| 50 | +The response from GitHub Copilot will likely contain instructions to use the following commands: |
| 51 | + |
| 52 | +- `azd init --from-code` to create the Azure configuration files using [bicep](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/overview?tabs=bicep). |
| 53 | +- `azd auth login` to authenticate to Azure. |
| 54 | +- `azd pipeline config` to create the GitHub Workflow. |
| 55 | + |
| 56 | +[azd](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/overview?tabs=windows) is a commandline utility to help streamline the deployment process to Azure. We'll use it to: |
| 57 | +
|
| 58 | +- generate the bicep file. |
| 59 | +- create the workflow file. |
| 60 | +- create and configure OIDC for the workflow. |
| 61 | +
|
| 62 | +If you're curious about **azd** or Azure, you can always ask the extension using GitHub Copilot! |
| 63 | + |
| 64 | +## Install azd |
| 65 | + |
| 66 | +Let's start by installing **azd**. |
| 67 | +
|
| 68 | +1. Run the command in the terminal to install **azd**: |
| 69 | +
|
| 70 | + ```sh |
| 71 | + curl -fsSL https://aka.ms/install-azd.sh | bash |
| 72 | + ``` |
| 73 | +
|
| 74 | +## Create and configure the bicep file |
| 75 | +
|
| 76 | +Bicep is a domain specific language (DSL) for defining Azure resources. It's dynamic, allowing you to ensure your environment is configured exactly as you need it. We're going to start by allowing **azd** create the bicep file, then make an update to ensure we have an environment variable available for the client to connect to the server. |
| 77 | +
|
| 78 | +1. Run the `init` command to create the bicep file. |
| 79 | +
|
| 80 | + ```sh |
| 81 | + azd init --from-code |
| 82 | + ``` |
| 83 | +
|
| 84 | +2. Follow the prompts, accepting any defaults provided by the tool, and naming your namespace (which will be used to name the resource group and various resources in Azure) something unique. |
| 85 | +3. Open the bicep file located at **infra**/**resources.bicep**. |
| 86 | +4. Find the section (around line 130) which reads: |
| 87 | +
|
| 88 | + ```bicep |
| 89 | + { |
| 90 | + name: 'PORT' |
| 91 | + value: '4321' |
| 92 | + } |
| 93 | + ``` |
| 94 | +
|
| 95 | +5. Create a new line below the closing `}` and add the following to create an environment variable with the URL of the newly created Flask server: |
| 96 | +
|
| 97 | + ```bicep |
| 98 | + { |
| 99 | + name: 'API_SERVER_URL' |
| 100 | + value: 'https://${server.outputs.fqdn}' |
| 101 | + } |
| 102 | + ``` |
| 103 | +
|
| 104 | + > [!NOTE] |
| 105 | + > While the syntax resembles JSON, it's not JSON. As a result, resist the urge to add commas to separate the values! |
| 106 | + |
| 107 | +## Create the workflow |
| 108 | + |
| 109 | +`azd` can create and configure a workflow (or sometimes called a pipeline) for deploying your project. In particular it will: |
| 110 | + |
| 111 | +- create OIDC credentials to use for deployment. |
| 112 | +- define the YML file in the **workflows** folder. |
| 113 | + |
| 114 | +Let's let `azd` do its work! |
| 115 | +
|
| 116 | +1. Return to your terminal window, and run the following command to authenticate with `azd` |
| 117 | +
|
| 118 | + ```sh |
| 119 | + azd auth login |
| 120 | + ``` |
| 121 | +
|
| 122 | +2. Follow the prompts to authenticate to Azure using the credentials you specified previously. |
| 123 | +3. Create the pipeline by running the following command: |
| 124 | +
|
| 125 | + ```sh |
| 126 | + azd pipeline config |
| 127 | + ``` |
| 128 | +
|
| 129 | +4. Follow the prompts, accepting the defaults. One of the prompts will ask if you wish to perform the deployment now - say yes! |
| 130 | +5. Away your application goes to the cloud! |
| 131 | +
|
| 132 | +## Track the deployment and test your application |
| 133 | +
|
| 134 | +The `azd pipeline config` command will create a new workflow file at **.github/workflows/azure-dev.yml**. Let's explore the workflow, track the action as it runs (this will take a few minutes), and test the application! |
| 135 | + |
| 136 | +1. Open the workflow at **.github/workflows/azure-dev.yml**. |
| 137 | +2. Note the `on` section, which contains the flags for `workflow_dispatch` (to support manual deployment), and `push` to automatically deploy when code is pushed to the **main** branch. |
| 138 | +3. Note the core steps, which checkout your code, authenticate to Azure, create or update the infrastructure, then deploy the application. |
| 139 | +4. If you have questions about what the workflow is doing, ask GitHub Copilot! |
| 140 | +5. Navigate to your repository on GitHub. |
| 141 | +6. Open the **Actions** tab, then the action named **.github/workflows/azure-dev.yml**. You should see the action running (the icon will be yellow under the **workflow runs** section). |
| 142 | +7. Select the running workflow (which should be named **Configure Azure Developer Pipeline**). |
| 143 | +8. Select the **build** step. |
| 144 | +9. Track the deployment process, which will take about 5-10 minutes (good time for a water break!). |
| 145 | +10. Once the process completes, expand the **Deploy Application** section. You should see the log indicating the client and server were both deployed: |
| 146 | + |
| 147 | + ``` |
| 148 | + Deploying service client |
| 149 | + Deploying service client (Building Docker image) |
| 150 | + Deploying service client (Tagging container image) |
| 151 | + Deploying service client (Tagging container image) |
| 152 | + Deploying service client (Logging into container registry) |
| 153 | + Deploying service client (Pushing container image) |
| 154 | + Deploying service client (Updating container app revision) |
| 155 | + Deploying service client (Fetching endpoints for container app service) |
| 156 | + (✓) Done: Deploying service client |
| 157 | + - Endpoint: https://client.delightfulfield-8f7ef050.westus.azurecontainerapps.io/ |
| 158 | + |
| 159 | + Deploying service server |
| 160 | + Acquiring pack cli |
| 161 | + Deploying service server (Building Docker image from source) |
| 162 | + Deploying service server (Tagging container image) |
| 163 | + Deploying service server (Tagging container image) |
| 164 | + Deploying service server (Logging into container registry) |
| 165 | + Deploying service server (Pushing container image) |
| 166 | + Deploying service server (Updating container app revision) |
| 167 | + Deploying service server (Fetching endpoints for container app service) |
| 168 | + (✓) Done: Deploying service server |
| 169 | + - Endpoint: https://server.delightfulfield-8f7ef050.westus.azurecontainerapps.io/ |
| 170 | + ``` |
| 171 | + |
| 172 | +11. Select the Endpoint for the client. You should see your application! |
| 173 | + |
| 174 | +You've now deployed your project! |
| 175 | +
|
| 176 | +## Summary |
| 177 | +
|
| 178 | +You've now created and configured a full CI/CD process. You implemented security checks, testing, and now deployment. As highlighted previously, enterprise CI/CD processes can be rather complex, but at their core they use the skills you explored during this workshop. |
| 179 | + |
| 180 | +## Wrap-up and challenge |
| 181 | + |
| 182 | +Congratulations! You've gone through an entire DevOps process. You began by creating an issue to document the required work, then ensured everything was in place to run automatically. You performed the updates to the application, pushed everything to your repository, and merged it in! |
| 183 | +
|
| 184 | +If you wish to continue exploring from here, there are a couple of tasks you could pursue: |
| 185 | +
|
| 186 | +- Add more functionality to the website! There's a lot you could do, like adding on an adoption form or the ability to store images. |
| 187 | +- Migrate the database to something more powerful such as Postgres or SQL Server. |
| 188 | + |
| 189 | +Work with the workshop leaders as needed to ask questions and get guidance as you continue to build on the skills you learned today! |
| 190 | + |
| 191 | +## Resources |
| 192 | + |
| 193 | +- [What is the Azure Developer CLI?](https://learn.microsoft.com/en-us/azure/developer/azure-developer-cli/overview?tabs=linux) |
| 194 | +- [About security hardening with OpenID Connect](https://docs.github.com/en/actions/security-for-github-actions/security-hardening-your-deployments/about-security-hardening-with-openid-connect) |
| 195 | +- [Deploying with GitHub Actions](https://docs.github.com/en/actions/use-cases-and-examples/deploying/deploying-with-github-actions) |
0 commit comments