diff --git a/Deployment#6.pdf b/Deployment#6.pdf deleted file mode 100644 index c0fec9bf..00000000 Binary files a/Deployment#6.pdf and /dev/null differ diff --git a/Jenkinsfile b/Jenkinsfile new file mode 100644 index 00000000..3e269af9 --- /dev/null +++ b/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' + } + } + } + } + } +} diff --git a/README.md b/README.md index 25e57d5b..4e1bc487 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,115 @@ -# DEPLOY6_FE -

Deployment 6

+# 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 + ''' + } + ``` diff --git a/Screen Shot 2021-09-25 at 5.08.31 PM.png b/Screen Shot 2021-09-25 at 5.08.31 PM.png new file mode 100644 index 00000000..ab21d338 Binary files /dev/null and b/Screen Shot 2021-09-25 at 5.08.31 PM.png differ diff --git a/kura_test_repo/cypress.json b/kura_test_repo/cypress.json index 09b00a6d..438af0a2 100644 --- a/kura_test_repo/cypress.json +++ b/kura_test_repo/cypress.json @@ -3,5 +3,8 @@ "reporterOptions": { "mochaFile": "results/cypress-report.xml", "toConsole": true - } + }, + "integrationFolder":"./cypress/integration", + "testFiles":"**.spec.js" + } diff --git a/kura_test_repo/cypress/integration/test.spec.js b/kura_test_repo/cypress/integration/test.spec.js index a4311cdd..5d6dd9ee 100644 --- a/kura_test_repo/cypress/integration/test.spec.js +++ b/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') diff --git a/test.spec.js.mp4 b/test.spec.js.mp4 new file mode 100644 index 00000000..c267885c Binary files /dev/null and b/test.spec.js.mp4 differ