DEV Community

loading...

Deploying React/Vue on a Virtual Machine

dev117uday profile image Uday Yadav ・3 min read

Alt Text

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Create a new nginx.conf in the /etc/nginx directory by running
sudo nano /etc/nginx/nginx.conf
Enter fullscreen mode Exit fullscreen mode
  • 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 { }
Enter fullscreen mode Exit fullscreen mode

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

Then run

sudo nginx -s reload
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Go through all the steps

Keys are located at :

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

Enter fullscreen mode Exit fullscreen mode

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 { }
Enter fullscreen mode Exit fullscreen mode

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

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

Discussion (0)

pic
Editor guide