Making The Most Of VS Code With Code SnippetsAugust 29, 2022
Adding Animation To Your Application The Angular WaySeptember 19, 2022
We’ve made changes on the staging branch, please redeploy it.
You’ve been SSHing into Linux terminals for a little while now, and you’re getting more responsibility. The latest ‘just quickly do this on the staging box’ request has come in, and it is again your time to shine. Your team uses NGiNX for their web servers, and the front-end application your team has been working on was written using VueJS. Let’s learn how to figure out what needs to be done where, and then do it.
First things first, we know we’re using NGiNX, so we’ll see what sites we have available that are being served using NGiNX. NGiNX saves the server configurations for sites in the
/etc/nginx/sites-available folder on your file system. By using the
ls command we can see which sites have config files available for them.
ls -la /etc/nginx/sites-available returns a result called
yoursite.yourcompany.com. It is safe to assume this is the configuration for serving your site on the staging server.
cat the contents of that config you will see a line that says something along the lines of
root /home/user/sitename/dist inside one of the server blocks. The root keyword is telling NGiNX where the files that the webserver needs to serve are located. By changing directory and going to that location on our filesystem we can learn a little more.
cd /home/user/sitename will take us into the folder containing the dist that is being served using NGiNX.
If we list the contents of this directory (
ls -la) and we see that the directory contains a
.git hidden folder we know that the site can be rebuilt on the correct branch directly from this location.
git pull followed by a
git checkout staging will pull all the code changes and move our HEAD to the correct branch. When we’re on the correct branch we can rebuild the
dist folder to serve our latest changes. We need to first install any new packages included in the commit
npm i. Once the packages have been installed, we can build the new
dist, by default for VueJS this is
npm run build.
After the build process is complete, we can check that the
dist was altered by looking at the details of files and folders in our current directory and seeing that the dates are changes on the
dist folder. To finish off the deploy process we will have to restart the NGiNX service. You will likely need a password to run the command using
sudo. First, we can check that our NGiNX configs are still fine by running
nginx -t. Once we have done that running
sudo service nginx restart will restart the webserver and serve the new
dist we have created. We can refresh our staging website page on the internet and look for the changes that were made.
What do we do if we are given the new
dist folder, and we don’t have to build it ourselves? In the terminal on our own computer, we can copy the new
dist across using the
scp command, or we could use something like Filezilla or Win SCP to get the new dist into the remote machine in the directory we need it. Once there we will just have to run the
sudo service nginx restart command to complete our task.