DEV Community

Cover image for Continuous deployment of Vue.js app to AWS using Bitbucket Pipelines
Pavan Vora
Pavan Vora

Posted on • Edited on

Continuous deployment of Vue.js app to AWS using Bitbucket Pipelines

Hello guys, I recently created a Bitbucket Pipelines to deploy my Vue.js app on Amazon S3 and today in this article I would like to share the step-by-step process. Before starting I assume that you already have up and running vuejs app on bitbucket and also AWS account.

What are the steps?

  1. Create and configure Amazon S3 Bucket.
  2. Create IAM user in AWS console that can access the S3 bucket from Bitbucket.
  3. Configure Bitbucket to use Pipelines.
  4. Add bitbucket-pipelines.yml file in our project.
  5. Push code to Bitbucket, and check the live vue app.

Step 1: Create and configure Amazon S3 Bucket

Click here to sign in to your AWS Console. After signing in to your aws console click on Services present in the header, look for S3 service in storage section and click on it.

After redirecting to S3 page click on Create Bucket button. In the Name and region page type name for your bucket and choose the region where you want your bucket to reside then click on the next button. On the Configure options page no need to make any changes, keep it as it is and click on next button. Now in the Set permissions page we need to make some changes as in below image to make files available publicly.

You can see that amazon recommended to tick the options in Manage public access control lists (ACLs) section but that is only if you want to store private data on this bucket. So to create publicly accessible bucket we'll ignore that recommendation and deselect the two options as given in above image after that you can click on next button, Review the S3 bucket and click on Create Bucket.

It will take a few seconds to create a bucket after that you can see the bucket in the list of buckets. Click on your bucket name that you just created and you will see something as below.

Now as our Bucket is created we need to enable the static site hosting for this Bucket. And to do that you can go to Properties tab. Click on Static website hosting, and then choose Use this bucket to host a website. You will be prompted to give index document ( home or default page for website ) enter index.html and before clicking on save you can note down the Endpoint URL where your website will be live in step 5.

Now we have amazon S3 bucket ready with Static website hosting, So let's move on to the next step.

Step 2: Create IAM user in AWS console

In this step we'll create the IAM user which will give us two keys 1. Access key ID and 2. Secret access key. This keys will be used by our bitbucket account to upload the repository code to amazon S3 bucket. To go on IAM service page navigate to Services > Security, Identity, & Compliance > IAM or you can follow the below image.

After moving to the IAM service page in the navigation pane, choose Users and then choose Add user.

Type the user name for new user and choose Programmatic access in Access type then click on next: Permissions button down below. We are creating this user to access the S3 bucket from Bitbucket so I gave the user name as s3-full-access you can use any name you want.

On the Set permissions page there are three options, select Attach existing policies directly and you will see the list of available policies. In the search field type s3full and select the policy with name AmazonS3FullAccess then click on Next: Tags button.

On Add tags page you can add tags by entering the key-value pairs that will be added to user as metadata. But it is optional so you can go ahead and click on Next: Review button. Review your user details and click on Create user button. Now as mentioned before you will get two keys 1. Access key ID and 2. Secret access key for the created user. This keys are very important for our app deployment, Copy/Paste both the keys somewhere safe on your PC.

Don't try copying my secret keys from image, because it won't be valid at the time you will be reading this article 😬

Now as our user is created successfully we'll move to next step.

Step 3: Configure Bitbucket to use Pipelines

Log in to your Bitbucket account and move to your project repository then follow the below image to enable the pipelines for the repository.

After enabling Pipelines, In the repository Settings choose Repository variables from navigation panel. In the Name field write AWS_ACCESS_KEY_ID and in the value paste the value of Access key ID that you copied in last step and click on Add button, again follow the same for secret access key by giving name as AWS_SECRET_ACCESS_KEY. After that you should see something like below image.

This added Repository variables will be used in bitbucket-pipelines.yml file in the next step.

Step 4: Add bitbucket-pipelines.yml file to project

Go to your projects root directory and create a new file with name bitbucket-pipelines.yml. After that copy paste the below code to the bitbucket-pipelines.yml file.

Now you need to make some edit in above file to make it work and for that you need to update the value for AWS_DEFAULT_REGION and S3_BUCKET, these values can be found in your S3 bucket page. In below image I have marked where you can find those values, copy/paste these values into the above file. Log in to your aws account and moved to S3 bucket that you created in step 1.

Step 5: Push code to Bitbucket, and check the live running app

Finally we're in the last step. Commit your bitbucket-pipelines.yml file and push it to the master branch. After pushing your code to master branch move to Pipelines page and look for your pipeline status it will be In progress after it changes to Successful you can go and check your live vuejs app up and running on aws S3.

If you don't know the site URL you can check the step 1 where I have mentioned where you can find the URL Endpoint for your S3 bucket.

Conclusion

In this article we created S3 bucket and IAM user on AWS and successfully setup bitbucket pipelines for continuous deployment of vuejs app to Amazon S3.

Top comments (10)

Collapse
 
dafplink profile image
dafp-link

Thank you, thank you thank you Pavan for a fantastic tutorial. Straightforward, accurate and up-to-date. I think this is the very first time that I follow a tutorial which gives me a flawless outcome, as this time I had no need to look up weird/unexpected errors on Google to sort out anything, and I didn't need any other tutorials on Bitbucket pipelines to complement anything missing from yours. Keep up the good work!

Collapse
 
pavanvora profile image
Pavan Vora

You're welcome @dafplink . I'm happy that you found it very useful. Thank you for appreciation and Happy Coding :)

Collapse
 
luisjuarros profile image
Luis • Edited

This is a very nice solution that will save you a lot of money, but if your vue app use a backend, there is no way to set up the backend url in a environment variable, you must hardcoded it in the source code. This is the only pain I found using S3 to host js web apps.

Collapse
 
pavanvora profile image
Pavan Vora

Thanks for reply @juarrosluis . I think by using S3 also you can set the environment variables same way as we can set in our vue app by using .env files. Here's the link to the documentation if you want to have a look. If you have any doubt feel free to reply. :)

Collapse
 
shypixel profile image
shypixel

Thank you so much for this incredibly helpful article. I managed the integration yet got the error fromthe BitBucket front at the last step (updating the pipeline status right after commiting the "bitbucket-pipelines.yml"):

ERROR Error: Cannot find module 'vue-loader-v16/package.json'
I looked up for this, and it could be related to the Vue CLi version (stackoverflow.com/questions/635045...) but there is no way I can config the Vue CLI tool @ BitBucket, right?

Any advice is appreciated!

Collapse
 
pavanvora profile image
Pavan Vora

Thank you shypixel. Are you able to make build from your local machine?

Collapse
 
carlospxndx94 profile image
CarlosPxndx94

Thank you very much, just what I needed, keep it up.

Collapse
 
pavanvora profile image
Pavan Vora

You're welcome. I'm glad that it helped you.✌️

Collapse
 
cjustinobi profile image
Justin

What if I want to use AWS EC2, is it the same process to get it running?

Collapse
 
pavanvora profile image
Pavan Vora

No Justin you can not use the same process. For auto deployment to EC2 you can check AWS Code Deploy Service.
some resource that might be helpful

  1. support.atlassian.com/bitbucket-cl...
  2. docs.aws.amazon.com/codedeploy/lat...

@cejowisz Any specific reason to go with EC2?