How to publish a Vue SSR blog site without dollars on bills

Introduction

How many dollars do you spend on hosting websites?
If you use an AWS EC2 server, it could be more than $10, which means you have to pay$120 per year. Don’t you think this is expensive?
Today, I will introduce how to reduce monthly fee to less than $1.
First of all, please look around my website. I made this website with Vue SSR and its server with Express.JS.
Although I use multiple AWS services to make this site, main services are AWS Lambda and S3. Lambda is to make a server and S3 is to store server side rendered files of Vue.JS. Let’s look at how much cost is reduced. Below is a table to show cost of each AWS service.

While more than $10 is needed to just run EC2 server(t2.micro), with lambda and S3, I only need to pay what I use. Moreover, thanks to Free tier, I even do not have to pay anything until I become so popular that more than 1M requests comes in a month.

How to achieve

So, let’s make demo project to do this.

Repository of demo project

Before running program, you need to install aws-cli by following instruction here. After that, run this program.

npm install
npm run server config -- --account-id="<accountId>" --bucket-name="<bucketName>" [--region="<region>" --function-name="<functionName>"]
npm run web build-deploy
npm server setup

Then, you can find url of this site on CloudFormation like this:

For Client-side

I just make demo project using vue-cli like following

mkdir test-vue-ssr
vue create web

And install additional packages

cd web
npm i webpack@4 webpack-cli@3 webpack-merge
npm i vue vue-server-renderer vue-loader
npm i mini-css-extract-plugin terser-webpack-plugin@4 optimize-css-assets-webpack-plugin
npm i file-loader ts-loader
npm i css-loader sass-loader@10 fibers sass

The reason why I specify version of webpack is because error occurs when using webpack 5. Next, modify scripts option in package.json.

"scripts": {
    "serve": "vue-cli-service serve",
    "build:dev": "webpack --mode=development --config=./build/webpack.client.config.js&&webpack --mode=development --config=./build/webpack.server.config.js",
    "build:prod": "webpack -p --config=./build/webpack.client.config.js&&webpack -p --config=./build/webpack.server.config.js",
    "lint": "vue-cli-service lint",
    "build-deploy": "npm run build:prod &&aws s3 sync ./web/  s3://test-vue-ssr/ --exclude \"*\" --include \"dist/*\" --include \"public/*\""
  }

Add some files, app.ts, entry-client.ts , and entry-server.ts in src/. And edit router/index.ts. While most part of the code below is shown in https://ssr.vuejs.org/ , I enable webpack to minify output files.

For Server-side

For server-side, I copy codes from this project and edit app.js s3/s3.js to server side rendering and cloudformation.yml to add a permission of reading S3 Object to Lambda.

Conslusion

Now, you can host Vue.JS site without dollars although you may need additional fees if you want original domain. Next, I want to talk about how to automate deploying processes.