How To Deploy a Static Web Application Using AWS S3 In GitLab Yaml File(From Scratch)

I'm going to show you how to deploy a static web application using AWS S3 bucket in a GB and this session I'm going to from from this scratch so let's start this is the one documentation which I have created for referring the steps these are the few steps we want to refer here St so in the first step we need to create IM am user and we have to give the S3 full access permission there then we these steps we have to create manually so let's firstly we have to go to the a console and this is an IM service let's click on the IM am service then you will get the users option here just click on the create user I already have a user just I'll show you how to create an user give the name get user just click on the next Once you click on the next you don't want to add any group here we don't want to copy permission let's attach the policy directly let's give the S3 full access here attach the S3 full access policy here just click on the next and then click on the create user once you click on the create user then it will display here just click on it then you have to go inside the security credentials and you will get the option here access key just click on the create access key here once you click on the create access ke you have to select other and just click on the next and click on the create access once you click on the create access you will get access key and secret key here so as per the documentation we have to store the IM credential in the gitlab variables so let's go back to our gitlab account this is our gitlab account and if you go down on the left side you will get the setting option inside of setting you will get the cicd option just click on the cicd and you will get the variables here just expand the variables I already added that I'll show you like this is an AWS ACC key ID I'm going to edit this one here the KE key name you have to give the AWS access key ID just copy this access key ID from here and paste as a value of this so once you paste it just save the changes and add another variable we need to add another variable aw secret access key so just click on the add variable give the name key and copy the secret access key from here this is a secret access key just go back and past it the value once you paste here then just click on the save button once you save this one then we can add the default region as well so already added one default region as a US Ty is this is for n Virginia if you want to add you can add it here let's go back to our do mentation or third step we have to create a gitlab C.L file so let's go back to our gitlab ml file where is our repository under the code we'll get the repository and click on the new file here so once you click on the new file just we have to give the name gitlab ml then after that we'll give the stages here we want to deploy a small HTML or css template to S3 bucket using the static website o so simply I'll give deploy S3 deploy to S3 bucket then I'll use the same name or as a job then we'll use a stage here we'll use an image here so we already configure or I am credentials inside the gitlab variable so you know for authenticating those credentials from gitlab to AWS we are using one image here the image name is this AWS Bas L it is already available in the registry. gitlab.com let's copy this image and paste it here so once we paste here then we'll write the script here here our first step we have to create S3 bucket with public access so here we are going to create S3 bucket manually we are not going to create S3 bucket as a using aw we already done those things in the previous session if you want to check how we can create S3 bucket through the using this AWS CLI you can check those video as well so let's go back to our AWS account this AWS account and this is our AWS S3 service just click on the create button here once you click on the create button you will get the options here for the bucket name so let's give the unique bucket name here so let me give the unique bucket name deploy to S3 using gitlab so this is our bucket name make sure the bucket name should be unique let's scroll it down I'm not going to give any ownership here so let me block all public access I'm going to uncheck this one and I'll acknowledge this one the Turning of block all public access this one let's scroll it down I'm going to enable the versioning let's scroll down and just click on the create button so there is the bucket name it showing invalid so it's not taking the underscore here so let me remove this underscore and let's keep without underscore here and just scroll it down and click on the create okay once you click on the create bucket the bucket has been created so there are two bucket is showing one bucket already there gitlab testing bucket 1 2 3 4 so this bucket I not using so I'm going to delete this bucket currently so let's go back and select this bucket and click on the delete give the bucket name once you give put the bucket name the bucket has been deleted now you can see this deploy to S3 using bucket has been created here now there is no content available inside the bucket and also there is no permission available here so if you see there is no bucket policies there so our next step we have to add the bucket policy we want to modify the bucket policy so this is the bucket policy you will get on if you Google out you will get allow the access all read right and other access you can utilize this kind of policies there so I'll past it out in the description box you can copy paste from so I'll copy this bucket policy from here and we'll give the so this is one bucket policy I want to put this bucket policy inside the policy s3. Json file so that's why I'm simply using command here so Eco means just printing the statement and storing inside this policy s Json file once this permission has been added inside this Json file I want to send this Json file from current location to here in the AWS S3 bucket so how can I do that so there is one more command is here if you'll see this is the one command like AWS S3 API put bucket policy AWS S3 API put bucket policy this is an awci command and the parameter like as a bucket and policy so our bucket name is we already copied the bucket name we need to give the bucket name here so deploy to S3 bucket this is our bucket name and we have to provide the bucket name here as well like like if you'll see in the bucket policy here it will ask Arn aw3 bucket name so here also as a resource Arn AWS S3 we need to replace this previous bucket name with the latest bucket name so here what's going to happen first we have created S3 bucket then we have added this public Creed gate object policy inside the Json file then after that we are going to send this public this public Json file from current location to this S3 bucket then after that we want to deploy our static website so here simply we are going to deploy one index.html for file so how we are going to how we can send those file from here to there how we can deploy that so we already given all the permission on policy so firstly we have to create one index. Json file so let's I'll open another to tab here let's go back and I'll create one file here I'll create simply one index.html file and I'll add there welcome to deop z+ tutorials so let's commit the changes now if you'll see here in the current location one file is available index.html and this is our gitlab ml file so here let me do one thing I'll send this index.html file from here to S3 bucket so how we how I can send that simply one command is there so let me copy this command AWS S3 CP our index. HTML and this is our S3 and our bucket name so this is our bucket name let me copy this bucket name and I'll paste it here so this is our path for the S3 bucket this is our index.html file which we have added inside one small sentence welcome to devop Z Plus tutorial so let's scroll it down and commit the changes and let's see the output let's go back to the build pipelines the pipeline is running just click on it and monitor the pipeline let's wait for the execution okay you can see job has been succeeded upload index.html to S3 bucket now let's go back to AWS S3 bucket just refresh this page now you can see the bucket policy has been added with our deploy to S3 using gitlab let's go back to the object and see index.html has been added here now let's go back to bucket and you can see this is our bucket name just click on it click on the index.html and you will get object URL once you click on the object URL you can see or application has been deployed or index.html has been deployed welcome to d z plus tutorial now I want to modify this welcome to devops Z Plus tutorial with the another sentence so what how can I do that let's go back to our gitlab C.L file I don't want to modify this yl file I want to mody only index. HTML file so let me edit this one and I'll add one more sentence please like share and subscribe to channel and let's commit the changes once commit is done let's monitor the pipeline the pipeline has been started here let's wait for the execution now you can see job has been suced now you can you have to just refresh this page here now you can see welcome to devop Z Plus tutorial please like share and subscribe to channel so this is the way guys we can deploy static website using S3 bucket so I hope guys you understood this flow thank you for watching we'll see you in the next session

Channel: DevOps Z+ Tutorials

Views: 203

Keywords:

Id: KhDqsMftkPw

Length: 14min 56sec (896 seconds)

Published: Tue May 14 2024