Deploying a Static Front-End to AWS

Deploying a Vue static front-end to AWS is a straightforward process that allows you to showcase your VueJS application to anyone on the web. In this blog post, we will guide you through the step-by-step process of deploying your VueJS bundle to an AWS S3 bucket and configuring static hosting settings. Let's get started!

Step 1: Creating an S3 Bucket

To begin, navigate to your AWS console and access the S3 service. Once there, click on 'Create Bucket' to initiate the bucket creation process. Choose a unique name for your bucket, ensuring it is relevant to your project.

Step 2: Configuring Bucket Access

To enable public access and allow anyone on the web to view your site, it is necessary to unblock all public access to the bucket. This ensures that the necessary permissions are set correctly. Create the new bucket after configuring the access settings.

Step 3: Uploading Bundled Files

Select your newly created bucket and click on the 'Upload' button. This action will open a file upload dialog. Proceed to drag and drop all the bundled files from the 'dist' directory that was generated by VueJS during the build process. Confirm the upload of all the files.

Step 4: Enabling Static Hosting

In the bucket's properties, scroll down until you find the static hosting settings. Edit the settings and enable hosting for your Vue static front-end. Additionally, set the index document to 'index.html', which serves as the entry point for your application.

Step 5: Configuring Bucket Permissions

Navigate to the bucket's permissions (not properties) and edit the bucket policy to include the provided JSON code. This policy grants the necessary permissions for public read access to objects within the bucket. Make sure to replace 'Bucket-Name' in the code with the actual name of your bucket.

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

Step 6: Testing the Deployment

After completing all the previous steps, you will find an endpoint URL for your deployed Vue static front-end. To access it, go to your bucket properties and scroll down until you see the endpoint. Click on it to test your deployment and ensure that everything is working correctly.

Deploying a Vue static front-end to AWS using an S3 bucket is a convenient way to make your application accessible to users on the web. By following the steps outlined in this blog post, you can easily configure the necessary settings and policies to ensure your VueJS application is deployed and hosted properly. Enjoy showcasing your Vue project to the world!