Merge pull request #2 from githubpartners/organize-steps

Restructure activity for learner to manually enter Azure private key
githubpartners · Aug 20, 2020 · 1cb4add · 1cb4add
2 parents 223211c + e688dca
commit 1cb4add
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 31 deletions.
diff --git a/config.yml b/config.yml
@@ -21,14 +21,19 @@ steps:
     actions:
       # if the pull was merged then comment in the issue with steps
       # to trigger the workflow
-      - type: gate
-        left:
-        operator: ===
-        right:
-        else:
+    - type: gate
+      every: true
+      gates:
+        - left: '%payload.action%'
+          operator: ===
+          right: closed
+        - left: '%payload.pull_request.merged%'
+      else:
+        - type: closeIssue
+          issue: Setting up your environment!
           # else if pull was simply closed, then also close the issue
           # and don't comment
-      - type: respond
-        with: trigger-azure-config.md
-        issue: Setting up your environment!
+    - type: respond
+      with: trigger-azure-config.md
+      issue: Setting up your environment!
       # Respond with "all-set" for next class... see you soon!
diff --git a/responses/create-azure-resources.md b/responses/create-azure-resources.md
@@ -1,41 +1,40 @@
 ## Getting the Probot application to Azure
 
-Microsoft Azure is packed full of cloud computing features. These features are a blessing and a fault when it comes to getting an environment fully configured and getting the codebase deployed to the proper resources.
+Microsoft Azure is packed full of cloud computing features. These features are an advantage and a fault when it comes to getting an environment fully configured and getting the codebase deployed to the proper resources.
 
 Luckily, using GitHub Actions, we can greatly reduce this pain point and implement a friction free process that does all of these cumbersome tasks for us.
 
 This pull request contains a workflow that will configure all the necessary resources and deploy the current version of your Probot application automatically for us! In order to get a good understanding of what this workflow is going, it is beneficial to examine this process from a manual perspective first.
 
+**Expand one of the following sections to lean how to configure Azure either manually or using GitHub Actions**
+
 <details><summary>Manually configuring Microsoft Azure</summary>
 
 **Provisioning**
 
 1. Configure a **subscription** (this is true even when using actions!)
