 Correction, that's not the only slide. Unfortunately, I do have a couple extra slides. But don't worry, they'll be out of the way very, very shortly, right? Let's open my machine. Hopefully, we can switch to this, so we can see things and stuff. Cool, you can see it. I mean, now that's zoomed in quite a lot. OK, first slide. These are the tech choices that we're going to be doing. Ooh. Cool, you can see me. OK, these are the tech choices we're going to be using. Google Kubernetes Engine. It's managed Kubernetes service. GitLab, kind of obvious. Terraform, just been talking about that. Going to Terraform some infrastructure. Node.js, React and Redux, bunch of JavaScript stuff. Yes, that does make me the most annoying person in the room. I apologize in advance. But OK, it's fine. Accept JavaScript. It's part of the world now. Here's a little napkin diagram of the thing that we're going to actually build. So we're going to have a front end that's going to be serviced from this front end pod that can access all of the static resources and things through by hitting the Kubernetes cluster ingress, going through a service, hitting the front end pod. And then the back end service here is going to be just serving the Node.js app. Slides over. Let's build. So, oh, God, that's hideous. Let's, very quickly, system preferences, display. No, not arrangement. Scaled, 1080. Maybe that'll look better. Ooh, can you still see that? Yeah, you can. That's fine. OK, let's start things. Can someone shout out an animal, please? Come on, more complicated than a dog or a cat. Giraffe. You can't say giraffe. I've already got a project that called giraffe. Kangaroo. OK, we've got kangaroo. We're going to create a new subgroup that's going to contain all of our code. And we're going to call it kangaroo. We'll make it public because we want to make things open source. Let's create a new project called, come on, come on, come on. Well, basically what we're going to do is call it ops so I can actually put stuff in. So we're going to call it ops because, not ops 3, public create. Come on, nice and quick, right? So let's create a new folder called kangaroo. Stick that in ops. And then I'm just going to open a terminal. And open this in code. I'm going to kangaroo and open that in Visual Studio Code. Nice. OK, so checklist of things to do so I can actually stay on track. We're going to terraform a cluster. We're going to configure that cluster. We're going to configure GitLab. We're going to initialize a front end and a back end. That's all our app stuff. Then we're going to do some dev stuff and actually develop a little bit of the back end and front end. I'm cheating a little bit because obviously it says zero to Kubernetes, but I do already have a little repo here. But trust me, it's not very much code, so I'm still counting it. So we've got some terraform here. We'll stick. Can make a text bigger, sure thing. There you go, you see that? Awesome. Let's stick that in the kangaroo folder. And let's, yeah, so we're going to create this platform here in terraform modules. We've got GKE. That's going to create a GitLab GKE thingy moboby there. Let's call this actually, because I think I already have a cluster called dev in there. Let's just call it dev kangaroo. And that'll do. So first thing to do, cd into ops, cd into the dev environment, am I the correct user? I should probably, can I switch my email? You can email me if you want to. This is a public email, so don't worry. Authenticate things, come on. You need to be authenticated so I can use terraform. Come on, internet, allow. It's going to be fine. This is what I've got demos about. Right, terraform init. Cool, initializing the back end. That's going to store our terraform state in a Google storage bucket. It's initializing the plugins. Cool, successful, terraform. Don't want to go straight for reply. Now let's plan it out first. Cool, so we're going to create a cluster. Nice terraform reply. So yeah, so whilst this terraforms, let me actually talk about what we're going to be building a bit more. So this talk is pretty much about CI CD and why you should be doing it and why you should be using things like Kubernetes. Also sort of going into some of the depths of if you are already using CI CD, like you're using the GitLab auto DevOps feature, which is pretty much makes my talk null and void because I'm going to be doing everything in 20 minutes and auto DevOps sort of does it in like two clicks. But yeah, so we're going to kind of go into the depths of some of the stuff that auto DevOps, how that works. I'm simplifying things to make it a little bit easier, just for me because we've only got 17 minutes left now. Cool, but we've got Kangaroo. That is a cluster that's getting up and running. So terraforming cluster, and then we're going to run some scripts on this cluster. These are pretty similar to what in the background for the auto DevOps stuff, what it's going to be running. So we're going to be using Helm, which is a deployment tool. And I think it calls itself a package manager for Kubernetes, which is, I guess, accurate. We're going to be initializing that. That'll put Tilla on it, although in the next version of Helm, it's not using Tilla, which is kind of cool. And then we're going to be giving Tilla some permissions to make sure that it can actually do some stuff. We're going to be installing a nginx ingress, just to make sure that, like, back to our architecture diagram, we actually have an ingress that will serve out some stuff. We're going to be sorting out GitLab CD, CI CD things, so making sure that our CI CD pipeline can actually go and talk to our Kubernetes cluster and deploy things. And then we're going to look at some image pull secrets, because I'm also using GitLab's container registry to store some, well, containers. So I'm just kind of waiting for Terraform to actually work now. Come on. Two minutes to Terraform a cluster. I mean, ironically, Google is pretty good at this. And it takes quite a lot longer on some of the other platforms, but I probably shouldn't say that sort of thing. I work for Capgemar, by the way. Can work for us? Cool, corporate shell stuff over. I'm going to get told off for that. Whilst this is Terraform. Oh, no, I can't really commit it up. Actually, I'll talk about some of the other stuff whilst this is Terraforming that I'm going to be doing. So in our checklist, I'm going to be initing a front end and a back end, so that all the scripts are doing are sorting out that configuration of the cluster and everything. The front end, this is a bit where I'm sort of cheating with the zero to Kubernetes, because I wrote a little open source generator thing. This is my website. Look, it's pretty. That basically, if you open a file, and as long as you're NPM and get installed, it'll just boot up and generate. It's kind of like Spring Initializer, if people are familiar with the Java world. It'll just generate you a front end app. And I've got one for back end apps, which I'm also going to be using. With GitLab CI files, because I really quite like GitLab, hence why I'm here. And yeah, it comes along with Kubernetes files to be able to deploy things. I'm currently using a little open source tool that the home office built called KD to deploy things, instead of using Helm, because I have some issues around deploying with Helm, when it comes to aligning things between Git hashes and tracking that, and then converting that into a semantic versioning thing. I don't know if you're good at that sort of stuff. Come talk to me afterwards. But we've terraformed something. Yay. Let's go into, let's actually connect to this. I'm actually going to use the console, which is something that I didn't want to use, but I have to use it. Well, I don't have to use it. I could have memorized that command, but fuck that. So, kubectl, get pods. I don't have anything in the default namespace. So let's have a look in the kubesystem namespace. Can you see that, by the way? Or do you want me to make it even bigger? A little bit bigger? How's that? Oh, god, that's ugly. I'm going to have to. Sorry for you people who are short-sight. So we actually can connect things. We can see that all of the Google stuff to do with Fluent D and Prometheus and all that stuff is running. So let's run these scripts. Let's get Helm installed. So cd, out of here, and go into Kubernetes. And let's just run the first script. Cool, that's Helm installed. And Tiller, given the permissions, done. Let's run the second script. EngineX couldn't find a ready Tiller pod. That's OK, because Tiller takes a second to install. By the time I've typed out this command, Tiller will be running. Ooh, it's not. Go on. There you go. Now it's running. Let's rerun that second script. EngineX, and it's done. Magic. Let's sort out GitLab CI. So as I said earlier, the tool that I'm going to be using is called KD. And that requires a couple of little variables to be put into GitLab to make sure that KD, I guess, with any deployment tool, you're going to have to tell your deployment tool where to go. So we're going to go into, we want to make all of these variables available to the entire kangaroo group. So let's go into settings, and look at CI CD, and look at variables. And we're just going to create one called kubeserver, I think it's called. And that is going to be the actual URL that we're going to current, the actual IP address of this server. There we go. It needs to be HTTPS, because otherwise it complains. And we need kubetoken, which is the token of a service account so that the GitLab, when it goes and talks to the Kubernetes cluster, it can go and say, hey, I need to go and run this, but I need permission to deploy things and all that sort of stuff. That's what this service account is going to do for us. How do we do this? We run the script, and it creates a service account, and we can even output the token. That's nice. We can just paste that in there, save the variables, call that bit's done. Right. So we've done that bit, we've done that bit. We're not going to worry about the image pull secrets yet. We'll come back to that. And for the time being, we can close that off. That's fine. That's fine. Git add, there you go. I'm doing work already. Terraformed cluster. That's a horrifically short and not very descriptive Git commit. Please don't make your Git commits like mine, because otherwise you end up packing things together. And people like me will tell you off. We need the URL for this clone. Git remote add, origin, you. Git push, you're going to complain, but that means I can copy and paste you. And push it up to master. And cool. If I refresh that page, we've got some operation stuff in place. What I am going to do, by the way, whilst I remember, is go into settings, because I should have done this beforehand, into variables. And we're just going to, is it that one? Yes, we're going to hide them. Save. Cool. Shall I mask them as well? No, look at it. Maybe I should have done that. Security, I'll probably tell me off for that later. Right, so we've configured the cluster. We've configured a bit of GitLab. Let's initialize the front end app. When I say it's a single line, I really mean it's a single line. Cool, it's going to curl and install script. All I need to do is CD out of this and do make. Let's make a front end app. CD into the front end app and run my install script. So it's generating readme's. It's generating config and build files for all the Kubernetes and the GitLab stuff. Yeah, there's the Kubernetes files. We're storing our output files, so that will be things like the index.html, application codes, that will be all the React-Redux stuff. If you're unfamiliar with React-Redux, React is a library built by Facebook. And it's actually pretty good, yay. And it allows us to create these sort of composable components. That's a mouthful. Say that 10 times faster. Composable components, composable components. Anyway. And Redux is a client-side framework that allows you to have a store and then push stuff out from there. And it's loading. And it's installing our node npm modules. Oh, and it even opens code for us. So let's have, let's actually close that, because I've already got it in here. It's already started up. So if I do localhost.eat, cool. It says hello world. That's nice. So quick little dive and explain of what's going on here. Webpack's going to build it all, packaged at JSON. If you're familiar with Node.js, that's going to sort out all of the dependencies and everything. Dockerfile, Nginx, it's going to host it in an Nginx server in a Docker image. GitLab CI, this is the bit that we actually care about. So this is the GitLab bit. Then we're going to build it on a node server. And it's just going to run it and stick everything in public. We're going to build it into a Docker image and then push it into GitLab's CI, GitLab's container registry. And then we're going to deploy it using this KD tool. And KD just requires you to, at least the initial script that I've written. It already has all these variables, and I just need to define it. So let's call it kangaroo.harmelodic talks. Harmelodic is my internet alias. Cool. That looks all fine to me. Let's leave that there for the time being. Let's have a look at these Kubernetes scripts. Cool. That looks like a deployment that'll kick out a single replica and it's got all the registry deployment tokens. It'll do rolling updates. That's nice. An ingress, that's our Nginx ingress bit that's going to manage saying hello to the outside world. That's our service that's going to connect our deployment and our ingress together. Lovely jubbly. We don't need to do anything around that. So initialized our front-end. Done that. Let's CD out of this and do exactly the same for back-end. MakeCD is a command that I made up that allows me to make directories and CD directly into them. What am I doing? Oh, yeah, I'm actually doing a talk. I should probably concentrate on that. Cool. Let's copy that. Let's run it. Exactly the same thing. Readme, config files, it's building everything out. You can see it all just being pulled in from the outside internet. Open source, don't you just love it? Yes, we do. We wouldn't love open source if we wouldn't be here if we didn't love open source, that's what I was about. Or if you're here and you don't like open source, why? Come and convince me and I'll tell you you're wrong. That's installing all of the things. So here we're just using express because I'm lazy and can't be bothered learning any of the new Node.js frameworks because they'll die in about six months. That's the nature of the JavaScript world. We all know it. So I'm just using express. Cool, it started up. So if I go to localhost8080, it says cannot get. But it does have a health check that says, oh no, I because this is running, I configure this there. There's the health check. And if I say that, that then says hello world. Cool. So it's going to say slash API just so that when we deploy things, it's going to be deployed under the same URL. And I can still access things through the ingress nice and neatly by the same URL. Which means HTTPS, which we're not going to do today because I don't have enough time. If we wanted to configure that, that's all good. We're going to do the same thing that we did for the front end and just make it saying kangaroo.harmelotic torx.com. At some point I'm going to have to configure that URL. That works, everything. That's fine. Right, so we've initialized all of that sort of stuff. We've in it at the front end, we've in it at the back end. Let's do some development because I'm sick of doing operations. Let's do the dev as part of the ops. I want to make this easy because I don't have a huge amount of time. That's just saying hello world. I already have a body parts of Jason thing in there. So if I kick out some Jason, the front end is going to like it. So let's say title is hello GitLab commit 2019. Smiley face. You're complaining because the linter is telling me to use single quote marks, even though I've been brought up on Java, which means double quotes for everything. Hand C plus plus. What are you complaining about? This line is length of blah, blah, blah, blah, blah. Okay, fine. Stop complaining linter. I know you're trying to get me to write neat code, but also, I hate you. Right. That's some back end stuff developed. Let's make sure that the front end can actually talk to the back end. So in our source, we have some components that's going to render a title that says this pops.title. So I did that with that back end where I said title.thing. I'm already prepared. Containers. These are sort of bundles of components that contain the same state and define a specific part of your app, then components define how the little widgets and bits work. That's just going to say, hey, on root, I want you to render index because we're using react router. If you don't understand any of this, don't worry about it. You can, I'll explain it all afterwards if you want. Yeah. And then index container is just going to look into the redux store and get out the title. We're going to render it onto the fetch title. Yeah, we're going to render it into here on mounting. We're going to want to subscribe to the title in case we see any changes. We'll fetch the title from the middleware because this is what redux does. And then we'll render a title component and pass it the title string. So let's have a look at some middleware stuff, the redux things. We've got an action that just sets the title. We have a store. So our initial title is initial title. That's going to build out a store, which gets generated through these reducers that handle actions, blah, blah, blah, JavaScript. Everyone hates it. This is the tasty bit. This is the bit that actually connects our, what did I edit in you? That was going to break something. Ooh, what are you not like? Thank you. It's a good job. Good job I spotted that because otherwise that was going to make everything break. So we want to, this is going to fetch the title. So it's going to say get API as another little preparation thing. And it's going to look at the JSON and it says, if I can read the JSON, set the title as data, but we want it to be data.title. And if it fails, then it'll just say hello world. It still will actually render something. And if it fails everything and even the API isn't readable, it'll still just say hello world. Cool. Like when I say on my checklist that I'm saying develop front-end to read some back-end and all I did was just add that. And I know I'm cheating, but I have 20 minutes. Just forgive me, all right? So let's actually commit some stuff in place. We actually need some repos to store all of this junk. Come on internet. You've been good to me so far in downloading all those horrifically large NPM modules. Let's create the front-end. How am I doing for time? I have two minutes left. I reckon I can do this. So that was the front-end. We want to cd into front-end, get status, get add. I should probably concentrate here. CI, cd, middleware. Again, butchering these, get remote, add origin, butchering these commit messages, get push origin master. Cool. I think you're going to be good enough. Then we want to go back to kangaroo, new project. Come on internet. CI, cd, into back-end, get status, add this, into all of this sort of stuff. CI, cd, and kicking out a string, get remote, add origin, back-end, public, create, do, do, do, do, do. Clone that, paste that in there, get push origin master. Right. That's pushed all of that stuff into there. We need to run our little script to sort out these images. So as part of that, we need to go into settings, CI, cd, and not CI, cd, repository, because we need to have a look at some deploy tokens. These are the things that are going to allow Kubernetes to pull the images from GitLab's container registry. We want to read the registry. We want to create a thing. Now let's just call this Kubernetes. Copy the username. So this script just takes cd, into ops, Kubernetes, four. This script takes an app name. So in this case, it's going to be the back-end. So back-end takes a token username. That's the thing I've just copied. It takes a token password. Please don't copy that. I will be deleting all of this except the code, just to make sure that it's all open source. So I will be deleting all of this, just to make sure you can't hack any of this stuff. Or I might just leave it for the day and see who can hack it. And we need to do the same for the front-end. And we'll go into kangaroo, front-end, settings, repository, deployment tokens. I could have automated all of this, but that's no fun. Create deployment token. Copy that. Run the fourth script again. This is called front-end. We've got the username. We've got the password. Paste that in. That's the secret created. Cool. That's all that's done. That's going to start actually deploying all of this. Now I'm pretty sure we've done all of that. We're starting all the deployment, because all of this stuff, if we look at the CICD for the front-end, that's going through the deployment. Whilst that's running, we're going to sort out here. I created a Blue Peter one just in case I massively screwed all of this up, as a, here's what we made earlier, for those people who grew up on Blue Peter. Kangaroo, we need a URL, which means we need to wait. Do we? No, we don't. It's the nginx ingress. That's already been deployed. So let's have a look at services and ingresses. And we have here, ooh, it's already starting to look like it's deploying. That's nice. nginx ingress. So we want to copy this URL. And we want to, I think it's that one. nginx ingress controller. Oh, no, that's the, that's the, that was very good. No, that's the Blue Peter one. Right, OK, that's why you're seeing Blue Peter stuff. We need to copy this one, because that's to do with Kangaroo. And we need to put this in here, paste that in there, take off the port, create that. That'll go and update DNS, which will take a second or two. Come on, come on, come on, come on. Now, all we have to do is wait for, where am I going? Here we go. What was the last thing that I pushed up? It would have been the front end, I think, was the one that I last created. Let's have a look. Front end, yes. So if we go and have a look at the front end, this is probably the one that will finish last. In my CICD jobs, go on, you're deploying. Everything's been green so far. I might have just pulled off a live coding demo in 15 minutes. And if so, I don't know about you, but I'm kind of proud of myself. I'm going to treat myself to a beer later, because God, I need it. I stocked up on coffee just to make sure that I can actually do this. Right, hopefully the Blue Peter stuff, don't look at my Chrome history, Christ, no. You're all giggling. It's worse than you think. So that's our Blue Peter one. That says hello, GitLab. But we want to see something that's better. We want to see our, that's all the init stuff. We can close all that down. It's deployed, which means if we refresh this, that says kangaroo, that says kangaroo. If we click that, it says hello, world. Go on. You're not connecting to the API. There it is. That is a live coding demo. If I go back to the slides. Questions, ask me them afterwards. I've run out of time. Who am I? I'm Matt Smith. Nice to see you.