Deploying React/Vue on a Virtual Machine

kubernetes would be too overkill

In March, i tried learning nginx, a load balancer, reverse proxy and much more. At the same time, i was looking into buying a domain for my portfolio site. Now trying to apply this new super power that i got, i tried to deploy it my static resume site on a virtual machine. How i did it, continue reading the article ...

Step 1 : Dockerize your site

I use vite-vue to make my portfolio site. Why you may ask, because i can break down different sections into components and also easier for me to update information. the final build is compact and no one can copy it easily (i am not a celebrity nor a distinguished software engineer).

This is my config file : Dockerfile. This would work with react, vue, angular or any framework (hope it works for others)

FROM node:15.12.0-alpine3.10 as build-stage
WORKDIR /app
COPY . ./
RUN yarn install && yarn run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

• If you are solving this article, please the check the version of docker base image here.
• Also look at the final build folder your framework generates, for vue its /dist, else nothing will work

Create another file named .dockerignore

**/node_modules
**/dist

again look at /dist

Create a file named : nginx.conf file in your project directory, not is your VM's /etc/nginx

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
  worker_connections  1024;
}
http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  access_log  /var/log/nginx/access.log  main;
  sendfile        on;
  keepalive_timeout  65;
  server {
    listen       80;
    server_name  localhost;
    location / {
      root   /app;
      index  index.html;
      try_files $uri $uri/ /index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   /usr/share/nginx/html;
    }
  }
}

Save and commit changes

Create a virtual Machine

Now this is the part where i suppose you have a VM and have a bit of knowledge about it

• If you are using AWS EC2, then create a new security group giving access to everyone on port 80
• If you are using Digital Ocean or similar service, then i hope it is done for you

After creating a VM, install the following

sudo apt-get install nginx nano letsencrypt

• nano for editor, you may also need git.

Then run : nginx -s reload and goto the external IP of your VM using browser, you will see nginx's welcome page, if you dont, try restarting the VM or wait for 5 mins else there is some networking problem.

All done till here, great

Then install docker

curl -fsSL https://get.docker.com -o get-docker.sh
sudo sh get-docker.sh

Building docker container

• Clone the repo in your VM
• cd into it
• Run

sudo docker build . -t resume
sudo docker run -d -p 8080:80 resume

Making it online

If you dont have your own domain name yet, keep reading else skip to next part

• As admin, delete the default nginx.conf file in the /etc/nginx folder

sudo rm -f /etc/nginx/nginx.conf

• Create a new nginx.conf in the /etc/nginx directory by running

sudo nano /etc/nginx/nginx.conf

• You have to a super user in order to use this file
• Paste the following content

http {
  server {
    listen 80;
    location / {
      proxy_pass http://127.0.0.1:8080/;
    }
  }
}

events { }

Save your file, by pressing ctrl+o, confirming it and exit by pressing ctrl+x

Then run

sudo nginx -s reload

You goto the external IP of your VM, you will see your site

If you have your own domain

Run the following to generate temp certificate

sudo certbot certonly --standalone

Go through all the steps

Keys are located at :

/etc/letsencrypt/live/[ dns ]/fullchain.pem
/etc/letsencrypt/live/[ dns ]/privkey.pem

open the nginx.conf in /etc/nginx folder and replace the content with {dns without http and www}

http {
    server {
        listen 80;
        listen 443 ssl http2;
        ssl_certificate /etc/letsencrypt/live/{dns without http and www}/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/{dns without http and www}/privkey.pem;
        ssl_protocols TLSv1.3;
        location / {
          proxy_pass http://127.0.0.1:8080/;
        }
    }

}

events { }

Run sudo nginx -s reload and wait and check the domain

Hope you like, if you find any problem, error, please comment below