Building Serverless Microservice Architecture With AWS

Serverless is a cloud-native development model that allows developers to build and run applications without having to manage servers.

Serverless architectures are getting popular day by day. Today I am going to explain how to serve and deploy any frontend application by using AWS services.

Let’s imagine you need a chatbot or survey that needs to be shown on your website. This module will be implemented on your website as a third party. In addition to this it will be totally independent from your website as a microservice.

Different code repository, independent deployment according to microservice rules, and you don’t need to worry about server costs. This is cheaper than you thought.

Using multiple repository setup helps in several ways:

• Clear ownership: Having a separate repository for a particular service is a definite microservice way of doing things because the team which owns that service is clearly responsible for independently developing and deploying the full stack of that microservice.
• Smaller code base: Separate repositories for a service leads to smaller code base and lower complexity during code merge.
• Narrow clones: While doing DevOps and automated build and releases, smaller code base leads to considerably lesser code download/clone time, that leads to faster build and deployments.

Let’s get started to build an application by vue.js and configure the deployment using CodePipeline.

Workflow:

- Build an Vue.js application

- Create a bundle under dist/folder

- Create a s3 bucket to store bundled Vue.js application

- Create a CodePipeline under Code Build in AWS

Step #1: Install npm and vue by running:

$ apt install npm $ npm install -g @vue/cli

Step #2: Add your project files on the server (ex. from GitHub using clone command) in this tutorial let’s use a very simple vue app example and save the app in (ex. /var/www/vueapp):

$ cd /var/www/ $ vue create vueapp $ cd vueapp

Step #3: Run the server by run: $ npm run serve

Output:

App running at:

- Local: http://localhost:8080/

- Network: unavailable

Note that the development build is not optimized.

To create a production build, run npm run build.

Navigate to xxx.xxx.xxx:8080 url (where xxx.xxx.xxx is server ip)

Great! We have installed our basic Vue.js application and have seen it on the browser by going http://localhost:8080/ url.

Now let’s create the bundle.

Step #4:

If you check the package.json you will see the helper commands under the script area. Before building a bundle let’s touch some Vue.js settings in order to receive a single bundled file.

Create a vue.config.js file in your project and set the settings below

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    publicPath: 'https://skeleton-design-bundle.yourdomain.com/',
    runtimeCompiler: true,
    devServer: {
        compress: true,
        disableHostCheck: true,
        port: 4000,
        public: '0.0.0.0:4000',
    },
    configureWebpack: {
        optimization: {
            splitChunks: false,
        },
        output: {
            filename: 'skeleton.js',
        },
    },
    css: {
        extract: false,
    },
}

After running the command check the dist folder you should have a file named skeleton.js this a static file that contains all your application.

$ npm run build

Step #5:

Now let’s go to the AWS console and create a s3 bucket to store and serve our Vue.js project.

Bucket is ready and public. Let’s upload the bundled file (skeleton.js) to our bucket on each deployment.

Step #5:

Create a pipeline under Code Build in the AWS console. Workflow will be like, whenever a commit comes to our master or main (or any other) branch, trigger the workflow which will create a new bundled file and upload it to the s3 bucket.

Set the “Pipeline name”.

If you can see the further steps pipeline needs a logic, when it will be triggered and what are the actions that pipeline has to do.

Select the source. In my case github is the code hosting platform. After selecting Source Provider then you need to click “Connect To Github”. After that you need to select the repository and the branch name as a committed listener.

Source part is done. Let’s go to the Build Stage.

Here, in the environment part, I created an Environment Variable to define my s3 bucket name. We will use this variable in our code base. Build part is completed, you can skip the Deploy part. Let’s preview.

One last thing is left to complete the deployment. We need to create buildspec.yml file in our project to define build commands.

In this file basically install the dependencies, take a build bundle and upload to s3. $S3_BUCKET is my variable which I defined in the pipeline earlier. Pipeline is done. You just need to push your commit to the listener branch and monitor the pipeline by clicking the details on build stage it will show all the logs step by step.

Thanks for reading !