Deploying Vue applications on AWS

In this article, We’ll learn about deploying our Vue application on AWS S3. Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. This means customers of all sizes and industries can use it to store and protect any amount of data for a range of use cases, such as websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics. Now that we know what S3 is, let’s get started.

Prerequisites:

1. Node

2. Activated AWS account

Getting started:

To get started with the deployment, we need to install vue CLI. Vue CLI is a command-line interface tool that you use to initialize, develop, scaffold, and maintain vue applications directly from a command shell. To install the CLI using the “npm” package manager:

npm install -g @vue/cli

To create, build, and serve a new, basic Vue project on a development server, go to the parent directory of your new workspace use the following commands:

vue create <app-name>
cd <app-name>
npm run serve

When you run “vue create <app-name>” a new vue workspace folder named “app-name” will be created in the current working directory. Since you want to be able to create files inside that folder, make sure you have sufficient rights in the current working directory before running the command. When you use the “npm run serve” command to build an app and serve it locally, the server automatically rebuilds the app and reloads the page when you change any of the source files.

In your browser, open “http://localhost:8080/" to see the new app run.

Now that our app is up and running, let’s deploy it on AWS S3. You have to register a new AWS account by clicking here, if you haven’t already. As part of the AWS free tier, you can get started with Amazon S3 for free. You can estimate the costs of AWS products and services here.

Sign in to the AWS management console and open the AWS S3 console by clicking here. Before you can upload data to Amazon S3, you must create a bucket in one of the AWS Regions to store your data. Clicking on “Create bucket” button opens the create bucket wizard.

Choose a bucket name that is unique across all the AWS accounts. Following to the account name, we have a region. Choose a Region close to you to minimize latency, costs and address regulatory requirements and click on next. Leave the configuration options as it is and uncheck “Block all public access”. This will allow you to host the website publicly. Now review your configuration and click on create bucket.

Once the bucket is created successfully, we need to upload files to deploy our vue application. To do so, we can run the following command in the command line interface:

npm run build --prod

This command can be used to build a project to generate a dist folder containing the minimized version of the source code. Go back to the S3 console and click on the bucket name to start uploading the dist files.

Once the files are completely uploaded, navigate to the properties tab and click on static website hosting and enter index.html for both index document and error document and click on save. This will enable website hosting on this bucket.

The endpoint on the top is the link for the successfully deployed Vue app.

It might up take upto a minute and then you can navigate to the link to see our deployed Vue app 👏🏻 🔥.

This post helps you understand how to deploy vue applications on AWS. Check out my other blog posts on AWS here.

Like this article? Follow Maneesha Venigalla.