Streamline Deployments to AWS S3 with a Deploy Script in package.json
To streamline the build and deploy process it's a good idea to create a deploy script in your package.json. The script is aws s3 sync and then the path to the build folder and the URL to your S3 bucket.
Instructor: [0:00] Now that we've got our S3 user configured in the AWS CLI, it would be great if we could deploy our Build folder to our S3 bucket from the command line. Not only that, it would be ideal if we could add a script to our package.json so that we could just run an npm command to deploy our site to S3.
[0:22] You know what? We actually can. Before we set that up, let's go take a quick look at our S3 bucket one more time. I'll go back to Our Services, click on S3, and click on Our Egghead Test Banana.
[0:37] Remember, earlier, we set up our S3 bucket to be a static website. If I click on Properties and then scroll all the way down to the bottom, you can see we have this bucket website endpoint. If I click on it, it's going to open a new tab, and you can see we have a 404. I wanted to do that before we actually deployed our site, just to make sure that something is up and running. Let's go back over to our code. We're going to create a new script.
[1:05] Let's go under our eject script, and we're going to type Deploy. For our script, we're going to say aws s3 -- that's the command for S3 -- and then sync and then build/ -- so that's the name of the folder that we want to sync with -- and then our s3:// and the name of our bucket, egghead-s3-test-banana. We'll go ahead and save that.
[1:27] Now, down in our terminal, we can run npm run deploy and hit Enter. Let me make this a little bit bigger so you can see what's happening. You can see that it uploaded our build server to our static site. Let's go check that over in the browser. If I hit Refresh, lo and behold, we can see our React app.
[1:48] Let's make a quick change to the application and redeploy it, just so we know that this is working. Let's go back over to the code. I'm going to open App.js. Let's hide the terminal real quick. Let's replace the text, edit App.js, and save to reload with "Hello, egghead!"
[2:08] Now, let's rebuild and redeploy our application. I'll open up the terminal. Let's clear this out, and let's run npm run build and npm run deploy. That will rebuild our application and then send it back up to S3.
[2:24] We'll give that a second, and you can see that the upload is complete. Let's hop back over to the browser and reload and voila. We can see "Hello, egghead!" Now, we've successfully deployed a React application to an S3 bucket.