How to Deploy Vue Js on s3 with Cloudfront

Introduction

Vue Js is an open-source JavaScript framework for building interactive web interfaces. The VueJS app is intuitive, straightforward, and fast. It is capable of building user-interface and single page applications when used in combination with supported libraries and a full-featured framework. To create VueJS app user needs to have a good understanding of HTML, CSS, and JavaScript.

Prerequisites

  • AWS account
  • IAM users in the AWS account.
    Note: Refer to the article “How to create IAM user” to create if not already exist.
  • IAM user must have full access to s3: to host a static website
  • IAM user must have full access to CloudFront: to create CDN
  • IAM user must have full access to AWS Certificate Manager(ACM): to create a certificate for your application(if the application is to be deployed with HTTPS)
  • IAM user must have full access to Route53: for domain registration and/management
  • Build for React Js application. To Download test build for VueJs application use

Deploy Vue Js code to AWS S3 bucket

Login to the Aws console with IAM user credentials.

Step 1: Click on Services and select s3 services from the storage section.

Step 2: From the S3 buckets page. Click on Create bucket button to create a new bucket.

The pop-up window will open to create a new bucket.
Step 3: Give the same name as the domain name in the Bucket Name field and select Region for your bucket from the drop-down list of region field and click Next.
Note: It is required to have the same name as the domain to deploy the static websites.

Step 4: It includes the Configuration Option for the bucket. You can leave as it is and click on Next if you are not familiar with the options.
Tags: You can add multiple tags if you want.
Example:
Name of the bucket: Key = Name, Value = vuejs.zehncloud.com
When u create a bucket: Key = Date, Value = 20190928

Step 5: You need to Set Permissions for your bucket accessibility. For time being give all access to the bucket. Uncheck the Block all public access and select the checkbox to give the public access, and click Next.

Step 6: From Review, you can see all the setting which we set previously for our bucket. Click on Create bucket button the bucket will successfully be created.

Step 7: Click on bucket name from the s3 bucket list to open a recently created bucket and click on the upload button to upload code for the VueJS application(if you don’t have your own code use above git repository to download sample code).

Step 8: Drag and drop the files from your local computer(download from the GitHub account) or click on the Add Files button to browse the file from a directory.

Once all the files are load in the window click on Next.

  • Do not change Permission from Set Permission tab and click on Next.
  • Do not Change Set Properties and Click on Next(default property will be standard).
  • Review the settings for upload files and click on the Upload button.

Files are upload in the s3 bucket. But the bucket is not publicly accessible. We need to change the permissions for the bucket to access the bucket data from outside.

Step 9: To make an S3 bucket public. Click on the Permissions tab and Bucket Policy.

Step 10: Use the below code to make S3 bucket public. In the below code you need to change your bucket name(vuejs.zehncloud.com). After made changes click on the Save button.

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

Once you click on the Save button the message will display “This bucket has public access”.

Host Static Website with S3 Bucket

Step 1: To Host, a static website move to the Properties tab and click on Static website hosting.

Step 2: Select “Use this bucket to host a website” option from the window and use the “index.html” page in Index document and “error.html” in Error document and click on the Save button.

Note: To host a static website with an S3 bucket only you can also refer to the article “How to host a static website by s3”.

Step 3: The static website is now hosted from s3 and you can also use s3 bucket Endpoint to load the Vue Js application.

Deploy the application to CloudFront

CloudFront is the Content Delivery Network (CDN) service provided by AWS. It is used to optimize speed and making highly available around the globe. If you use s3 bucket the performance may be just fine.
Now we use AWS CloudFront services to access the Vue js application with CloudFront URL.

Step 1: Click on Service and select CloudFront from Networking & Content Delivery section in the AWS console.

Step 2: CloudFront Page will open. Click on Create Distribution.

Step 3: “Select a delivery method for your content” page will open. Click on the Get started button.

Step 4: “Create Distribution” page will open. Select the endpoint of the S3 bucket “vuejs.zehncloud.com” from the drop-down menu of Origin Domain Name.
Step -5: If you want to run a static website with HTTPs select Redirect HTTP to HTTPS radio button from Default Cache Behavior Setting section, otherwise leave the default.

Step-6: In the Distribution, settings add Alternative domain name(your domain name) and SSL Certificates to run the static website with HTTPS. Otherwise, leave SSL settings as default.

Step 7: Leave the other default setting as it is and scroll down to the bottom of the page and use “index.html” in Default root Object and click on the Create Distribution button to save the changes.

CloudFront Distribution is created.

Note: The distribution takes 10-20 minutes to complete the process.

Setting Up Route53 to create Record Set

Step-1: Open Route53 from the Service tab.
Step-2: Open your hosted zone from Route53 and create a Record Set to host the static website.
Step-3: Use the following steps to create Record Set.

  • Use the domain name in the Name field
  • Use A-type Record Set
  • Select Yes from the Alias.
  • In the Alias, Target selects Cloud Front Distribution domain name from the drop-down menu. e.g: d3v28if9fqbmte.cloudfront.net (the domain only reflect after the distribution is completed successfully) ”
  • Click on the Create button to save the Record Set.

Step-4: You can access the website with the created domain name. e.g., vuejs.zehncloud.com

Note: If your hosted zone created on any other service provider then create a Record Set with type CNAME and use CloudFront URL as a value.

Conclusion

We deploy the VueJS application on S3 bucket and host a static website using S3. From the S3 bucket, we create a CDN using CloudFront with certificates to secure the website and Route 53 is used to access the website with the hostname.

Related Posts

ELK stack setup on centos
AWS
Chanchal Khatri

ELK Stack Setup on CentOS

Contents Introduction Elasticsearch Kibana Logstash Introduction ELK stack is formerly known as Elastic Stack. It consists of Elasticsearch, Logstash, and Kibana. It helps you to store all your logs in one place and analyze the issues

Read More »
amazonsqs
AWS
Anuj Mandloi

Why Amazon SQS?

Contents Introduction Difference between SQS and MQ Benefits of SQS Getting started with AWS SQS Conclusion Introduction Amazon Web Services provides many services to make life easier. “Amazon SQS” is another service provided by Amazon

Read More »