Deploy Vuejs app on AWS S3 with CloudFront distribution and a custom domain (SSL)
Hey there! 👋
AWS S3 is an object storage solution from Amazon, which uses the web interface to serve any type of file. A user would create a bucket and all of the objects can be stored, protected, and retrieved from the same. Each object will have a universal key that will be used to store and fetch.
From AWS S3’s documentation,
“Amazon Simple Storage Service (Amazon S3) is storage for the Internet. It is designed to make web-scale computing easier.
Amazon S3 has a simple web services interface that you can use to store and retrieve any amount of data, at any time, from anywhere on the web. It gives any developer access to the same highly scalable, reliable, fast, and inexpensive data storage infrastructure that Amazon uses to run its own global network of websites. The service aims to maximize the benefits of scale and to pass those benefits on to developers.”
We will be seeing,
- How can we deploy a Vuejs application on S3?
- How to create a distribution and attach a custom domain bought from GoDaddy?
- What configurations to do at the domain provider’s website?
- How to perform invalidations for any future updates on the web app?
How can we deploy a Vuejs application on S3?
First things first, we need to build the Vuejs application, to start the build run the following command at the root of your project,
npm run build
Make sure that you have a scripts entry in package.json (which should be there if you have generated the project using vue-cli)
This will start building and transcompiling your project to vanilla js and save all the files to the dist folder if the default config has not been changed. Once done open your AWS console and head over to S3.
Create a new bucket if not created already, keep the settings default for now. Now open the newly created bucket and click on the ‘Properties’ tab, then scroll to the bottom.
There will be a section named ‘Static website hosting’ > Click on edit > Set values as
- Static website hosting: Enabled
- Hosting type: Host a static website
- Index document: index.html
Hit on ‘Save changes’, now your bucket is ready to serve static web applications.
We will deploy the application to S3 now,
There are 2 ways to do so, you can manually go and upload the compiled files using the console browser interface OR you can push it via your CLI.
To push it using your CLI, you need to first install the aws-cli, head over to https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html and install it as per the instructions provided. To verify if it is installed properly run,
aws — version
This should give the output something like,
Head over to your AWS console again, search IAM in services, and open the equivalent service,
- Now click on ‘Users’ under Access Management in the left side nav
- Select your user
- Click on Security credentials
- Under access, keys click on Create access key
- You will get a dialog box, copy both Access key ID and Access Secret and keep it stored.
Let’s configure your aws cli with your account, run,
aws configure
Enter the values that you copied before in their appropriate fields. After configuration, your CLI would look something as follows,
To deploy the application run in your project root,
aws — region region-here — profile profile-here s3 sync ./dist s3://bucket-name
— region and — profile are optional, and they will be switched to default if not provided
You can even add a script to deploy this application in your package.json file, under scripts object just add another key-value as follows,
So from next time you run your build command, you can run
npm run deploy
and this will push/update your project to the bucket.
But now if you try to access the URL, it will give you a 403 error if your bucket is not public,
To update the same click on the ‘Permissions’ tab under your bucket and scroll till you find ’Bucket policy’, click on edit and paste the following,
Make sure to replace bucket-name with your actual bucket name, this is a custom policy that will only allow read access to everyone. This is obvious as your website needs to be accessible to everyone with a browser and an internet connection.
How to create a distribution and attach a custom domain bought from GoDaddy?
To create a distribution using CloudFront we need to issue a certificate to make the website work with SSL. If you want to skip this you can directly just to the below section where we are configuring CF (CloudFront).
Issuing a certificate:
- Search for Certificate manager in the AWS console
- Open the service
- Start with the steps that are needed to validate if the domain belongs to you
- Add the domains that you want to attach in step 1.
- Then select the validation method, usually DNS validation.
- Then add any tags if you want to have them.
- Then finally in step 5, you will have your validation task, here you will have to add a CNAME record with the key and value that they have provided.
- Head over to your domain provider’s dashboard and apply that CNAME under your domain.
For me it’s GoDaddy so it is under My Domains > Select domain > Domain Settings > DNS Management. Add the host as the ‘Name’ from the AWS console and ‘Points to’ as the value from AWS.
The validation at the AWS end usually completes within 15–20 minutes if all the processes are done correctly. There are cases where it takes more than a day or two, so keep an eye on the dashboard.
Once your certificate has been issued successfully it will be shown under the ‘Certificate manager’ as follows
Cloudfront configuration:
- Open Cloudfront in AWS dashboard
- Click on distributions
- Then ‘Create distribution’
- There are a few settings that you need to do here:
- Origin domain: This will be your S3 bucket domain
- Name: Add a valid name
- Default cache behavior: Viewer: Viewer Protocol Policy: Redirect HTTP to HTTPS
- Settings: Price class: Select the Edge locations as per your need (More the better and pricier)
- Custom SSL certificate: If you have added an SSL certificate in the above steps using certificate manager, your certificate will appear in this dropdown. Select the certificate
- Now click on save, it will start creating your distribution which will take around 15 min to cache it over all the Edge nodes that you have selected.
What configurations to do at the domain provider’s website?
Once the above steps are processed, you will be able to view your website using the Distribution domain name. It will look something like
https://xxxxxxxx.cloudfront.net
Now we need to add a couple of CNAMEs to map our CloudFront distribution URL to our custom domain, open your domain provider dashboard again, and open the domain settings to edit your records.
Under that, you need to add 2 new records with,
Type: CNAME, Name: Actual custom domain, Value: Cloudfront URL.
Type: CNAME, Name: ‘www’ (without quotes), Value: Cloudfront URL.
Now, there should be a section called forwarding or something similar, under that add a new entry in the domain,
FORWARD TO: https://
Add your domain in the text field with root domain (.com, .in, etc)
FORWARD TYPE: Permanent (301)
SETTINGS: Forward only
After all of these settings and configurations are done properly, you should surely be able to access your website with your custom domain.
How to perform invalidations for any future updates on the web app?
This is helpful when you want to update your application, as we are using CloudFront, all the data is cached in the Edge nodes selected so you have to manually invalidate the cache so it will recache everything again from the S3 bucket.
Keep a note that you have to do invalidations every time you are pushing an updated build to S3.
- To add invalidation go to CloudFront > Distributions
- Open your distribution
- Click on the Invalidations tab
- Then ‘Create invalidation’
- Under ‘Add object paths’ add the appropriate path that you want to invalidate.
- You can even use wildcards (*). To invalidate everything add ‘/*’.
- Click on Create invalidation, this will take around 15 mins to process, and voila your updated stuff will start appearing on the application.
Thus, we have successfully deployed and hosted a Vue application on S3 with a custom domain.
Thanks! ✌
