When we need a live (development, staging, production, etc.) environment for our Vue.js project, we have to set up a server where we will deploy our app. This article will walk you through this process.
Thanks to Nginx, for a Vue.js project, the process is not so hard. First, we will set up the server on the Ubuntu operating system.
Preparing the Server
First of all, we should log in to the server
ssh username@ipAdresss
Then we should update apt package addresses.
sudo apt update
Then install the Node
curl https://deb.nodesource.com/setup_16.x | sudo bash sudo apt install nodejs
Preparing the Vue.js Project
We should create an “apps” directory in the “home” directory and clone our project from the remote repository.
cd ~ mkdir apps cd apps git clone https://github.com/my-app.git
Go to the project directory, install the relevant packages for the application and build it.
cd {project_folder} npm install npm run build
If the process goes successfully, the “dist” directory should be created in the root directory. We will use the “dist” directory later in the Nginx configuration.
Installing and Configuring Nginx
Installation
sudo apt install nginx
To make sure nginx works, we should execute the following command:
service nginx status.
Configuration
Go to the following directory:
cd /etc/nginx/sites-enabled
You will see the default configuration; you can see the insight and then delete
sudo rm -rf default
Now let’s create a new file for our project with any editor of your choice.
sudo vi my-app.ge
And write the following configuration.
server { listen 80; # change example.com with your domain name server_name example.com; charset utf-8; # change {{app_root}} with your application path root {{app_root}}/dist; index index.html index.htm; # Always serve index.html for any request location / { # change {{app_root}} with your application path 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; }
Save the file:
:wq
Check the configuration syntax
sudo nginx -t
Restart the server
sudo systemctl restart nginx
Now, if we visit our website at http://example.com, we can see our application. But if we want to consider our work done, there is still one little thing left – moving our project to the HTTPS protocol.
Setting up an SSL certificate using LetsEcrypt.
To set up an SSL certificate on our website, we will be using LetsEncrypt.
We will need to install several packages on the server to do that.
First, let’s install Certbot:
sudo apt install certbot python3-certbot-nginx
Then we should execute the following command:
sudo certbot
And follow the Certbot instructions. Once you go through all of them, you will already have set up an SSL certificate for your Vue.js app and can access your website over HTTPS.
Summary
To sum up, the process of setting up a server and an SSL certificate to build and deploy your Vue.js app on a live environment is the following:
- Installing the relevant packages on a server
- Cloning the project and running the build process
- Configuring Nginx
- Setting up an SSL certificate using LetsEncrypt