Learn GitHub Actions! Deploy a Vue App to AWS

hey there youtube today i'm going to show you a quick and easy way that you can configure github actions to automatically deploy out code from a github repository directly into aws s3 and cloudfront this is going to be a continuation of video i did previously where we manually deployed out a view app into s3 and cloudfront uh check one of the corners for a link to that video and if you like this kind of content feel free to give me a subscribe like button notification you know that whole youtuber thing all right let's get started okay so as a quick recap of what we covered last time um we set up an s3 bucket we built our vue js application and uploaded all the artifacts into the root of the bucket and we also enabled static website hosting if i head over to properties and scroll all the way down to the bottom here you can see there's this url we have here where if i click on it it opens up our vue.js app now if i go to cloudfront which is the cdn product or cdn service from aws we've also created a cloudfront distribution which will distribute our app to different edge nodes all over the world we got our own unique domain name here which is a cloudfront.net domain and if i paste this into the browser you can see we're presented with what is essentially the same app but being served up through the cdn as opposed to directly from the s3 bucket okay so before we hop over to github and start writing our action we need to create a service account that's going to allow github actions to publish our updated changes into aws so in the search box on the top of the aws console type in i am which stands for identity and access management this is where you'd come if you want to manage any kind of users or policies for your aws environment so i'm going to head over to users on the left-hand side and i'm going to click add user and you can name your user whatever you want i'm going to name mine github deploy pretty straightforward and simple there are two different ways that users can access aws there's either programmatically using the cli or sdks or there's the aws management console access which provides them a password to be able to log into the web interface now since this user this specific user account is only going to be publishing code up using the aws sdks and cli let's go ahead and select programmatic access and leave aws management console access disabled click next to go to the permissions now ideally to make this account the most secure what you'd want to do is create a custom policy that provides access only to the necessary resources for deploying your code however for the sake of this example i'm just going to select administrator access which essentially gives this user account access to my entire aws tenant and let's go ahead and click next to go to tags we don't need to add tags we can click next again and finally create user now when you're presented with this page you'll be given an access key id and a secret access key because we selected programmatic access i'm going to open up notepad on my computer but you can open up whatever text editor you want we're going to have to note these changes down so i click this little icon here to copy the access key id i'll paste that in there and then let's go ahead and show the secret access key and i'm going to right click and copy here now one thing worth noting is you never want to share these credentials out with anybody since they basically allow any user who has these credentials access to your aws environment go ahead and paste that in notepad and we're going to save this for later when we set up our github secrets now let's head over to github i have this repository that was created in the last video i'm going to go ahead and select the actions tab here if you scroll down this page you'll see there's a number of predefined actions that have been provided by either github or the community in general to allow simple deployment out to various popular services however we're going to select the simple workflow which is basically going to let us build our own so go ahead and click set up this workflow and now you'll be brought to a page that has this this yaml editor a github action is just a yaml file that kind of instructs github on individual steps to do to build and deploy your code i'm going to change the name of the yaml file to deploy to aws just so it's a little clear and we're going to touch on each one of these different sections that have been predefined for us so the name is the actual name of the action that will show in the actions tab when it's being executed so we're going to rename this to deploy to aws this section that starts with on it basically controls when the action will run there are various triggers in ways that you can automate deploying out your code or executing the specific action you can see by default in this template we have any pushes to the main branch or any pull requests that are committed to the main branch will trigger this action but there's also this workflow underscore dispatch and what this does is it gives you a button inside of the actions tab so you can run this workflow manually now the job section is kind of what instructs the workflow what specific steps are required in order to deploy your code and what's neat is you can actually create multiple jobs so if you wanted if you wanted to break this out into specific chunks of steps that's certainly one way to do it however in this example we're just going to keep everything inside of this one job but instead of naming it build i'm going to name this i'm going to rename this to deploy just to make it a little more clear on what our job is doing now inside of our deploy job we have this runs on line here and this defines the type of container that this these actions will be executed inside and since we're using view with node ubuntu latest is perfectly fine steps are individual steps that will execute as a part of the job so when a job triggers what it's going to do is it's going to execute this step here using the actions slash checkout action and then we also have an example here where we can run a single line script or a multi-line script you'll also notice on the right hand side under marketplace you can search for different types of actions to be able to play be placed inside of your steps so with that said i'm going to delete these last two steps we have here since we're not going to need them we're going to build our own just to touch real quick again on what the checkout action does is this is what triggers github to pull a copy of your code down into the container or task runner where it's going to be executed so we're going to go ahead and leave this as is and we'll go ahead and add two new lines there so now the next action we actually need to put in here is this setup node.js environment you can see on the right hand side since we basically need to make sure node is installed and configured on the taskrunner let's go ahead and press this play button here once you click that play button you can scroll down you can see all the specific options that this particular action supports now instead of just copying and pasting this entire line of code let's go ahead and write it manually since most of the parameters they have set are not going to be used so i'm going to add a hyphen there to designate that this is going to be an a completely separate step from the action slash checkout step and we're going to type in name to give this action a name so it's displayed in the console when we're running it i'm going to name this setup node.js environment and then underneath that we don't need another hyphen there just tab over to be in the same column as name we'll type uses to specify the type of action we want to use here actions forward slash setup hyphen node and in my testing the version of this action that i used was 2.1.2 so we're going to go ahead and just specify that version there let's go ahead and create another step hyphen name this one's going to be npm install and npm build and this is going to be a multi-line script so we're going to type run and then we have to put a colon and a pipe which is the spate which is likely the character right beneath your backspace key let's go ahead and tab over and let's type our commands that bash is going to run when executing this step so we're going to type in npm install to install of our dependencies and then npm run build since that is the default build script defined inside of a view project so the next step we're going to define here is actually an action that was provided by a community member so the name of this particular step we're going to call s3 sync tab over so we're on the same line uses is actually going to be jake jarvis forward slash s3 hyphen sync hyphen action and the version of this one is v0.5.1 now width is going to allow us to provide some additional parameters into this action and args is what we want to specify here in the back end i imagine that this action is using the aws uh cli tool to sync up our code into github so we can pass in some for additional parameters into that cli using this args parameter so i'm going to add double hyphen acl and then space public hyphen read which is going to set all the files that we upload into aws to be publicly readable and since this is a website that's exactly what we want and then i'm going to add another parameter here of double hyphen delete which is going to clear out our bucket or any associated files before it syncs this up which is what we want to make sure that there are no um old pieces of the website or web app still remaining inside of s3 i'm going to add a new line and then backspace to be on the same the column as with and then we're going to set some environment variables here so enb colon newline and tab over and then we're going to type in aws underscore s3 underscore bucket and then instead of typing in our bucket name here which we will need to grab in a in a few moments i'm going to put a dollar sign and double open curly brackets and we're going to use type in secrets dot aws underscore s3 bucket now the way that this works is once we're done building out our action here our workflow we're going to head over into the repository settings and add a couple of github secrets since this file is actually going to be committed with our repository we don't want to add these credentials directly inside of the repository it's best practice to to keep them out of the repository and be handled by some kind of secrets manager which github provides for us for free so we're going to add another environment variable aws underscore access key id and we're going to do the same thing secrets save myself from that fingering this we're going to go ahead and copy and paste this over here close our curly brackets next one is aws underscore secret underscore access key and same thing dollar sign double up in curlies secrets dot and we'll copy and paste this over here now we do aws region as the next one this isn't necessarily a secret so i don't mind keeping this along with the repository i'm just going to enter us east1 and the way that i know where our region is defined is if i head it back into aws let's go ahead and hit s3 one more time once this loads up you can see the the region for this bucket is us east one so you can general whatever region you're in you just type in this text um inside of that environment variable and the last environment variable we need to sync up our code into s3 is source underscore dir for source directory and that's going to be dist because that's where the view cli will build our artifacts into okay now there's one final step we need to do since we have our code deployed out to cloudfront which is aws's content delivery network we need to do what's called invalidate the cloudfront cache by default uh files within the cache will expire every few hours but we want to force this since we're deploying out a brand new version of our website so we'll type a name and we'll say invalidate cloudfront uh use is going to be c-h-e-t-a-n forward slash invalidate hyphen cloudfront hyphen action and the version of this we're using is v 1.3 and now we need to set a couple environment variables here uh we're going to set distribution which is going to be the distribution id of our cloudfront distribution and we're going to grab that from the console in a second uh dollar sign double open curlies secrets dot distribution it's worth noting that the name of these particular environment variables to the name of the secrets they don't have to match specifically but it's it's a good practice to keep them synced up so you can quickly reference which of these secrets are being used by your different workflows uh we need to type in paths as our next environment variable which is going to dictate which of files that we want to remove out of the cache and since we're basically redeploying our entire website we can use forward slash and a star to clear all files out from the cache and instead of typing the next three that we need they're actually the same as these guys above here the aws region access key and secret access key so i'm just going to paste these guys in here and there we go this kind of concludes us writing our custom github workflow here so once we're done on the upper right hand corner let's go ahead and click start commit which is basically going to create a file and commit it into the repository you can specify a custom commit message if you really want to but i'll leave this as create deploy to aws.yaml we're going to commit directly to the main branch as opposed to creating a pull request and go ahead and click commit new file okay now if we head back up into the root of our repository we can see we have this new folder here dot github forward slash workflows and inside of there here's our actual file that we just defined here if you head over to the actions tab you'll see that it's actually trying to execute this action because of our trigger that we have defined on committing into the main branch however this is going to fail simply because we haven't added our secrets in as we need to so let's head over to settings scroll down to the bottom on the left hand side the second one from the bottom is secrets let's go ahead and select that and you see we have no secrets defined for this repository so we're going to go ahead and click new repository secret and what i'm actually going to do for the sake of saving myself again mistyping these i'm going to open up this yaml file and we're going to copy and paste these over so the four that we need are the aws s3 bucket the axis key id secret access key and then the distribution so since we already have the axis key id and secret access key let's go ahead and type those guys in first so access key id is this first one that we pulled out from the aws console click add secret now let's create one for our secret access key go ahead and paste in that value create a new one for our aws s3 bucket and the place you're going to find this specific value is inside of s3 just copy the name of the bucket here in my case it's b morrison hyphen view app one two three paste that value in and last thing we need to do is grab that distribution let's go ahead and create that secret first before we head back into aws new repository secret and then where you would get the distribution id is if you head over to cloudfront there's this id my in my case it starts with e j g let's go ahead and copy that text and paste this into our value field here and add secret okay and that should pretty much conclude adding our secrets into github let's go ahead and go into actions and see if this guy's failed already looks like it has so now if i select deploy to aws from the left hand side you can see now i'm presented with the button run workflow and this is where that workflow dispatch trigger comes into place let's go ahead and select this and click run workflow now if we wait a few moments it should show up in the list let's go ahead and click on it and you can actually watch the deploy happen in real time in this screen this is kind of an overview of all the jobs that you have defined but if you click on our deploy job that we've defined inside of our workflow you can actually watch the individual steps as they process through and our job seems to have completed successfully so now even though we've deployed out to aws we haven't actually deployed any changes so accessing for instance the cloud front version of our app is not really going to look any different so let's go ahead and change that i'm going to head into vs code that i have open i'm going to sync down the changed version of the code you can see we have our deployed aws yml file that we just created here so now let's simply change the text that's being presented right here where it says welcome to your viewjs app and try and deploy this out one more time if i had an app.view you could see we have the default hello world component that's proven provided for us by default with ucli let's go ahead and change this to github actions are awesome save this head over to source control and we're going to commit this file i'll just say updated app.view i'm going to control enter to commit my files and click the sync button again to sync my changes up into github now if we head back into github i gonna pop back up into the actions tab you can see here we already have the action being run by github even though we didn't have to come in here and do it manually simply because it was triggered off of our commit into the main branch so let's go ahead and wait here for a few moments and let this deploy finish okay now that our workflow has been completed let's go ahead back into the cloudfront version of our application let's refresh the page and you can see without having to actually go into aws and do anything we've already deployed out a completely updated version of our code if you like this video feel free to give it a like and share it out to your friends if you want to see more content like this subscribe to my channel for new videos every week if you're looking for help on an issue or just want to collaborate with other developers be sure to join my discord by clicking the fullstack.chat link in the description below or just enter it into your browser to join thank you so much and have a great day

Channel: Brian Morrison

Views: 2,823

Rating: 4.949367 out of 5

Keywords: azure, aws, cloud, nodejs, dotnet, developer, github actions, aws s3, continuous integration, continuous delivery, continuous integration and deployment, continuous integration github, github actions tutorial, github actions ci/cd, github actions aws, github actions explained, aws s3 bucket, aws s3 static website hosting, aws s3 cli, aws cloudfront ci, vuejs, vue js, vue, automatic deployment github actions, github actions vue, github tutorial, github actions automation, github

Id: aBJMHcMjhZ4

Length: 17min 48sec (1068 seconds)

Published: Tue Feb 23 2021