Hosting a static React application on AWS using S3 and CloudFront is an excellent way to deploy a performant, globally distributed web application. This guide will cover the steps up to creating an S3 bucket.
Step 1: Create a React App
Before we deploy, we need to create a React app. To do this, ensure Node.js and npm (Node Package Manager) are installed on your system.
1.1 Install Node.js and npm
Node.js is a runtime environment for executing JavaScript code, and npm
is its accompanying package manager.
- Download and install Node.js from the official website.
-
Verify installation:
node -v npm -v
1.2 Create the React App
With Node.js installed, you can use the npx command to create a new React app.
-
Open a terminal and run the following command:
npx create-react-app my-react-app
-
Navigate to the project directory:
cd my-react-app
1.3 Customize the App (Add Host Name and Roll Number)
- Open the project in your favorite code editor (e.g., VS Code).
- Navigate to the src/App.js file.
-
Replace the content with the following:
import './App.css'; function App() { return ( <div style={{ textAlign: 'center', marginTop: '20%' }}> <h1>Harshad D</h1> <h2>Roll Number: 714022202023</h2> </div> ); } export default App;
Save the file.
1.4 Test the App
-
Run the app locally:
npm start
Open your browser and navigate to http://localhost:5173/. You should
see your name and roll number displayed on the page.
Step 2: Create an S3 Bucket
AWS S3 (Simple Storage Service) is an object storage service that can be used to host static websites. Follow these steps to create an S3 bucket.
2.1 Log in to AWS
- Go to the AWS Management Console.
- Log in with your AWS account credentials.
2.2 Create a Bucket
- Navigate to the S3 service.
- Click the Create bucket button.
-
Fill in the following details:
- Bucket Name: Enter a unique name (e.g., my-react-app-bucket).
- AWS Region: Choose the region closest to your target audience.
Uncheck the Block all public access option to allow public access
(required for hosting).Confirm the change and proceed.
Click Create bucket.
2.3 Configure the Bucket for Static Hosting
- After the bucket is created, click on its name to access the bucket settings.
- Go to the Properties tab.
- Scroll down to the Static website hosting section and click Edit.
- Enable static website hosting and specify the following:
- Index document: index.html
- (Optional) Error document: error.html
- Save the changes.
Step 3: Build and Upload the React App to S3
3.1 Build the React App
To prepare your React app for production, run the following command in the project directory:
npm run build
This will generate a build folder containing optimized files for deployment.
3.2 Upload Files to the S3 Bucket
- In the AWS Management Console, go to your S3 bucket.
- Click the Upload button.
- Drag and drop all the files from the build folder into the upload area.
- Click Upload to start the process.
3.3 Test the S3 Bucket
- Once the files are uploaded, go to the Properties tab of your S3 bucket.
- Under Static website hosting, you will see a Bucket website endpoint. Open this URL in your browser to view your React app.
Step 4: Configure CloudFront for S3 Hosting
To enhance performance and provide a secure, globally distributed setup, integrate your S3 bucket with CloudFront.
4.1 Create a CloudFront Distribution
- Navigate to the CloudFront service in the AWS Management Console.
- Click Create Distribution.
- Select Web and configure the following:
- Origin Domain Name: Choose your S3 bucket from the dropdown.
- Viewer Protocol Policy: Redirect HTTP to HTTPS.
4.2 Update S3 Bucket Permissions
- Ensure your S3 bucket allows access from CloudFront by setting up the appropriate bucket policy.
4.3 Test CloudFront
- Once the distribution status changes to Deployed, copy the Domain Name from the CloudFront dashboard.
- Open this URL in your browser to view your React app served via CloudFront.
Step 5: Deleting CloudFront to Avoid Charges
If you no longer need the CloudFront distribution, it is crucial to delete it to avoid unnecessary charges.
5.1 Disable and Delete the CloudFront Distribution
- Navigate to the CloudFront service in the AWS Management Console.
- Select your distribution and click Disable. Wait until the status changes to Disabled.
- Once disabled, select the distribution again and click Delete.
5.2 Verify Deletion
Ensure the distribution is no longer listed in the CloudFront dashboard.
Top comments (0)