Automate Vue.js Deployment On AWS

A step-by-step Guide With an example project

https://awstip.com

I’m sure we all have different deployment processes, but at the end of the day, the point we want to come to is that these deployments can happen automatically.

In this article, I will explain how to automatically deploy your Vue.js project on AWS.

First, we will create a new build project on AWS CodeBuild.

Then we will trigger the CodeBuild project that we created on AWS CodePipeline and complete the deployment.

Let’s go through this process step by step together.

• Example Project
• AWS S3
• AWS CodeBuild
• AWS Codepipeline
• Conclusion

1. Example Project

First, let’s create a Vue.js project and push it into a repository we created in Github.

Create Vue.js Project

We created our project and pushed it to the repository we opened in Github.

GitHub Repository

Now that we have created our project, we can start our work on the AWS side.

2. AWS S3

The place where we will keep the Vue.js project that we built on the AWS side will be a bucket we created in S3.

We can easily create a new bucket via the AWS Console.
https://s3.console.aws.amazon.com/s3/bucket/create

AWS S3 Create Bucket

From here, we can create a bucket by selecting the Region we want.

3. AWS CodeBuild

In order to build our Vue.js project, we need to create a new CodeBuild project.

https://eu-west-1.console.aws.amazon.com/codesuite/codebuild/project/new

You can create a CodeBuild project easily from the above URL.

a. Project configuration

In this section, we define the name of our project.

AWS Create Build Project — Project Configuration

b. Source

From the source section, we choose Github because our project is in GitHub.

If your GitHub account is not defined on the AWS side, don’t worry, it will warn you in this section and guide you for easy integration.

AWS Create Build Project — Source

c. Environment

In this part, we determine in which environment our project will be run and built.

It will be enough to adjust the settings as follows.

AWS Create Build Project — Environment

You only need to create 1 environment variable from the Additional configuration.

S3_BUCKET -> s3://my-example-bucket-for-vue-js

AWS Create Build Project — Environment Variables

I’ll explain below why we added this environment.

d. Buildspec

The setting here should be as follows.

AWS Create Build Project — Buildspec

In this part, we need to create a file named buildspec.yml in the root directory of our project. While CodeBuild is running, it will pull your project from GitHub and upload it to S3 after building it with the commands in buildspec.yml.

You need to add the codes that I have shared below in the buildspec.yml file.

version: 0.2
phases:
  install:
    commands:
      - npm i npm@latest -g
      - pip install --upgrade pip
      - pip install --upgrade awscli
  pre_build:
    commands:
      - echo Pre_build Phase
      - npm install
  build:
    commands:
      - echo Build Phase
      - npm run build
  post_build:
    commands:
      - echo PostBuild Phase
      - aws s3 cp ./dist/ $(echo $S3_BUCKET) --recursive

We are using the environment variable we created above right here. As we understand from the commands, we first run the npm install command to install the dependencies of our project, then we build our project by doing npm run build.

After the build process, Vue.js creates a folder named dist, in this folder the relevant files of our project are created.

Dist folder’s documents

We send these files to the S3 side.

e. Test Project

Now let’s go into the CodeBuild project we created and click on the Start Build button to test whether it works properly.

CodeBuild — Build status

As you can see it worked flawlessly. Now let’s check the S3 side, are the generated files sent properly?

Project Bucket

We can see our files on the S3 side without any problems.

4. AWS CodePipeline

Yes, we actually achieved our goal above and we built our Vue.js project on AWS CodeBuild, sent it to S3, and made it ready for use.
What we need to do now is to automate this process.

I want to start this process automatically when the master branch of our project on GitHub is updated.
This is where AWS CodePipeline comes to our rescue, let’s create a new pipeline.

https://eu-west-1.console.aws.amazon.com/codesuite/codepipeline/pipeline/new

You can create a CodePipeline easily from the above URL.

a. Pipeline Settings
In this section, we named our project and continued with the default settings.

AWS CodePipeline — Pipeline Settings

b. Source
In this part, we choose our project on GitHub and which branch we want to run CodePipeline when it is updated.
I choose the master branch because I want to run the Pipeline when the master branch is updated.

AWS CodePipeline — Source

c. Build Stage
Here, we choose the build stage we want to run when the pipeline is triggered. We need to select the CodeBuild project that we created above.

d. Deploy Stage
We can skip this part because we don’t have a Deploy Stage to add.

After passing this part, let’s create the pipeline by clicking the Create pipeline button.

e. Test
After the pipeline is created, it will run automatically, and if you haven’t made a mistake, CodeBuild will run and be successful.

To test it, let’s push something to the master branch and check if CodePipeline works.

AWS CodePipeline —Pipeline Results

As you can see it works flawlessly.

5. Conclusion

We performed the deployment process of our Vue.js project very simply on AWS.

In my next article, I will tell you how we can serve our Vue.js project from within S3, stay tuned :)

Feel free to reach me on Linkedin, if you have any further questions.

Have a good development :)