RedHatTraining/rht-labs-docs.git

Fixed typo with reference to wrong build project name

Deven Phillips

2018-06-13 a8799756895fad4a836f0ca82eb5be7a9408dc93

commit \| author \| age
2b8436	1	# Attack of the Pipelines
c951f7	2
b5d705	3	> In this exercise we will explore the sample TODO List application and create a pipeline in Jenkins to build and deploy our code.
2b8436	4
D	5	![jenkins-time](../images/exercise2/jenkins-time.jpg)
	6
14cd2d	7	## Exercise Intro
e43fd2	8	This lesson is focused on creating a pipeline for our application. What is a pipeline? A pipeline is a series of steps or stages that takes our code from source to a deployed application. There can be many stages to a pipeline but a simple flow is to run a `build > bake > deploy`. Usually the first stage is triggered by something like a git commit. There could be many steps in each of these stages; such as compiling code, running tests and linting. All of these are done to try and drive up code quality and give more assurance that what is deployed is behaving as expected. In the exercise we will create Jenkins pipeline by configuring it through the UI, this will create an un-gated pathway to production
14cd2d	9
1173e5	10	First we will explore the sample application and get it running locally. The sample app is a `todolist` app - the `Hello World` app of the modern day.
14cd2d	11
D	12	#### Why create pipelines
	13	* Assurance - drive up code quality and remove the need for dedicated deployment / release management teams
	14	* Freedom - allow developers to take ownership of how and when code gets built and shipped
3f6da0	15	* Reliability - pipelines are a bit boring; they execute the same way each and every time they're run!
14cd2d	16	* A pathway to production:
D	17	- Puts the product in the hands of the customer quicker
	18	- Enables seamless and repeatable deploys
	19	- More prod like infrastructure increases assurance
	20	- “We have already done it” behavior de-risks go live
	21
43f2f2	22	_____
c951f7	23
D	24	## Learning Outcomes
2b8436	25	As a learner by the end of this lesson you will be able to
D	26
	27	- Build and run the full stack of the TODO List application locally
	28	- Create an un-gated pipeline using the Jenkins UI for the backend and frontend
	29	- Add branching to the pipeline to target specific namespace
