Introduction
VueJS is one of a famous and widely used JavaScript
framework which is growing with immense pace since its release. Setting up your Vue
application locally is an easy task but when it comes to deployment, developers often find it a bit tricky to handle. Here we’ve formulated a detailed configuration-first approach for deploying your Vue
application on any Ubuntu Server with ease. You just need to follow along.
Step # 01 - Setting up
sudo apt update
sudo apt upgrade
Step # 02 - Setup NGINX
sudo apt install nginx
Step # 03 - Configure Virtual Host
We need to edit the nginx
configuration file to connect to our app. To edit it open /etc/nginx/sites-available/default
configuration file by running:
sudo nano /etc/nginx/sites/sites-available/default
Edit the file and reconfigure it as per your VueJS
application.
server { listen 3000 default_server; //your desired port listen 192.168.100.65:3000 default_server; //your ip_Address root /var/www/html/vue-js-app-twt/dist; //you VueJS app path index index.html index.htm index.nginx-debian.html; server_name _; error_page 404 /index.html; location /vue-js-app-twt { proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_max_temp_file_size 0; proxy_pass http://192.168.100.65:3000; proxy_redirect off; proxy_read_timeout 240s; } }
Step # 04 - Setup Firewall for NGINX
Also Read: Top Programming Jobs in UK
You can check the applications configurations that ufw
knows by typing in:
sudo ufw app list
In my case, it returns.
In case you wish to add other application permissions to talk through ufw
, you may allow like
sudo ufw allow 'Nginx HTTP'
Step # 05 - Checking NGINX Service
systemctl status nginx
You may also verify if the configurations you've made is fine by typing in the following command
nginx -t
Now the Nginx
is running on your assigned IP
address or domain in your browser with default nginx
page.
Finally reload the actual NGINX
configuration to take effect.
sudo nginx -s reload
This will reload and apply the new configurations. Now you can visit http://your-ip-address:3000/
to access the VueJS
Application.
Step # 06 - Setup VueJS App
The most important step remains is to put together the Vue files in /var/www/html/vue-js-app-twt
cd /var/www/html/
Git clone [email protected]:usamamuneerchaudhary/vue-js-app-twt.git
cd into vue-js-app-twt
npm install
npm run build
Finally
You may access your VueJS application by typing in http://your-ip-address:3000/
in your browser and it will work just like magic.
If you have any questions or feedback related to this blog, let us know in the comment section below.
Do follow us on Twitter.