-1. From within your subscription, create a new resource group
+2. From within your subscription, create a new resource group
    ![image](https://user-images.githubusercontent.com/38021615/89914895-8a557100-dbaa-11ea-8365-e1e69dccaf70.png)
-1. Give your resource group a name **probot-applications** as well as set a the region to **Central US**.
+3. Give your resource group a name **probot-applications** as well as set a the region to **Central US**.
    ![image](https://user-images.githubusercontent.com/38021615/89914986-a527e580-dbaa-11ea-8db4-b62273570cff.png)
-1. Click **next** a few times until you eventually click **create**
-1. You should now see your **probot-applicaitons resource group** located within your **subscription**
+4. Click **next** a few times until you eventually click **create**
+5. You should now see your **probot-applicaitons resource group** located within your **subscription**
    ![image](https://user-images.githubusercontent.com/38021615/89915129-d4d6ed80-dbaa-11ea-8113-d99545ab3048.png)
-1. Next, from within your **probot-applications resource group** create a new resource
+6. Next, from within your **probot-applications resource group** create a new resource
    ![image](https://user-images.githubusercontent.com/38021615/89915621-6f373100-dbab-11ea-8b58-5658d6023fb8.png)
-1. Select **App Service Plan** as the resource type from the wizard
+7. Select **App Service Plan** as the resource type from the wizard
    ![image](https://user-images.githubusercontent.com/38021615/89915811-ae658200-dbab-11ea-804b-4e432705136d.png)
-1. Give the plan a name of **prod-probot-apps** and ensure the SKU and size are set to **Free F1** (this will ensure you we use free tier resources and you don't get charged)
+8. Give the plan a name of **prod-probot-apps** and ensure the SKU and size are set to **Free F1** (this will ensure you we use free tier resources and you don't get charged)
    ![image](https://user-images.githubusercontent.com/38021615/89916192-3186d800-dbac-11ea-8598-347476bdc925.png)
-1. Continue clicking **next** and eventually **create**
-1. Back inside your **probot-applications resource group** add a new resource and select the **Web App** resource type from the wizard
+9. Continue clicking **next** and eventually **create**
+10. Back inside your **probot-applications resource group** add a new resource and select the **Web App** resource type from the wizard
    ![image](https://user-images.githubusercontent.com/38021615/89917327-870fb480-dbad-11ea-92ce-578f4e7e00bf.png)
-1. Like before, name it **probot-add-collaborators**, change the **Runtime Stack** to `Node 12 LTS`, select **Linux** as the Operating System. Lastly verify the region and the SKU
+11. Like before, name it **probot-add-collaborators**, change the **Runtime Stack** to `Node 12 LTS`, select **Linux** as the Operating System. Lastly verify the region and the SKU
    ![image](https://user-images.githubusercontent.com/38021615/89917584-cf2ed700-dbad-11ea-9cc7-7578342b58f1.png)
-1. Click **next** a few times and eventually the **create** button
-1. Now you can view the **probot-add-collaborators** deployment by clicking on the public link, doing show will result in a blank web page since we have not deployed any code to this resource
+12. Click **next** a few times and eventually the **create** button
+13. Now you can view the **probot-add-collaborators** deployment by clicking on the public link, doing show will result in a blank web page since we have not deployed any code to this resource
    ![image](https://user-images.githubusercontent.com/38021615/89918100-77dd3680-dbae-11ea-9953-68e501e4d3fb.png)
-1. Before deploying you'll need to add your secrets to your **probot-add-collaborator app service** by going to the configuration settings
-   ![image](https://user-images.githubusercontent.com/38021615/89952339-eab3d500-dbe1-11ea-9861-b18a053b3dc0.png)
-   > **Note: when adding the PRIVATE_KEY you need to add in \n characters so that it looks like this** > **-----BEGIN PRIVATE KEY-----\nLONG_STRING_HERE\n-----END PRIVATE KEY-----**
-1. After clicking **save** you are ready to deploy the codebase in this repo to your Azure resources.
+
 
 **Deployment**
 
@@ -103,12 +102,12 @@ Let's take a quick peek at the jobs in this workflow before it get's triggered a
      - name: Configure probot app secrets
        if: success()
        run: |
-         az webapp config appsettings set  --name ${{ env.AZURE_WEBAPP_NAME }} --resource-group ${{ env.AZURE_RESOURCE_GROUP }} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}} --settings APP_ID=${{secrets.PROBOT_APP_ID}} PRIVATE_KEY=${{secrets.PROBOT_APP_PRI_KEY}} WEBHOOK_SECRET=${{secrets.PROBOT_WEBHOOK_SECRET}}
+         az webapp config appsettings set  --name ${{ env.AZURE_WEBAPP_NAME }} --resource-group ${{ env.AZURE_RESOURCE_GROUP }} --subscription ${{secrets.AZURE_SUBSCRIPTION_ID}} --settings APP_ID=${{secrets.PROBOT_APP_ID}} 
    ```
 
 1. In the example in step 2 you should notice a range of environment variables and repository secrets being used to fill in the sensitive information for each command. You may have also noticed the conditional logic `if: success()` that will cause these steps to execute sequentially to ensure resources are created in the proper order.
-   > **Note: Azure CLI is not the most secure method for this task. It returns objects that print sensitive information, like the PROBOT_APP_PRI_KEY to the terminal, and as such is being used in this capacity for demonstration purposes only. Take care when using Azure CLI.**
-1. The final few steps handle getting the our codebase deployed to the newly created Azure resources! We first setup our NodeJS environment, then install our dependencies and finally deploy our packed to azure
+   > **Note: Azure CLI is not the most secure method for this task. It returns objects that print sensitive information. As such, the object is being used in this capacity for demonstration purposes only. Take care when using Azure CLI.**
+2. The final few steps handle getting the our codebase deployed to the newly created Azure resources! We first setup our NodeJS environment, then install our dependencies and finally deploy our packed to azure
 
    ```
      - name: use Node
@@ -131,13 +130,52 @@ Let's take a quick peek at the jobs in this workflow before it get's triggered a
 
 ---
 
-<h5 align="center">Your turn!  You have two choices on how to proceed with this activity:</h5>
+### Activity
+
+Now, it's your turn to configure your Azure environment. You can proceed with either the manual configuration or use GitHub Actions.  
+
+But first, you will need to add your private key manually to the Azure environment.
 
-1. Follow the manual process for configuring Microsoft Azure and simply **close** this pull request when you are finished.
-2. Use this Actions workflow to configure Azure. To use this workflow, **merge** this pull request and head back to the **Setting up your environment!** issue for further instructions.
+#### 1. Add your private key to you Azure application
+
+The Probot app will need to make use of a private key. In a real world setting, we could automate this step by adding it to our workflow.  However, due to a known bug in Azure that occurs when passing the the private key data, we'll guide you through the manual entry of the private key in Azure. 
+
+1. Copy your private key. 
+
+  > **Note:** When adding the PRIVATE_KEY you need to add in the line break characters (\n) so that it looks like this:
+  
+   ```
+      -----BEGIN PRIVATE KEY-----\n
+      LONG_STRING_HERE\n
+      -----END PRIVATE KEY-----
+   ```
+
+2. Add your private key to your **probot-add-collaborator app service** 
+   - Go to **Settings > Configuration**
+   - Add a new application setting
+   - Paste in the private key
+
+   ![image](https://user-images.githubusercontent.com/38021615/89952339-eab3d500-dbe1-11ea-9861-b18a053b3dc0.png)
+
+3. Save the key
+4. If prompted to Resave, click Continue
+5. You are ready to deploy the codebase in this repo to your Azure resources
+
+
+#### 2. Configure Azure
+
+##### Manual configuration
+
+- Follow the manual process shown above to for configuring Microsoft Azure and simply **close** this pull request when you are finished.
+
+##### Configuration using GitHub Actions 
+- Use this Actions workflow to configure Azure. To use this workflow:
+  1. **Merge** this pull request 
+  2. Go to the issue **Setting up your environment!** issue for further instructions.
 
 In either case, once the deployment of code is finished you need to replace the [Probot Webhook URL](https://github.com/settings/apps) in the app settings to point to your azure deployment
 
 ![image](https://user-images.githubusercontent.com/38021615/89918100-77dd3680-dbae-11ea-9953-68e501e4d3fb.png)
 
 ![image](https://user-images.githubusercontent.com/69262924/89957400-26539c80-dbec-11ea-8c7c-74f9595f8531.png)
+