c951f7	30
D	31	## Tools and Frameworks
cebd30	32	> The following tools are used throughout this exercise. Familiarity with them is not required but knowing what they are may help. You will not need to install Vue or Mongodb they are taken care of by our `todolist` app.
c951f7	33
D	34	1. [Jenkins](https://jenkins.io/) - OpenSource build automation server; highly customisable through plugins
2b8436	35	1. [NodeJS](https://nodejs.org/en/) - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.
D	36	1. [MongoDB](https://www.mongodb.com/what-is-mongodb) - MongoDB stores data in flexible, JSON-like documents, meaning fields can vary from document to document and data structure can be changed over time
	37	1. [VueJS](https://vuejs.org/) - Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. It is designed from the ground up to be incrementally adoptable, and can easily scale between a library and a framework depending on different use cases. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.
c951f7	38
43f2f2	39	## Big Picture
2b8436	40	> From the previous exercise; we created some supporting tooling needed by our app/
43f2f2	41
D	42	_____
c951f7	43
D	44	## 10,000 Ft View
2b8436	45	> _This lab requires users to take the sample TODO app and create a build pipeline in Jenkins by clicking your way to success ending up with an app deployed to each of the namespaces created previously_
43f2f2	46
e43fd2	47	2. Import the projects into your gitlab instance. See the README of each for build instructions
43f2f2	48
2b8436	49	2. Deploy a `MongoDB` using the provided template to all project namespace.
D	50
1173e5	51	2. Create 2 pipelines with three stages (`build`, `bake`, `deploy`) in Jenkins for `develop` & `master` branches on the `todolist-fe` such that:
e919d0	52	* a `Build` job is responsible for compiling and packaging our code:
2b8436	53	1. Checkout from source code (`develop` for `<yourname>-dev` & `master` for `<yourname>-test`)
D	54	2. Install node dependencies and run a build / package
e919d0	55	3. Send the package to Nexus
D	56	4. Archive the workspace to persist the workspace in case of failure
	57	4. Tag the GitLab repository with the `${JOB_NAME}.${BUILD_NUMBER}` from Jenkins. This is our `${BUILD_TAG}` which will be used on downstream jobs.
	58	5. Trigger the `bake` job with the `${BUILD_TAG}` param
	59	* a `Bake` job should take the package and put it in a Linux Container
2b8436	60	1. Take an input of the previous jobs `${BUILD_TAG}` ie `${JOB_NAME}.${BUILD_NUMBER}`.
8894bf	61	2. Checkout the binary from Nexus and unzip its contents
W	62	3. Run an oc start-build of the App's BuildConfig and tag its imagestream with the provided `${BUILD_TAG}`
2b8436	63	4. Trigger a deploy job using the parameter `${BUILD_TAG}`
e919d0	64	* a `deploy` job should roll out the changes by updating the image tag in the DC:
2b8436	65	1. Take an input of the `${BUILD_TAG}`
D	66	2. Patch / set the DeploymentConfig to the image's `${BUILD_TAG}`
	67	3. Rollout the changes
	68	4. Verify the deployment
	69
	70	2. Repeat the above setup for the backend `todolist-fe`. TIP - use the copy config to speed things up!
	71
	72	2. Verify that both apps and the DB are talking to one another as expected.
c951f7	73
D	74	## Step by Step Instructions
7383de	75	> This is a fairly structured guide with references to exact filenames and sections of text to be added.
c951f7	76
f016b7	77	### Part 1 - Explore the Todo List App
7383de	78	> _In this part of the exercise we will explore the sample application, become familiar with it locally before building and deploying in OCP Land_
43f2f2	79
d4f1fa	80	#### 1a Todolist-fe
4c8010	81
33c738	82	2. Git clone the `todolist-fe` project to somewhere sensible and checkout the `develop` branch using the following.
7383de	83	```bash
fad576	84	cd ~/innovation-labs
D	85	```
	86	```bash
b6978f	87	git clone https://github.com/rht-labs/todolist-fe.git
fad576	88	```
D	89	```bash
b6978f	90	cd todolist-fe
4c8010	91	```
b6978f	92	```bash
D	93	./git-pull-all.sh
fad576	94	```
D	95	```bash
	96	git checkout develop
c951f7	97	```
7383de	98
8894bf	99	2. Open up Gitlab and login. Create a new project (internal) in GitLab called `todolist-fe` to host your clone of the project and copy its remote address. ![new-gitlab-proj](../images/exercise2/new-gitlab-proj.png)
7383de	100
D	101	2. In your local clone of the `todolist-fe`, remove the origin and add the GitLab origin by replacing `<YOUR_GIT_LAB_PROJECT>`. Push your app to GitLab
	102	```bash
b6978f	103	git remote set-url origin <YOUR_GIT_LAB_PROJECT>
10416f	104	# verify the origin has been updated
b6978f	105	git remote -v
D	106	git push -u origin --all
c951f7	107	```
7383de	108
D	109	2. To get the app running locally; first check you've got node and npm installed
	110	```bash
b6978f	111	node -v
D	112	npm -v
7383de	113	```
1173e5	114	<p class="tip" >
7383de	115	NOTE - If you are missing these dependencies; install them with ease using the [Node Version Manager](https://github.com/creationix/nvm)
D	116	</p>
	117	![node-version](../images/exercise2/node-version.png)
	118
e43fd2	119	2. The `todolist-fe` has a package.json at the root of the project, this defines some configuration for the app including its dependencies, dev dependencies, scripts and other configuration. Install the app's dependencies
7383de	120	```bash
b6978f	121	npm install
7383de	122	```
D	123
abb0a5	124	2. The `todolist-fe` has some scripts defined in the package.json at the root of the project. A snippet of the npm scripts are shown below. To run any of these scripts run `npm run <SCRIPT_NAME>`. Let's start by serving our application
7383de	125	![npm-scripts](../images/exercise2/npm-scripts.png)
D	126	```bash
	127	npm run serve
	128	```
	129
10416f	130	2. This will take sometime to execute; but once done it should open the browser for you displaying the homepage of the `todolist-fe` app.
7383de	131	![todo-list-app](../images/exercise2/todo-list-app.png)
10416f	132	* Click 'Todo' at the top of the home page to get to the above page.
abb0a5	133	* The server hosting it live reloads; so if you make changes to your code base the app will live update
7383de	134	* The Data you see in the screen is dummy / stubbed data. This is served up when there is no backend connection found
D	135
abb0a5	136	2. The app is a todolist manager built in Vue.js. Play around with the App. You will notice when you add todos they appear and clear as expected. If you refresh the page you'll lose all additions. This is because there is no persistence layer. We will add one in the next part.
7383de	137
D	138	3. The structure of the `todolist-fe` is as follows.
	139	```bash
	140	todolist-fe
	141	├── jest.config.js
	142	├── jsconfig.json
	143	├── nightwatch.config.js
	144	├── node_modules
	145	├── package.json
	146	├── public
	147	│ ├── favicon.ico
	148	│ ├── img
	149	│ ├── index.html
	150	│ └── manifest.json
	151	├── src
	152	│ ├── App.vue
	153	│ ├── assets
	154	│ ├── components
10416f	155	│ │ └── *
7383de	156	│ ├── config
D	157	│ ├── main.js
	158	│ ├── registerServiceWorker.js
	159	│ ├── router.js
	160	│ ├── scss
	161	│ ├── services
	162	│ ├── store
10416f	163	│ │ └── *
7383de	164	│ └── views
10416f	165	│ └── *
7383de	166	├── tests
D	167	│ ├── e2e
	168	│ └── unit
	169	└── vue.config.js
	170	```
	171	where the following are the important things:
	172	* `./src` is the main collection of files needed by the app. The entrypoint is the `main.js` which is used to load the root `App.vue` file.
	173	* `./node_modules` is where the dependencies are stored
b5d705	174	* `./test` contains our end-to-end tests and unit tests. More covered on these in later exercises.
10416f	175	* `./src/components` contains small, lightweight reusable components for our app. For example, the `NewTodo` component which encapsulates the styling, logic and data for adding a new todo to our list
7383de	176	* `./src/store` is the `vuex` files for managing application state and backend connectivity
D	177	* `./src/views` is the view containers; which are responsible for loading components and managing their interactions.
	178	* the `./src/router.js` controls routing logic. In our case the app only has one real endpoint.
1173e5	179	* `./src/scss` contains custom SCSS used in the application.
7383de	180	* `./*.js` is mostly config files for running and managing the app and the tests
c951f7	181
33c738	182	2. To prepare Nexus to host the binaries created by the frontend and backend builds we need to run a prepare-nexus script. Before we do this we need to export some variables and change `<YOUR_NAME>` accordingly in the below commands.
4c8010	183	```bash
18681b	184	export NEXUS_SERVICE_HOST=$(oc get route nexus --template='{{.spec.host}}' -n <YOUR_NAME>-ci-cd)
33c738	185	```
D	186	```bash
4c8010	187	export NEXUS_SERVICE_PORT=80
33c738	188	```
D	189	```bash
4c8010	190	npm run prepare-nexus
A	191	```
	192	<p class="tip">
	193	NOTE - This step in a residency would be automated by a more complex nexus deployment in the ci-cd project
	194	</p>
	195
d4f1fa	196	#### 1b Todolist-api
456daa	197
d2e708	198	2. Now let's move on to the `todolist-api` and wire them together. As with the `todolist-fe` we need to clone the repo and add it to our GitLab in the cluster.
D	199	```bash
fad576	200	cd ~/innovation-labs
D	201	```
	202	```bash
b6978f	203	git clone https://github.com/rht-labs/todolist-api.git
fad576	204	```
D	205	```bash
b6978f	206	cd todolist-api
4c8010	207	```
b6978f	208	```bash
D	209	./git-pull-all.sh
fad576	210	```
D	211	```bash
	212	git checkout develop
d2e708	213	```
D	214
8894bf	215	2. On GitLab; create a new project (internal) called `todolist-api` to host your clone of the project and copy its remote address as you did for the previous repositories.
d2e708	216
D	217	2. In your local clone of the `todolist-api`, remove the origin and add the GitLab origin by replacing `<YOUR_GIT_LAB_PROJECT>`. Push your app to GitLab
	218	```bash
b6978f	219	git remote set-url origin <YOUR_GIT_LAB_PROJECT>
D	220	```
	221	```bash
	222	git push -u origin --all
d2e708	223	```
D	224
	225	2. Once pushed; explore the application. It is a NodeJS application with the Express.js framework and MongoDB for persistent storage. Same as before, the `package.json` defines most of the configuration etc. Install the dependencies
	226	```bash
b6978f	227	npm i
d2e708	228	```
D	229
	230	2. While the dependencies are being installed; explore the project structure.
	231	```bash
	232	todolist-api
	233	├── Dockerfile
	234	├── Gruntfile.js
	235	├── README.md
	236	├── node_modules
	237	├── package-lock.json
	238	├── package.json
	239	├── server
	240	│ ├── api
	241	│ │ └── todo
	242	│ ├── app.js
	243	│ ├── components
	244	│ │ └── errors
	245	│ ├── config
	246	│ │ ├── environment
	247	│ │ ├── express.js
	248	│ │ ├── local.env.sample.js
	249	│ │ └── seed.js
	250	│ ├── mocks
	251	│ │ ├── mock-routes-config.json
	252	│ │ ├── mock-routes.js
	253	│ │ └── mock-routes.spec.js
	254	│ ├── routes.js
	255	│ └── views
	256	│ └── 404.html
	257	└── tasks
	258	└── perf-test.js
	259	```
	260	where the following are the important things:
	261	* `./server` is the main collection of files needed by the app. The entrypoint is the `app.js`
	262	* `./node_modules` is where the dependencies are stored
1173e5	263	* `./server/api` is where the api's controller, data model & unit test are stored.
d2e708	264	* `./server/mocks` is a mock server used for when there is no DB access
10416f	265	* `./server/config` stores our Express JS config, header information and other middleware.
1173e5	266	* `./server/config/environment` stores environment specific config; such as connectivity to backend services like MongoDB.
b5d705	267	* `./tasks` is a collection of additional `Grunt` tasks which will be used in later exercises
10416f	268	* `Grunt` is a taskrunner for use with Node.JS projects
d2e708	269	* `package.json` contains the dependency list and a lot of very helpful scripts for managing the app lifecycle
D	270
df8dea	271	2. A snippet of the npm scripts are shown below. There are application start scripts, build and test items which will be used in the build. The ones for MongoDB are just provided for convenience and require Docker installed to execute.
d2e708	272	```json
D	273	"scripts": {
	274	"start": "node server/app.js",
	275	"dev": "./node_modules/.bin/grunt serve",
	276	"jshint": "./node_modules/.bin/grunt jshint",
	277	"clean": "rm -rf reports package-contents*",
	278	"package": "zip -r package-contents.zip package-contents",
	279	"test": "node_modules/.bin/nyc node_modules/.bin/mocha server/*/.spec.js --exit",
	280	"mongo" : "docker run -i -d --name mongo-local -p 27017:27017 mongo",
	281	"mongo:drop" : "npm run mongo:stop && docker rm mongo-local",
	282	"mongo:stop" : "docker stop mongo-local",
	283	"mongo:start" : "docker start mongo-local"
	284	},
456daa	285	```
A	286
e43fd2	287	2. To run the application; start a new instance of MongoDB by running the following. This will pull a mongodb image from Dockerhub and then start it for our API to connect to.
d2e708	288	```bash
b6978f	289	npm run mongo
d2e708	290	```
D	291	<p class="tip">
60ff08	292	NOTE - `npm run mongo:drop` is used to completely remove the running container. `npm run mongo:stop` & `npm run mongo:start` will preserve data in the container
d2e708	293	</p>
D	294
	295	2. Fire up the `todolist-api` by running.
	296	```bash
b6978f	297	npm run start
d2e708	298	```
D	299	![node-app-started](../images/exercise2/node-app-started.png)
	300
10416f	301	2. Check things are up and running by testing the API with a `curl`. The API should return some seeded data (stored in `server/config/seed.js`)
d2e708	302	```bash
b6978f	303	curl localhost:9000/api/todos
d2e708	304	```
D	305	```json
	306	[{
	307	"_id": "5ac8ff1fdfafb02138698948",
	308	"title": "Learn some stuff about MongoDB",
	309	"completed": false,
	310	"__v": 0
	311	},
	312	{
	313	"_id": "5ac8ff1fdfafb02138698949",
	314	"title": "Play with NodeJS",
	315	"completed": true,
	316	"__v": 0
	317	}]
	318	```
	319
10416f	320	2. Now let's check out `todolist-fe` app by reloading the browser. We should now see our dummy front end data is replaced by the backend seed data. Adding new todos will add them in the backend, these will persist when the page is refreshed.
d2e708	321	![fullstack-app](../images/exercise2/fullstack-app.png)
D	322
1173e5	323	### Part 2 - Add configs to cluster
f016b7	324	> _In this exercise; we will use the OpenShift Applier to drive the creation of cluster content required by the app such as MongoDB and the Apps Build / Deploy Config_
9fc88c	325
1173e5	326	4. On your terminal navigate to the root of the `todolist-fe` application. The app contains a hidden folder called `.openshift-applier`. Move into this `.openshift-applier` directory and you should see a familiar looking directory structure for an Ansible playbook.
cdcafd	327	```
D	328	.openshift-applier
	329	├── README.md
	330	├── apply.yml
	331	├── inventory
	332	│ ├── group_vars
	333	│ │ └── all.yml
	334	│ └── hosts
	335	├── params
	336	│ ├── build
	337	│ ├── dev
68d81a	338	│ ├── ocp-pipeline
cdcafd	339	│ └── test
D	340	├── requirements.yml
	341	└── templates
68d81a	342	├── ocp-pipeline.yml
D	343	├── todolist-fe-build.yml
	344	└── todolist-fe-deploy.yml
cdcafd	345	```
ea5b30	346	with the following
1173e5	347	* the `apply.yml` file is the entrypoint.
cdcafd	348	* the `inventory` contains the objects to populate the cluster with.
D	349	* the `params` contains the variables we'll apply to the `templates`
f016b7	350	* the `templates` required by the app. These include the Build, Deploy configs as well as the services, health checks, and other app definitions.
cdcafd	351
1173e5	352	4. There are a few updates to these manifests we need to make before applying the cluster content. In the `apply.yml` update the namespace `<YOUR_NAME>` variables accordingly.
cdcafd	353	```yaml
D	354	ci_cd_namespace: donal-ci-cd
	355	dev_namespace: donal-dev
	356	test_namespace: donal-test
	357	```
	358
1173e5	359	4. In the `params` folder update the `dev` and `test` files with the correct `<YOUR_NAME>` as you've done above. Example for the `dev` file:
cdcafd	360	```bash
D	361	PIPELINES_NAMESPACE=donal-ci-cd
c58300	362	NAME=todolist-fe
cdcafd	363	DEPLOYER_USER=jenkins
D	364	APP_TAG=latest
	365	NAMESPACE=donal-dev
	366	```
	367
f016b7	368	4. With those changes in place we can now run the playbook. First install the `openshift-applier` dependency and then run the playbook (from the `.openshift-applier` directory). This will populate the cluster with all the config needed for the front end app.
cdcafd	369	```bash
b6978f	370	ansible-galaxy install -r requirements.yml --roles-path=roles
D	371	```
	372	```bash
	373	ansible-playbook apply.yml -i inventory/
cdcafd	374	```
071905	375	![ansible-success](../images/exercise2/ansible-success.png)
cdcafd	376
f016b7	377	4. Once successful, `commit` and `push` your changes to gitlab.
68d81a	378	```bash
b6978f	379	git add .
D	380	```
	381	```bash
	382	git commit -m "UPDATE - change namespace vars to donal"
	383	```
	384	```bash
	385	git push
68d81a	386	```
f016b7	387
33c738	388	4. Back on your terminal navigate to the root of the `todolist-api` application. Open the `.openshift-applier` directory in your editor. The same layout as seen in `todolist-fe` should be visible with one noticeable difference; the api requires `MongoDB` to connect to at runtime.
c58300	389
D	390	4. In the `apply.yml` update the namespace `<YOUR_NAME>` variables accordingly. For example:
	391	```yaml
	392	ci_cd_namespace: donal-ci-cd
	393	dev_namespace: donal-dev
	394	test_namespace: donal-test
	395	```
	396
	397	4. In the `params` folder update the `dev` and `test` files with the correct `<YOUR_NAME>` as you've done above. Example for the `dev` file:
	398	```bash
	399	PIPELINES_NAMESPACE=donal-ci-cd
	400	NAME=todolist-api
	401	DEPLOYER_USER=jenkins
	402	APP_TAG=latest
	403	NAMESPACE=donal-dev
	404	```
	405
bfd54c	406	4. Finally; run the Openshift Applier and install its dependencies to run the content into the cluster
c58300	407	```bash
b6978f	408	ansible-galaxy install -r requirements.yml --roles-path=roles
D	409	```
	410	```bash
	411	ansible-playbook apply.yml -i inventory/
c58300	412	```
9fc88c	413
68d81a	414	4. Once successful, `commit` and `push` your changes to gitlab.
D	415	```bash
b6978f	416	git add .
D	417	```
	418	```bash
	419	git commit -m "UPDATE - change namespace vars to donal"
	420	```
	421	```bash
	422	git push
68d81a	423	```
e90e9c	424
68d81a	425	4. Validate the build and deploy configs have been created in Openshift by checking `<YOUR_NAME> CI-CD builds` for the `BuildConfigs`
D	426	![ocp-app-bc](../images/exercise2/ocp-app-bc.png)
	427
	428	4. Check `<YOUR_NAME>-dev` to see the deployment configs are in place
6c8424	429	![ocp-app-dc](../images/exercise2/ocp-app-dc.png)
e90e9c	430
1173e5	431	### Part 3 - Build > Bake > Deploy
0e648a	432	> _In this exercise; we take what we have working locally and get it working in OpenShift_
9fc88c	433
41217d	434	This exercise will involve creating three stages (or items) in our pipeline, each of these is detailed below at a very high level. Move on to the next step to begin implementation.
D	435	* a build job is responsible for compiling and packaging our code:
	436	1. Checkout from source code (`develop` for `<yourname>-dev` & `master` for `<yourname>-test`)
	437	2. Install node dependencies and run a build / package
	438	3. Send the package to Nexus
	439	4. Archive the workspace to persist the workspace in case of failure
	440	4. Tag the GitLab repository with the `${JOB_NAME}.${BUILD_NUMBER}` from Jenkins. This is our `${BUILD_TAG}` which will be used on downstream jobs.
	441	5. Trigger the `bake` job with the `${BUILD_TAG}` param
	442	* a bake job should take the package and put it in a Linux Container
	443	1. Take an input of the previous jobs `${BUILD_TAG}` ie `${JOB_NAME}.${BUILD_NUMBER}`.
8894bf	444	2. Checkout the binary from Nexus and unzip its contents
W	445	3. Run an oc start-build of the App's BuildConfig and tag its imagestream with the provided `${BUILD_TAG}`
41217d	446	4. Trigger a deploy job using the parameter `${BUILD_TAG}`
D	447	* a deploy job should roll out the changes by updating the image tag in the DC:
	448	1. Take an input of the `${BUILD_TAG}`
	449	2. Patch / set the DeploymentConfig to the image's `${BUILD_TAG}`
	450	3. Rollout the changes
	451	4. Verify the deployment
76d54e	452	* We will now go through these steps in detail.
9fc88c	453
5b1604	454	#### 3a - Build
9fc88c	455
c58300	456	5. With the BuildConfig and DeployConfig in place for both our apps (`-fe` & `-api`) from previous steps; Log into Jenkins and create a `New Item`. This is just jenkins speak for a new job configuration. ![new-item](../images/exercise2/new-item.png)
9fc88c	457
40c0ca	458	5. Name this job `dev-todolist-fe-build` and select `Freestyle Project`. All our jobs will take the form of `<ENV>-<APP_NAME>-<JOB_PURPOSE>`. ![freestyle-job](../images/exercise2/freestyle-job.png)
9fc88c	459
e43fd2	460	5. The page that loads is the Job Configuration page and it can be returned to at anytime from Jenkins. Let's start configuring our job. To conserve space; we will make sure Jenkins only keeps the last build's artifacts. Tick the `Discard old builds` checkbox, then `Advanced` and set `Max # of builds to keep with artifacts` to 1 as indicated below
b815cc	461	![keep-artifacts](../images/exercise2/keep-artifacts.png)
43f2f2	462
5b1604	463	5. Our NodeJS build needs to be run on the `jenkins-slave-npm` we bought in in the previous chapter. Specify this in the box labelled `Restrict where this project can be run` ![label-jenkins-slave](../images/exercise2/label-jenkins-slave.png)
c951f7	464
1b285d	465	5. On the Source Code Management tab, select the Git radio button, specify the endpoint for our GitLab `todolist-fe` Project and specify your credentials from the dropdown box. Set the Branch Specifier to `develop`. ![git-scm](../images/exercise2/git-scm.png)
c951f7	466
579436	467	5. Scroll down to the Build Environment tab and select the `Color ANSI Console Output` checkbox ![ansi](../images/exercise2/ansi.png)
e919d0	468
76d54e	469	5. Move on to the Build section and select `Add build step`. From the dropdown select `Execute Shell`. On the box that appears; insert the following, to build package and deploy our app to Nexus:
e919d0	470	```bash
D	471	set -o xtrace
4acca2	472	npm install
D	473	npm run build:ci:dev
	474	npm run package
	475	npm run publish
e919d0	476	```
D	477	![build-step](../images/exercise2/build-step.png)
	478
579436	479	5. Scroll to the final section; the Post-build Actions. Add a new post-build action from the dropdown called `Archive the artifacts` and specify `**` in the box. This will zip the entire workspace and copy it back to Jenkins for inspection if needed. ![archive-artifacts](../images/exercise2/archive-artifacts.png)
e919d0	480
579436	481	5. On the Post-build Actions; Add another post-build action from the dropdown called `Git Publisher`. This is useful for tying the git check-in to the feature in your tracking tool to the built product.
e919d0	482	* Tick the box `Push Only If Build Succeeds`
1173e5	483	* Add the Tag to push of
e919d0	484	```bash
D	485	${JOB_NAME}.${BUILD_NUMBER}
	486	```
	487	* Specify the commit message to be
	488	```bash
	489	Automated commit by jenkins from ${JOB_NAME}.${BUILD_NUMBER}
	490	```
1b285d	491
A	492	* Check `Create New Tag` and set `Target remote name` to `origin`
e919d0	493	![git-publisher](../images/exercise2/git-publisher.png)
D	494
1173e5	495	5. Finally; add the trigger for the next job in the pipeline. This is to trigger the bake job with the current build tag. Add another post-build action from the dropdown called `Trigger parameterized build on other projects`.
a87997	496	* Set the project to build to be `dev-todolist-fe-build`
1173e5	497	* Set the condition to be `Stable or unstable but not failed`.
CM	498	* Click Add Parameters dropdown and select Predefined parameters.
e919d0	499	* In the box, insert our BUILD_TAG as follows
D	500	```bash
	501	BUILD_TAG=${JOB_NAME}.${BUILD_NUMBER}
	502	```
	503	![param-trigger](../images/exercise2/param-trigger.png)
	504	<p class="tip">
3b5f91	505	NOTE - Jenkins might say "No such project ‘dev-todolist-fe-bake’. Did you mean ...." at this point. Don't worry; it's because we have not created the next job yet.
e919d0	506	</p>
D	507
579436	508	5. Hit `save` which will take you to the job overview page - and that's it; our build phase is complete!
e919d0	509
5b1604	510	#### 3b - Bake
41217d	511
579436	512	5. Next we will setup our bake phase; which is a little simpler. Go to Jenkins home and create another Freestyle Job (as before) called `dev-todolist-fe-bake`.
e919d0	513
1b285d	514	5. This job will take in the BUILD_TAG from the previous one so check the `This project is parameterized` box on the General tab.
3b5f91	515	* Add string parameter type
1b285d	516	* set the Name to `BUILD_TAG`. This will be available to the job as an Enviroment Variable.
3b5f91	517	* You can set `dev-todolist-fe-build.` as the default value for ease when triggering manually.
1173e5	518	* The description is not required but a handy one for reference would be `${JOB_NAME}.${BUILD_NUMBER} of previous build e.g. dev-todolist-fe-build.1232`
2ff842	519	<p class="tip">
A	520	NOTE - Don't forget to include the `.` after `dev-todolist-fe-build` in the Default Value box.
	521	</p>
	522
3b5f91	523	![param-trigger-bake](../images/exercise2/param-trigger-bake.png)
c951f7	524
579436	525	5. This time set the `Restrict where this project can be run` label to `master`.
3b5f91	526	<p class="tip">
2ff842	527	NOTE - `Master` is the default node that jobs run on. We don't want jenkins to execute the bake on any other nodes if the `master` is busy so it is always safer to specify it here.
3b5f91	528	</p>
D	529
579436	530	5. There is no Git or SCM needed for this job so move down to the Build Environment and tick `Delete workspace before build starts`
3b5f91	531
579436	532	5. Scroll down to the Build Environment tab and select the `Color ANSI Console Output` checkbox ![delete-ansi](../images/exercise2/delete-ansi.png)
3b5f91	533
579436	534	5. Move on to the Build section and select `Add build step`. From the dropdown select `Execute Shell`. On the box the appears; insert the following, to pull the package from Nexus. We patch the BuildConfig with the Jenkins Tag to get traceablility from feature to source code to built item. Finally; the oc start-build command is run:
1b285d	535	Remember to replace `<YOUR_NAME>` accordingly.
3b5f91	536	```bash
D	537	#!/bin/bash
15b8f6	538	curl -v -f \
D	539	http://admin:admin123@${NEXUS_SERVICE_HOST}:${NEXUS_SERVICE_PORT}/repository/zip/com/redhat/todolist/${BUILD_TAG}/package-contents.zip \
	540	-o package-contents.zip
3b5f91	541	unzip package-contents.zip
cebd30	542	oc project <YOUR_NAME>-ci-cd
3b5f91	543	NAME=todolist-fe
9adaf7	544	oc patch bc ${NAME} -p "{\"spec\":{\"output\":{\"to\":{\"kind\":\"ImageStreamTag\",\"name\":\"${NAME}:${BUILD_TAG}\"}}}}"
3b5f91	545	oc start-build ${NAME} --from-dir=package-contents/ --follow
D	546	```
	547	![bake-step](../images/exercise2/bake-step.png)
	548
579436	549	5. Finally; add the trigger for the next job in the pipeline. Add a post-build action from the dropdown called `Trigger parameterized build on other projects`.
3b5f91	550	* Set the project to build to be `dev-todolist-fe-deploy`
D	551	* Set the condition to be `Stable`.
3dce53	552	* Click Add Parameters dropdown and select `Current build parameters`. This will pass the `${BUILD_TAG}` to the downstream job which we will create next.
3b5f91	553	![downstream-trigger-deploy](../images/exercise2/downstream-trigger-deploy.png)
D	554
579436	555	5. Hit save! That's our bake phase done! Finally; on to our deploy
3b5f91	556
5b1604	557	#### 3c - Deploy
41217d	558
1b285d	559	5. Next we will setup our deploy phase. This job is very similar in setup to the bake phase so this time go to Jenkins home and create `dev-todolist-fe-deploy` Job but scroll to the bottom and Copy from `dev-todolist-fe-bake`.
579436	560	![copy-from](../images/exercise2/copy-from.png)
D	561
1b285d	562	5. The only two differences between these jobs is the Build Step and there are no Post Build Actions. First to the Build tab and add the following to the shell box. The process for running the deploy is to tag the image created previously for use in the `ci-cd` namespace for use in the dev project. Then update the DeploymentConfig to use the Jenkins Tag which kicked the process off. Once successful; the changes are rolled out. Remember to change `<YOUR_NAME>` accordingly.
579436	563	```bash
D	564	#!/bin/bash
	565	set -o xtrace
	566	# VARS
1b285d	567	PIPELINES_NAMESPACE=<YOUR_NAME>-ci-cd
A	568	NAMESPACE=<YOUR_NAME>-dev
579436	569	NAME=todolist-fe
D	570	oc project ${NAMESPACE}
	571	oc tag ${PIPELINES_NAMESPACE}/${NAME}:${BUILD_TAG} ${NAMESPACE}/${NAME}:${BUILD_TAG}
	572	oc set env dc ${NAME} NODE_ENV=dev
	573	oc set image dc/${NAME} ${NAME}=docker-registry.default.svc:5000/${NAMESPACE}/${NAME}:${BUILD_TAG}
	574	oc rollout latest dc/${NAME}
	575	```
	576	![deploy-step](../images/exercise2/deploy-step.png)
	577
8894bf	578	5. When a deployment has completed; OpenShift can verify its success. Add another step by clicking the `Add build Step` on the Build tab then `Verify OpenShift Deployment` including the following:
579436	579	* Set the Project to your `<YOUR_NAME>-dev`
D	580	* Set the DeploymentConfig to your app's name `todolist-fe`
	581	* Set the replica count to `1`
	582	![verify-deployment](../images/exercise2/verify-deployment.png)
	583
	584	5. Finally; delete the Post Build Action to trigger another job (by hitting the red X). Save the configuration. We're almost ready to run the pipeline!
	585
5b1604	586	#### 3d - Pipeline
41217d	587
3dce53	588	5. With our Jenkins setup in place; now move to our `todolist-fe` app's source code. We have to add our configuration to the frontend to tell it where the API layer will be hosted. Open the source in your favourite editor and navigate to `src/config/dev.js`.
D	589
33c738	590	5. Update `<YOUR_NAME>` accordingly with the route where the Todo List API will live when it is deployed. The correct full URL can also be found on the OpenShift Console; if you copy it from there remember to append `/api/todos` to the URL. For example:
41217d	591	![fe-dev-config](../images/exercise2/fe-dev-config.png)
D	592
1173e5	593	5. Repeat this for `src/config/test.js` file. If you copy the URL from the previous step; change `dev` to `test`.
33c738	594	For example:
D	595	![fe-test-config](../images/exercise2/fe-test-config.png)
	596
a25623	597	5. With the config in place; commit your changes and push them to GitLab:
41217d	598	```bash
b6978f	599	git add .
D	600	```
	601	```bash
	602	git commit -m "ADD config for api"
	603	```
	604	```bash
	605	git push
41217d	606	```
D	607
cebd30	608	5. Back on Jenkins; We can tie all the jobs in the pipeline together into a nice single view using the Build Pipeline view. Back on the Jenkins home screen Click the + beside the all tab on the top.
D	609	![add-view](../images/exercise2/add-view.png)
	610
e43fd2	611	5. On the view that loads; Give the new view a sensible name like `dev-todolist-fe-pipeline` and select Build Pipeline View
cebd30	612	![new-pipeline](../images/exercise2/new-pipeline.png)
579436	613
D	614	5. Set the Pipeline Flow's Inital Job to `dev-todolist-fe-build` and save.
	615	![pipeline-flow](../images/exercise2/pipeline-flow.png)
	616
cebd30	617	5. You should now see the pipeline view. Run the pipeline by hitting run (you can move onto the next part while it is running as it may take some time).
af284d	618	![dev-pipeline-view](../images/exercise2/dev-pipeline-view.jpeg)
579436	619
15b8f6	620	6. To check the deployment in OpenShift; open the web console and go to your `dev` namespace. You should see the deployment was successful; hit the URL to open the app (the screenshot below has both apps deployed).
cebd30	621	![ocp-deployment](../images/exercise2/ocp-deployment.png)
D	622
15b8f6	623	6. If it has been a success we should see our dummyData. This is because there is no backend deployed, in later labs we will deploy the backend and the mongodb for persistence but to do this we will use Jenkins Pipeline as code.
d00794	624	![no-backend-app](../images/exercise2/no-backend-app.png)
c951f7	625
5b1604	626	### Part 4 - (Optional) GitLab Webhooks
b00f5a	627	> _In this exercise we will link GitLab to Jenkins so that new build jobs are triggered on each push to the `develop` branch._
11b338	628
b00f5a	629	<p class="tip" >
943e9f	630	NOTE - This section is optional! Git webhooks are useful but not needed for Enablement completion.
b00f5a	631	</p>
D	632
e43fd2	633	7. In order to allow GitLab to trigger Jenkins (because of the OpenShift Auth Plugin), we need to allow the `Anonymous` user triggered builds. Head to your Jenkins Dashboard and click on `Manage Jenkins` on the left hand side. Then scroll down and click `Configure Global Security`. Alternatively, type in `https://jenkins-<YOUR_NAME>-ci-cd.apps.some.domain.com/configureSecurity/` . You should see a screen like so:
106095	634	![jenkins-global-security](../images/exercise2/jenkins-global-security.png)
A	635
	636	7. Scroll down to the `Authorization` section and allow `Anonymous` to create jobs. Do this by navigating through the matrix of checkboxes and check `Build` and `Cancel` under the Job heading. Leave all other user behaviour as is. Anonymous is the user that GitLab will act as so this allows the WebHook to trigger builds. (The screenshot has been cropped to bring Job further to the left.) Hit `Save` or `Apply`.
	637	![jenkins-anon-permissions](../images/exercise2/jenkins-anon-permissions.png)
	638
7c720c	639	7. Go to your `dev-todolist-fe-build` and head to the `configure` section (`https://jenkins-<YOUR_NAME>-ci-cd.apps.some.domain.com/job/dev-todolist-fe-build/configure`). Scroll down to the `Build Triggers` section and check the `Build when a change is pushed to GitLab` box. Leave all the other settings as they are but copy the `GitLab webhook URL`. `https://jenkins-<YOUR_NAME>-ci-cd.apps.some.domain.com/project/dev-todolist-fe-build`. Remember to Save and Apply this change.
0c725b	640	![jenkins-build-triggers-gitlab](../images/exercise2/jenkins-build-triggers-gitlab.png)
11b338	641
b311e1	642	7. Switch over to GitLab and select your `todolist-fe` repository. On the left hand task bar hover over the settings cog and select `integrations`. (`https://gitlab-<YOUR_NAME>-ci-cd.apps.some.domain.com/<YOUR_NAME>/todolist-fe/settings/integrations`)
0c725b	643	![gitlab-integrations](../images/exercise2/gitlab-integrations.png)
11b338	644
0c725b	645	7. Paste the `GitLab webhook URL` that we copied earlier into the `URL` field. Check Push events as the trigger, and make sure you `uncheck` the `SSL verification` checkbox. Click Add webhook at the bottom.
A	646	![gitlab-integrations-details](../images/exercise2/gitlab-integrations-details.png)
11b338	647
0c725b	648	7. Before we move on let's test the webhook. Select the Test drop down and click `Push events`. This will trigger the test and return a status code at the top of the page. If all goes well it should be a cool blue 200.
A	649	![gitlab-integrations-details](../images/exercise2/gitlab-webhook-test.png)
11b338	650
0c725b	651	7. We can now test this properly by heading into the `todolist-fe` repository through <YOUR_FAVOURITE_EDITOR>. Make a small change to your code, then commit and push it, ensuring you're on the develop branch. Then head over to Jenkins and wait until the `dev-todolist-fe-build` job has been triggered.
11b338	652
0c725b	653	7. We now have a working GitLab webhook so any time we push code it will automatically build! Next up we'll show you how to add tests to your pipeline.
b00f5a	654
43f2f2	655	_____
D	656
c951f7	657	## Extension Tasks
cf415b	658	> _Ideas for go-getters. Advanced topic for doers to get on with if they finish early. These will usually not have a solution available and are provided for additional scope._
c951f7	659
d00794	660	- Pipeline Tasks
456daa	661	* Add pipeline for `master` branch for each project. Use `test-` instead of `dev-` across all config and names in the pipeline
A	662	* Do the `.openshift-applier` steps as part of the pipeline for greater end to end automation.
e919d0	663	- Promote build
456daa	664	* Create a _promote-to-uat_ phase after the `master` branch deploy
cf415b	665	* Create a `uat` env using the OpenShift Applier as seen before
e919d0	666	* Tag and promote the image without rebuilding after the `test-**-deploy`
c58300	667	- MongoDB tasks
e919d0	668	* Add MongoDB Stateful set for the UAT environment (or test)
D	669	* Inject MongoDB config into the NodeJS app using config map & secrets.
cf415b	670	* Improve the security of the DB by making the user /passwords randomly generated
e919d0	671	- Setup Nexus as an `npm` mirror registry and use it in the builds to speed up the build time
c951f7	672
D	673	## Additional Reading
43f2f2	674	> List of links or other reading that might be of use / reference for the exercise
7383de	675
43f2f2	676	## Slide links
7c832b	677
01c4da	678	- [Intro](https://docs.google.com/presentation/d/1t1CONuy-_IRPZYmU010Qgk2rshiDJTennvLyQR8GllE)
RH	679	- [Wrap-up](https://docs.google.com/presentation/d/1kZ8SV6iJnrKk_AqPpyPuNZifv7VzItHOB9HYdOnNJjI)
5d4563	680	- [All Material](https://drive.google.com/drive/folders/1lf66ks2tT0eQ4A9RSU48u0ZhvBXzoHWJ)