Skip to main content

How to deploy a VueJS App using Nginx on Ubuntu

There are thousands of blogs and websites out there explaining how to do a hello world and how to start with VueJS, but in this
little post, I’m just going to be explaining how to do deploy a VueJs app after you have run the command through the
CLI npm run build.
So when you run the command npm run build a dist folder is created and that folder’s got the
essential .js files to run our app, when we want to run our app on an Nginx server by default the vue-router is not going to work well
so that Nginx does not come ready to work by default with a VueJs app


This is basically for a Linux Ubuntu distribution if you’ve got any other Linux distribution just pay attention where is going to be
set the www/html folder and the Nginx settings so that this is useful for any Linux distribution 


Install and configure nginx


sudo apt install nginx
Double check to make sure the nginx service is running with command service nginx status, then open your browser and
enter url http://{server_ip}, you should see some welcome message from nginx. “replace server_ip by your ser ver ip address”
Configure nginx

sudo touch /etc/nginx/sites-available/vue_project
sudo ln -s /etc/nginx/sites-available/vue_project /etc/nginx/sites-enabled/vue_project
sudo vim /etc/nginx/sites-available/vue_project
Sample configuration:

server {
  listen      80;
  server_name
example.com;
  charset utf-8;
  root    {{app_root}}/dist;
  index   index.html index.htm;
  # Always serve index.html for any request
  location / {
      root {{app_root}}/dist;
      try_files $uri /index.html;
  }
  error_log  /var/log/nginx/vue-app-error.log;
  access_log /var/log/nginx/vue-app-access.log;
}

What I mean with this {{app_root}}/dist, is that you must replace what is inside {{}} and set the path where you’ve got your application, copy an paste the piece of code but replace what is inside of the {{}} with your path, in my case I just created a folder in /var/www/html/vuejs, and inside that folder I unzipped the vue folder app which I downloaded from GitHub and run npm run build, I did it with GitHub but you can  upload to the server the files too with SCP or with any
other tools, it is up to you, if you do not have Nodejs and Npm on your Linux server just click on
this https://tecadmin.net/install-latest-nodejs-npm-on-ubuntu/ where you are going to be guided
step by step to set up a proper Nodejs and Npm for you.
Check configuration, then restart nginx:

sudo nginx -t
sudo service nginx restart

Now, you should have your application up and running

Comments

  1. Very informative - How to deploy a VueJS App using Nginx on Ubuntu (will try this...)

    Keep posting..

    VueJS Development Company

    VueJS Development Services

    ReplyDelete

Post a Comment

Popular posts from this blog

How to do pagination SpringBoot with Jbctemplate, MySQL

We are going to be working on a topic which is a basic need when doing any app, and it is Pagination. let's get started creating a product table at https://mockaroo.com/ create table products ( id INT, name VARCHAR(50), code VARCHAR(50) ); insert into products (id, name, code) values (1, 'Hettinger-Goyette', '42549-680'); insert into products (id, name, code) values (2, 'Konopelski-Klein', '49527-724'); insert into products (id, name, code) values (3, 'Smitham, Kuhlman and Balistreri', '53238-003'); insert into products (id, name, code) values (4, 'Hettinger, Weissnat and Goodwin', '0143-9916'); insert into products (id, name, code) values (5, 'Rowe Inc', '42291-898'); insert into products (id, name, code) values (6, 'Ernser-Hauck', '10544-617'); insert into products (id, name, code) values (7, 'Maggio and Sons', '68788-9087'); insert into products (id, name,

How to secure SpringBoot with SSL and Tomcat or Undertow

when we are going to take our applications to production mode, we must have an SSL certificate for the FrontEnd and   BackEnd too, in this case, our backend is a  SpringBoot which is using a tomcat embedded server. Terminology TLS vs SSL TLS is the successor to SSL. It is a protocol that ensures privacy between communicating applications. Unless otherwise stated, in this document consider TLS and SSL as interchangable. Certificate (cert) The public half of a public/private key pair with some additional metadata about who issued it etc. It may be freely given to anyone. Private Key A private key can verify that its corresponding certificate/public key was used to encrypt data. It is never given out publicly. Certificate Authority (CA) A company that issues digital certificates. For SSL/TLS certificates, there are a small number of providers (e.g. Symantec/Versign/Thawte, Comodo, GoDaddy, LetsEncrypt) whose certificates are included by most browsers and Operating System