Skip to main content

Deploy ReactJS App with S3 Static Hosting

Create a simple react app. Configure an S3 bucket for static web hosting. Deploy! Prerequisites: AWS Account created AWS IAM User AWS CLI installed (and additional dependencies) AWS Credentials Locally SetupOn the IAM console, we need to create a user for the Serverless Framework. Giving the Serverless Framework permission to create, update, and delete resources on AWS. Click Add user.
Image for post

Give the user the name serverless-admin with Programmatic access selected. Click Next: Permissions.

 

 

 Switch to the Attach existing policies directly tab and select AdministratorAccess (for testing). In the future, make sure to scope the IAM permissions based on your level of access. As this is not a deep dive into IAM we will keep it simple. Then click Next: Review.


 We need to copy the Access Key ID and the Secret Access Key for later use. So click Download .csv. Click Close.

 


now, download latest aws cli https://docs.aws.amazon.com/cli/latest/userguide/install-cliv2-linux.html 

after it is installed run 

./install awscli
 
 replace credentials by yours

create now the bucket where the app is going to be hosted
after the bucket is created 


In the Set properties tab, you can just hit next.
 
 

 

click on Static web hosting and set it like this
 
 
 
 
On the Set permissions tab, select Grant public read access to this bucket and hit next.
 
 
 
 
Now that our S3 bucket is set up for Static Hosting we need to set up permissions. To do this click the Permissions tab and select Bucket Policy. You can copy and paste what I have below, swapping out example-bucket with your bucket name.
 
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowPublicReadAccess",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::example-bucket/*"
]
}
]
}

This gives users read access to your bucket. Go ahead and hit save. 
 

Let’s open up our react-app project in a text editor and create a deployment script to make updating our live ReactJS application easier.

Open up your package.json file. Inside there is a section called scripts. We’re going to add a script called deploy which will use the AWS CLI to sync our build directory to our S3 bucket. Swap out example-bucket for your bucket name and copy/paste it into your package.json file using the image below as a guide.

 

aws s3 sync build/ s3://example-bucket --acl public-read
 
 
 
 now to compile do it as usually as npm run build
 and to deploy do npm run deploy
 
 
 
 so, let's get now the public Endpoint in the S3 - PROPERTIES - STATIC WEB HOSTING
 

 in this case the


Comments

Popular posts from this blog

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 Op...

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 ...

Printing using SpringBoot - cups4j

One of the easiest ways to print something from Java , in this case, using a SpringBoot Java Api Rest is with CUPS . Let's assume you've set up your CUPS server up and running, add to your pom.xml file this dependency      < dependency >      < groupId > org.cups4j </ groupId >      < artifactId > cups4j </ artifactId >      < version > 0.7.6 </ version > </ dependency > now at this imports to import  java.io.FileInputStream; import  java.io.FileNotFoundException; import  java.net.URL; import  java.util.HashMap; import  java.util.List; import  org.cups4j.CupsClient; import  org.cups4j.CupsPrinter; import  org.cups4j.PrintJob; import  org.cups4j.PrintJobAttributes; import  org.cups4j.PrintRequestResult; import  org.cups4j.WhichJobsEnum; add this method to prin...