To deploy an SPA (React.js, Vue.js, Angular.js, etc.) project on AWS Cloud, there are several options available.
The first option is to set up an EC2 instance with Nginx or a local Node server to serve the SPA project's build artifacts such as index.html and bundle.js.
→ To implement the first method, you need to first create an EC2 instance and set up either a Node environment or upload the SPA build files to EC2. Then, configure Nginx or Apache server to serve the index.html of the SPA build artifacts. Afterward, you would need to connect it to ALB or Elastic IP for hosting.
The second option is to Dockerize the SPA project, upload it to AWS ECR, set it up on AWS ECS, and then host it through ALB.
→ For the second method, you need to learn about Dockerizing the SPA project, setting up scripts to upload to AWS ECR, running Docker images from ECR on ECS, creating ALB, and configuring the target group to point to ECS.
The third option is to upload the SPA build artifacts to an S3 bucket, enable static website hosting, and host it through CloudFront.
→ For the third method, you need to upload the SPA build artifacts (including index.html, bundle.js, and other files) to S3, configure static website hosting on the S3 bucket, and then connect the S3 bucket endpoint to CloudFront.
Why choose the third option? The reasons are as follows:
The first method incurs costs as EC2 instances are billed for the duration they are running, making it expensive to maintain over a month. Additionally, EC2 instances require direct management.
The second method also incurs costs as ECS instances are billed for the duration they are running, making it expensive to maintain over a month.
On the other hand, the third method incurs minimal costs as S3 charges per GB stored, and CloudFront costs are generally low unless there is very high traffic.
Now, if you've chosen the third method, let's first open the project for deployment, which is the main page of the Steve Web Service (SWS) project, in an editor.
The project mentioned above is an SPA project implemented in React.js. When you execute the build script in the project (in the example provided, npm run build), it generates a build folder. You then compress this build folder into a zip file.
Next, go to the SWS Console, enter AWS Frontend DMS, input the Project Name, upload the compressed zip file of the build folder, and then press Create Project. In just 5 minutes, everything from S3 static web hosting to CloudFront will be set up at once.
Upon entering the detailed view of the created project, you'll notice the CloudFront Domain. Clicking on it and navigating will confirm that the page displays correctly. Isn't it remarkably straightforward?
Go to the Steve Web Service Page
Go to see how to create a project in Steve Web Service AWS Frontend DMS
Now that S3 and CloudFront are set up, the last task for us is domain linking.
First, click on "Go to purchase a domain in Route53" as shown in the image below, then navigate to the page. Next, input the desired domain name in the "Register domain" section. The domain should be entered in the format of abc.com .
Next, select the desired domain name to purchase, as shown in the image above, then click "Proceed to checkout." Afterward, click "Next," input your contact information, click "Next" again, and finally, press "Submit" to complete the domain purchase in Route 53.
Go to the Steve Web Service Page
Go to see how to purchase a domain in AWS Route53
Next, navigate to Route 53 → Domains → Requests as shown in the image above, and wait until the purchased domain's status becomes "Successful."
Now, go back to the detailed view of the created project in the Sws Console, select the purchased Route53 Domain, and then click the "Create SSL Certificate" button to obtain an SSL certificate.
After refreshing the page and confirming that the SSL/TLS Certificate Status has changed to ISSUED, enter the subdomain name, and click the "Connect Domain" button to complete the domain linking. The above image is an example of connecting to http://web.swstest.net .
You can verify that it successfully connects by accessing https://web.swstest.net.
In this way, without any prior knowledge of AWS Cloud, we have deployed an SPA project through the SWS Console.
SWS continues to develop tools that assist users in building cloud architectures without the need for extensive AWS Cloud learning. This enables developers to focus more on their business, and further, it provides value by allowing even small teams of developers to leverage a maximum of AWS resources.
Go to the Steve Web Service Page
Top comments (0)