How to Deploy a Vue App on AWS

So, you’ve built a Vue.js application and want to make it live using AWS. That’s a great choice! AWS provides reliable and scalable hosting solutions, making it ideal for Vue apps. Whether you’re deploying a simple static site or a full-stack application, AWS has multiple options to get your project online.

In this guide, we’ll walk through deploying a Vue app on AWS using Amazon S3 and CloudFront for static hosting. This approach is cost-effective, fast, and easy to manage. Let’s get started!

Prerequisites

Before you begin, ensure you have:

• A Vue.js project ready to be deployed
• An AWS account
• AWS CLI installed and configured
• Node.js and npm installed

Step 1: Build Your Vue App

First, navigate to your Vue project directory and run the following command to generate production-ready files:

npm run build

This will create a dist folder containing your optimized Vue app files.

Step 2: Create an S3 Bucket

1. Log in to your AWS Management Console.
2. Go to Amazon S3 and click Create bucket.
3. Enter a unique Bucket name (e.g., my-vue-app).
4. Uncheck Block all public access (so your app can be accessed).
5. Click Create bucket.

Step 3: Upload Your Vue App to S3

1. Open your S3 bucket.
2. Click Upload and add the contents of the dist folder.
3. Set all files to public read access (for accessibility).
4. Click Upload.

Alternatively, you can use the AWS CLI:

aws s3 sync dist/ s3://my-vue-app --acl public-read

Step 4: Configure S3 for Static Hosting

1. Open your S3 bucket.
2. Go to the Properties tab and enable Static website hosting.
3. Set the Index document to index.html.
4. Note down the Endpoint URL provided—this is your Vue app’s URL.

Step 5: Set Up CloudFront for Better Performance (Optional)

To improve speed and security, use AWS CloudFront as a content delivery network (CDN).

1. Go to AWS CloudFront and create a new distribution.
2. Set the Origin Domain as your S3 bucket.
3. Choose Redirect HTTP to HTTPS for security.
4. Click Create distribution.

Once deployed, CloudFront will provide a new URL for your app, which you can use instead of the S3 URL.

Step 6: Update S3 Bucket Permissions

To ensure your app is accessible, update the Bucket Policy:

1. Go to your S3 bucket.
2. Open the Permissions tab.
3. Under Bucket policy, paste the following JSON:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::my-vue-app/*"
    }
  ]
}

4. Click Save changes.

Replace my-vue-app with your actual bucket name.

Step 7: Access Your Vue App

Now, open your S3 website URL or CloudFront URL, and your Vue app should be live!

Deploying a Vue.js app on AWS using S3 and CloudFront is a great way to ensure scalability and performance. With AWS’s powerful infrastructure, your app will be accessible worldwide with minimal downtime.

If you’re looking for expert web development services, check out CodeHunger for professional assistance.