Introduction

Vue.js is an open-source JavaScript framework for building user interfaces. It is known for its simplicity, flexibility, and performance, making it a popular choice for developing dynamic and interactive web applications.

Deploying a Vue.js website can be done in several ways, such as using a traditional web server or a cloud-based hosting platform. One popular option is Amazon Web Services (AWS) Simple Storage Service (S3), a highly scalable and low-cost cloud storage service.

By deploying your Vue.js website to AWS S3, you can take advantage of the scalability, reliability, and cost-effectiveness of the AWS cloud. S3 also makes it easy to serve static websites, which can simplify your deployment process and reduce the complexity of your infrastructure.

In this blog post, we will go over the steps involved in deploying a Vue.js website to AWS S3. Whether you are new to Vue.js or an experienced developer, this post will provide you with the knowledge and resources you need to get started.

Prerequisites

Before you can deploy a Vue.js website to AWS S3, you will need to have the following:

  1. AWS account: You will need to sign up for an AWS account in order to use the AWS S3 service. If you don’t already have an AWS account, you can create one for free.
  2. Knowledge of S3: To deploy a website to S3, you should have a basic understanding of how S3 works, including how to create and configure an S3 bucket and upload files to it.
  3. Familiarity with the Vue.js framework: You should have a basic understanding of the Vue.js framework and be able to create a new Vue.js project, build and run it locally.
  4. Tools: You will need to have the following tools installed on your computer: Node.js, npm, and the Vue CLI.

In this blog post, we will be using the Vue CLI to create a new Vue.js project and build the website, so it’s important to have it installed. If you need help installing these tools, you can find tutorials and documentation online.

Setting up an S3 bucket

In this section, you will learn how to create an S3 bucket and configure it to host a static website. Here are the steps you need to follow:

  1. Log in to your AWS account and go to the S3 dashboard.
  2. Click the “Create bucket” button.
  3. Enter a unique name for your bucket, select a region, and click the “Create” button.
  4. Go to the “Properties” section of the S3 bucket and click on the “Static website hosting” option.
  5. Select the “Use this bucket to host a website” option and enter the name of the index document (usually “index.html”) and the error document (if desired).
  6. Click the “Save” button to save the changes.
  7. In the “Permissions” section, click on the “Bucket Policy” option.
  8. Add a bucket policy that allows public access to the contents of the bucket, as follows:
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
        }
    ]
}

Replace “<BUCKET_NAME>” with the name of your S3 bucket.

  1. Save the changes to the bucket policy.

With these steps, you should have successfully set up an S3 bucket for hosting a static website. You can now proceed to build and deploy your Vue.js website to the bucket.

Building the Vue.js website

In this section, you will build the Vue.js website that you will be deploying to AWS S3. You will use the Vue CLI to create a new project and build the website for production.

Here are the steps you need to follow:

  1. Open a terminal and navigate to the directory where you want to create the Vue.js project.
  2. Use the following command to create a new project using the Vue CLI:
vue create my-project
  1. Navigate to the newly created project directory:
cd my-project
  1. Run the following command to build the website for production:
npm run build
  1. The above command will generate a “dist” directory that contains the optimized and minified version of your website. This is the content that you will be uploading to the S3 bucket.

With these steps, you should have successfully built the Vue.js website that you will be deploying to AWS S3. Now you can move on to the next section and learn how to upload the website to S3.

Deploying the website to S3

In this section, you will learn how to upload the built Vue.js website to the S3 bucket that you created in the previous section. Here are the steps you need to follow:

  1. Log in to your AWS account and go to the S3 dashboard.
  2. Find the S3 bucket where you want to deploy the website and click on it.
  3. Click the “Upload” button and select the “dist” directory that was generated when you built the website.
  4. Click the “Start upload” button to upload the contents of the “dist” directory to the S3 bucket.
  5. After the upload is complete, go to the “Properties” section of the S3 bucket and click on the “Static website hosting” option.
  6. Take note of the endpoint URL that is displayed on the page, as this is the URL that you will use to access your website.
  7. Open a web browser and enter the endpoint URL in the address bar. You should now see your Vue.js website hosted on AWS S3.

With these steps, you should have successfully deployed your Vue.js website to AWS S3. Congratulations! You can now share the URL with others and enjoy the benefits of hosting your website on the cloud.

You can go one step further and automatize this process with GitHub actions. This is an example of a it:

#.github/workflows/build.yaml

name: Vue Build and Deploy to S3

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    name: Build and Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
          
      - name: Install dependencies
        run: npm install
      
      - name: Build
        run: npm run build
    
      - uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env:
          AWS_S3_BUCKET: your-website-url.com
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: eu-central-1
          SOURCE_DIR: 'dist'

Configuring a custom domain

In this section, you will learn how to configure a custom domain for your Vue.js website that is hosted on AWS S3. Here are the steps you need to follow:

  1. Log in to your AWS account and go to the Route 53 dashboard.
  2. Click the “Create Hosted Zone” button.
  3. Enter the domain name that you want to use for your website and click the “Create” button.
  4. In the new hosted zone, click on the “Create Record Set” button.
  5. Create an A record that points to the S3 bucket endpoint that you noted in the previous section.
  6. Create an alias record for the S3 bucket endpoint if desired.
  7. Save the changes to the record set.
  8. Go to the domain registrar where you purchased your domain name and configure the nameservers to match the nameservers of the Route 53 hosted zone.

With these steps, you should have successfully configured a custom domain for your Vue.js website that is hosted on AWS S3. You can now access your website using the custom domain instead of the S3 endpoint URL.

Conclusion

In this tutorial, we have explored the steps necessary to deploy a Vue.js website to AWS S3. From setting up an S3 bucket to configuring a custom domain, we have covered all the essential steps for hosting a Vue.js website on AWS S3.

AWS S3 provides a scalable and reliable platform for hosting static websites, making it an excellent choice for hosting your Vue.js website. By using AWS S3, you can ensure that your website is available and accessible to your users at all times, regardless of the amount of traffic that your website receives.

Furthermore, by configuring a custom domain, you can give your website a more professional look and feel, and make it easier for your users to remember the URL. This can help increase the credibility of your website and improve the user experience.

In conclusion, by following the steps outlined in this tutorial, you should be able to successfully deploy your Vue.js website to AWS S3 and enjoy the benefits of hosting your website on the cloud. We hope that this tutorial has provided you with the knowledge and resources necessary to deploy your Vue.js website with confidence. If you have any questions or comments, please feel free to reach out in the comments section below.

Additional resources