Skip to main content

How to use CI/CD usgin AWS CodePipeline - S3 BUCKET - ReactJS/VueJS - BItbucket or Github

it is assumed you already know the process about continuous integration CI/CD, each time you make a git push origin your_branch_name it will automatically gets your code from Github or Bitbucket it will build it and unzip it at the S3 desired bucket let it up and ready in an automatic way.


this tutorial woks well up today, it anything has changed then it will give you an idea about how to implement this kind of tool in your development team 


let's start creating an S3 bucket where the front willl be


 


now click on bucket properties and select the Static web hosting option


now click on the bucket permissions - CORS configuration and set 


<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>



now click on the bucket permissions - Bucket Policy and set

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_S3_BUCKET_HERE/*"
        }
    ]
}


 

we have the S3 bucket ready to keep on moving, so let's go to the sercvice CodePipeline and click on Create pipeline give it a name to your pipeline project




 

I selected Bitbucket at the source provider , after I did it and connected the account I selected the repository where I've got the frontend which I want to link with the S3 bucket alongside with the branch name in this case master



I selected AWS CodeBuild at the build provider, I gave it a name, let's click now on Create Project, you'll get a popup maximize it

  

I selected at environment the next options

Operative system = Amazon Linux 2

Runtimes = Standar

Image =  Use the latest image



Click on Continue to CodePipeline

 

 

Click on next, and at the Deployment provider select Amazon S3, select the bucket and click on Extract file before deploy and click on next


 

Click on Create pipeline


 

so now, the most importan thing, you must add a file called buildspec.yml at your root level folder project

 

 

inside that file you must set


version: 0.2

phases:
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build

artifacts:
  files:
    - "**/*"
  discard-paths: no
  base-directory: build


so, go to your front project make a change, and run git push origin master

as soon as the git push origin master was done the process started 

 

 


after a couple of seconds

 


 

now go to your s3 bucket and get the url link from the bucket properties - static web hosting 

 

 

then you will be able to see the front running on that bucket

 


 

CI/CD AWS CODEPIPELINE


{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR_S3_BUCKET_HERE/*"
        }
    ]
}




<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
</CORSRule>
</CORSConfiguration>





version: 0.2

phases:
  pre_build:
    commands:
      - npm install
  build:
    commands:
      - npm run build

artifacts:
  files:
    - '**/*'
  discard-paths: no
  base-directory: build



Labels:

Comments

Post a Comment

Popular posts from this blog

How to deploy a VueJS App using Nginx on Ubuntu

There are thousands of blogs and websites out there explaining how to do a hello world and how to start with VueJS, but in this little post, I’m just going to be explaining how to do deploy a VueJs app after you have run the command through the CLI npm run build . So when you run the command npm run build a dist folder is created and that folder’s got the essential .js files to run our app, when we want to run our app on an Nginx server by default the vue-router is not going to work well so that Nginx does not come ready to work by default with a VueJs app This is basically for a Linux Ubuntu distribution if you’ve got any other Linux distribution just pay attention where is going to be set the www/html folder and the Nginx settings so that this is useful for any Linux distribution  Install and configure nginx sudo apt install nginx Double check to make sure the nginx service is running with command service nginx status, then open your browser and enter url
1 comment
Read more

How to secure SpringBoot with SSL and Tomcat or Undertow

when we are going to take our applications to production mode, we must have an SSL certificate for the FrontEnd and   BackEnd too, in this case, our backend is a  SpringBoot which is using a tomcat embedded server. Terminology TLS vs SSL TLS is the successor to SSL. It is a protocol that ensures privacy between communicating applications. Unless otherwise stated, in this document consider TLS and SSL as interchangable. Certificate (cert) The public half of a public/private key pair with some additional metadata about who issued it etc. It may be freely given to anyone. Private Key A private key can verify that its corresponding certificate/public key was used to encrypt data. It is never given out publicly. Certificate Authority (CA) A company that issues digital certificates. For SSL/TLS certificates, there are a small number of providers (e.g. Symantec/Versign/Thawte, Comodo, GoDaddy, LetsEncrypt) whose certificates are included by most browsers and Operating System
2 comments
Read more

How to do pagination SpringBoot with Jbctemplate, MySQL

We are going to be working on a topic which is a basic need when doing any app, and it is Pagination. let's get started creating a product table at https://mockaroo.com/ create table products ( id INT, name VARCHAR(50), code VARCHAR(50) ); insert into products (id, name, code) values (1, 'Hettinger-Goyette', '42549-680'); insert into products (id, name, code) values (2, 'Konopelski-Klein', '49527-724'); insert into products (id, name, code) values (3, 'Smitham, Kuhlman and Balistreri', '53238-003'); insert into products (id, name, code) values (4, 'Hettinger, Weissnat and Goodwin', '0143-9916'); insert into products (id, name, code) values (5, 'Rowe Inc', '42291-898'); insert into products (id, name, code) values (6, 'Ernser-Hauck', '10544-617'); insert into products (id, name, code) values (7, 'Maggio and Sons', '68788-9087'); insert into products (id, name,
Post a Comment
Read more