Zach's Deployment 6

Jenkinsfile

@@ -0,0 +1,50 @@
+pipeline {
+  agent{
+
+    label 'Agent One'
+
+  }
+  triggers {
+    pollSCM('')
+  }
+  stages {
+    stage ('Build') {
+
+      steps {
+        sh 'rm -rf ./kura_test_repo/cypress2'
+        dir('./kura_test_repo'){
+          sh '''
+            npm install
+            npm run build
+            sudo npm install -g serve
+            serve -s build &
+            '''
+        } 
+
+      }
+    }
+    stage ('Test') {
+      agent {
+        label 'Agent Two'
+      }
+      steps {
+        dir('./kura_test_repo'){
+          sh '''
+            npm install cypress
+            npm install mocha
+            npx cypress run --spec ./cypress/integration/test.spec.js
+            '''
+        }
+
+      }
+
+      post {
+        always {
+           dir('./kura_test_repo'){
+            junit 'results/cypress-report.xml'
+           }
+        }
+      }
+    }
+  }
+}

README.md

@@ -1,16 +1,115 @@
-# DEPLOY6_FE
-<h1 align=center>Deployment 6</h1>
+# Deployment 6: React and Frontend Testing
 
-Welcome to deployment 6, for this deployment you will need to follow the directions in the deployment6.pdf.    
+## Purpose 
 
-- Be sure to include the following below in your pull request: 
+Purpose of this deployment is to utilize a Jenkins controller and two other agents(hosted on 3 different Amazon EC2s) to host a React build and run a cypress test. 
 
-***Requirements:*** 
-- [x]Document issues and anything you decided to do different..
-- [x]Generate a failed and passed test.
-- [x]Take a screenshots of your failed and passed test.
-- [x]Locate and upload cypress's screenshot and video of the headless browser test. 
+## Steps to replicate
 
-👉Link to deployment instructions: [here](https://github.com/kura-labs-org/DEPLOY6_FE/blob/main/Deployment%236.pdf)  
+1. Launch one Amazon Linux 2 that will be your Jenkins master/controller and name it appropriately and install Jenkins. 
+2. Launch 2 Amazon Ubuntu servers, as these will be the two Jenkins agents. 
+    - For Agent 1 set the inbound rules to ports 22 and 5000. 5000 is the port the react app will be served.
+    - For Agent 2 set the inbound rules to port 22 for SSH. 
+3. Sign into your Jenkins controller and download the nodejs, EC2, and Maven plugin. 
+4. In your first Jenkins Agent install the following default-jre, git, nodejs, and npm
+    ```
+    $ sudo apt update
+    $ sudo apt-get install nodejs npm
+    $ sudo apt-get install default-jre
+    ```
+5. Now for the second Jenkins Agent install the following packages
+    ```
+    $ sudo apt update 
+    $ sudo apt-get install default-jre git nodejs npm maven \
+        libgtk2.0-0 libgtk3-0 libgbm-dev \
+        libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb
 
-![image](https://i.morioh.com/210507/ac11056f.webp)
+    ```
+6. In your Jenkins controller add the two agents through the Jenkins UI using an SSH connection. 
+    - For usage select only build jobs with label expressions matching this node 
+    - Select launch agents via SSH and add the appropriate credentials correlating with your EC2 agents
+    - I labeled my respective nodes/agents AgentOne and AgentTwo
+    - Make sure connection is established.
+7. Create a new Multibranch pipeline and name it what you wish. 
+8. For branch source select Github and add your github credentials and select this repo or your own repo. 
+9. For build configuration select by Jenkinsfile.
+10. Now for the pipeline add the following to your Jenkinsfile. 
+```
+pipeline {
+  agent{
+
+    label 'Agent One'
+
+  }
+  triggers {
+    pollSCM('')
+  }
+  stages {
+    stage ('Build') {
+
+      steps {
+        sh 'rm -rf ./kura_test_repo/cypress2'
+        dir('./kura_test_repo'){
+          sh '''
+            npm install
+            npm run build
+            sudo npm install -g serve
+            serve -s build &
+            '''
+        } 
+
+      }
+    }
+    stage ('Test') {
+      agent {
+        label 'Agent Two'
+      }
+      steps {
+        dir('./kura_test_repo'){
+          sh '''
+            npm install cypress
+            npm install mocha
+            npx cypress run --spec ./cypress/integration/test.spec.js
+            '''
+        }
+
+      }
+
+      post {
+        always {
+           dir('./kura_test_repo'){
+            junit 'results/cypress-report.xml'
+           }
+        }
+      }
+    }
+  }
+}
+```
+11. Lastly change the test.spec.js file in ./kura_test_repo/cypress/integration to point to the ip address of Agent 1. 
+12. Now schedule a build and run it.
+13. To find the screen shots, SSH into the agent which runs the cypress testing and locate the cypress folder.
+  ```
+  $ cd jenkins/workspace/{name of the build}/kura_test_repo/cypress
+  # Now you will see a screenshots and videos folder
+  ```
+14. Now if you want to actually save these files on your computer utilize the scp command, which allows you to copy files over ssh connections
+  ```
+  $ scp -i ssh_key.pem ubuntu@{your_ip_address}://home/ubuntu/jenkins/workspace/{name of your workspace}/kura_test_repo/cypress/videos/test.spec.js.mp4 .  
+  ```
+
+
+## Troubleshooting and Tips
+- Make sure Agent one security groups are configured that allows for inbound of port 5000 and port 22. If port 5000 isn't set correctly then cypress can't run it's tests. 
+- Since we're not using Amazon Linux2 but Ubuntu to ssh the command is a bit different. 
+    ```
+    ssh -i permissions_file.pem ubuntu@ip_address
+    ```
+- Also since the application source code isn't in the root we have to point towards it with Jenkins. We can do this with the following block
+    ```
+    dir(./kura_test_repo){
+        sh '''
+        # Run the commands you need
+        '''
+    }
+    ```

kura_test_repo/cypress.json

@@ -3,5 +3,8 @@
   "reporterOptions": {
     "mochaFile": "results/cypress-report.xml",
     "toConsole": true
-  }
+  },
+  "integrationFolder":"./cypress/integration",
+  "testFiles":"**.spec.js"
+
 }

kura_test_repo/cypress/integration/test.spec.js

@@ -1,6 +1,9 @@
 describe('Heading', () => {
     it('has the right title', () => {
-        cy.visit('http://172.31.31.38:5000/example-1')
+        // We need the ip address to run this 
+        let ip_address = '3.140.208.112'
+
+        cy.visit('http://3.140.208.112:5000/example-1')
 
         cy.get('h1')
             .invoke('text')