“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Efficiency is a key word in our daily development. In today’s mainstream front-end development, we will develop the front-end code through packaging tools, build a compiled package to deploy to our server. Of course, the division of labor in different companies is very clear, and the deployment project is naturally completed by the corresponding operation and maintenance students. However, for some individual developers or front-end organizations of small companies, the former end may often be manually packaged and deployed, which brings waste of time. So automated deployment actually frees up both hands to speed up development efficiency.

This article is suit to have basic Linux command deployment knowledge the basis of students and students eat, of course it doesn't matter if it is a small white, pit is step by step, step by step I am self-study, met with too much error and failure to gain valuable experience, and I also only then more than a year of development experience.

What is a SPUG?

Spug is a lightweight agentless automated operation and maintenance platform designed for small and medium-sized enterprises, integrating a series of functions such as host management, host batch execution, host online terminal, online file upload and download, application release and deployment, online task planning, configuration center, monitoring, alarm and so on.

Spug is also an excellent open source project. It has a 7K Star on Github, which is a good open source project. The front-end interface is developed by React, and the back-end code is developed based on Django. If the use of hands-on ability can be completely their own second open source, deployment.

Build spug

The starting point of this article itself is to build it in the fastest and easiest way, so students can follow the steps below step by step to complete the final purpose of our title.

Environment to prepare

Students had better prepare a better server, because we need docker service to build, and we also need certain memory space and disk space in the construction of the project.

Here I’ve chosen a lightweight test server that I don’t usually use to demonstrate. Students who do not have a server can purchase or apply for the first use of cloud service providers such as Ali Cloud, Huawei Cloud, Tencent Cloud, Baidu Cloud, qingyun and so on. For the mirror system, I recommend centos7.6, the stability is very popular, of course, this is not fixed.

SSH tool is also an essential tool in our daily development, he can easily let us connect to our remote server in the local machine. My own development environment is MAC, in MAC ecosystem, there is a more practical and beautiful INTERFACE SSH tool –Termius, while Windows system students I recommend — Xshell, they are very excellent software.

Xshell:

Termius:

Start operation

First we connect to our server through SSH tool (here I use Termius to demonstrate) :

  • ⛔ ️The following installation is mainly based on centos system environment, and code blocks will be repeatedly pasted to facilitate students to copy.
  1. Step 1 in the login command line we first installyum-utilsThe main purpose of this tool is to manage repository and extension packages (mainly for Repository). After the installation is complete, the command line input will appear again and we can proceed to the next command.
yum install -y yum-utils
Copy the code

  1. Step 2 We execute the following command. The command currently executed means to add a Yum repository source, which is our Docker container. Behind thisdocker-ceCommunity free edition community free edition community free editiondocker-eeIt’s an enterprise-oriented version that charges a fee but is more powerful.
yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
Copy the code

  1. Step 3 Continue with the following command, which means to install the latest Docker engine and container
yum install docker-ce docker-ce-cli containerd.io
Copy the code

  1. Step 4 We just need to execute the command to start docker, at this point we have docker installed to our server and running.

#Start the docekr
systemctl start docker

#View the Docker version and verify that docker is successfully installed
docker --version
Copy the code

  1. Step 5 we need to use docker to install our spUG image source.Here, our domestic users can choose the mirror source of Ali Cloud, which is synchronous with docker Hub, just like NPM and CNPM
docker pull registry.aliyuncs.com/openspug/spug
Copy the code

  1. Step 6 Run the spUG image we have downloaded, which we can use on this premisedocker imagesCheck that the image has been pulled down to our server. Once we’re sure it’s there, we can run our Spug. The steps here actually mean and we front-end programmers often install dependencies afteryarn | npm installTo run our program again,yarn dev | start | xxx.

Here run spug this command requires special explain, first run in the background – d mean container ID and print the container. –restart=always means that the specified container is automatically started when Docker restarts. -p 8100:80: port 80 is mapped from port 8100 to port 80 of the container. It is better not to use port 80 of the container as the default, which may lead to the login session permissions of spUG. If you don’t like it, you can go to the server to modify the configuration of docker/ XXXX /nginx.conf. And there are firewall open students remember to open their server console security group to open the corresponding port oh. You can also open it with a command and I’m not going to talk about it here but it’s pretty easy to find.

#View the current local Docker image
docker images

#Run spug
docker run -d --restart=always --name=spug -p 8100:80 -v /spug:/data registry.aliyuncs.com/openspug/spug

#View images that are running
docker ps -a
Copy the code

  1. Now we’re going to go inside the running spUG image,docker exec spugInit_spug creates a default spug user with a password of spug. Dev user admin.
docker exec spug init_spug admin spug.dev
Copy the code

  1. Then let’s restart the SPUG container
#Restart spug
docker restart spug

#Check the status again
docker ps -a
Copy the code

  1. Inside the docekr container, we can install the node environment, because node has NPM, and we can also use NPM to install YARN into it. Install Node in docker container
#View the mirror ID of the SPUG
docker ps -a

#Into the SPUG image
docker exec -it xxx /bin/bash

#Install the node
yum install node

#Installation of yarn
npm install yarn -g
Copy the code

Open the SPUG platform

  • Now we can enter their own server public IP address through the browser address bar to open their own SPUG port, to see whether our SPUG operation and maintenance platform ran up, no alarm, haha 😁 we can see the interface

  • Next, enter the default account password you just generated and enter the main screen to see what the SpUG really looks like

  • Of course, the most important thing is that we should change the default account password first.Go to Administration > Account Management and edit our default account

Set build correlation

First we can set up a group concept, such as production machine, test machine

  • Then join the server we will deploy to run the project in the future(For the sake of this demonstration I'll just use the current server as the deployment machine, and you can try it too.)After filling in the relevant information, click Verify to jump to a window for inputting the server password. After inputting the server password, you can see that our server is added to our platform.

Then we stopped here for a while to prepare for the front-end project we were going to deploy.

Prepare a front-end project

For demonstration reasons, I’ll just use a random front-end project. I’ve chosen to use a svelte + typescript + vite creation project to demonstrate this. Considering that everyone’s server should be domestic, we choose Gitee as our code warehouse in order to facilitate the subsequent automatic construction.

So I’m going to create a new spug-CI-Demo project in my little Gitee. 🤣 I would like to emphasize here, because I may have a great cleanliness for the isolation of code, I usually practice things will be thrown in the small gitee or small Github, and my main account github and Gitee are their own maintenance of the project 😁, so the big guys do not have to look at the account has any project, Just ignore it.

For those of you who have never deployed a front-end project using Nginx or any other Web server, I have prepared a tutorial at the end of this article. Just follow the steps and I won’t go into the tutorial here, otherwise it would be too big. Install nginx in centos7 and deploy the front-end project

A successful manual deployment using Nginx

  • Here we use Termius with its own FTP tool, and Windows students can download and usexftpOr other tools of the same type. Then remember to follow the one at the endNginx articleTo modify the corresponding nginx.conf(figure 3)Configure, then we access the deployed front-end project by accessing the public IP +nginx configured port(figure 4)

Graph one:

Figure 2:

Figure 3:

Figure 4:

Continue to configure our SPUG

  • We went back to the SPUG platform, and we came toConfiguration Center > Environment ManagementLet’s create a new environment, so let’s create a new test environment. (There is only one name here, nothing special).

  • Then create a new application, the form data can be filled in at will, but try to fill in according to the form prompt specification, convenient later can easily recognize. The application is really just a task group for our deployment project.

  • To create a new release for the current application, we choose general release

  • Then we fill in the information from the top down. Here is a focus on the explanationGit repository address sectionDue to permissions and other reasons, our platform may not be able to read the information of the warehouse, so when filling in the code address, we can also fill in the account password on this address. Similar links are as follows:https:// Account: password @gitee.com/coderq-sub/spug-ci-demo.gitAnd if the account is an email address or with @ match must be translated, such [email protected]> is written as XXXX%40qq.com

  • The next step is to start writing the shell commands for each step of our build. I want to emphasize here,File Filtering RulesThis refers to the folder where our build server copied our code, and we can select it herecontainsAnd fill in one in the textarea below/dist“, meaning that only the dist folder will be kept at that time, and everything else will be excluded.Execute before checking out codeAt this point, we are inside the code folder from which the code was cloned, where we can usually add soft links for dependencies, so that we do not need to reinstall dependencies every time we build them, and achieve the purpose of fast build. But because WE don’t want to get too complicated we’ll just write it for nowpwd.Echo "Execute before check out"Two lines of command, the first is to see what the current directory address is, and the second is to print the following string, so that we can easily see the code execution order in the log.The code is checked out and executedHere we can start to actually install the dependencies and package the code asdistFolder, of course we still print the current address and characters for easy judgment, and then we can go to the next step.

  • We come to the final configuration step, which is explained hereDeployment pathIs above our front project on the server path, but there is a more special cases spug will take the initiative to create the folder and take you to fill in the path of the, so because we have to create a good above, we can just fill in the address of a file in the short term, then clean up late.Storage pathThis is where our build is stored, and since spug supports rollback by default, this is where we store a cached build,Version numberIt’s how many versions do we need to cache, so let’s just write one version here, but it’s not fixed depending on what you like.Before the application is releasedHere we can pass through all the files in the dist folder that we just packed\cp -rfForce unasked overwrite to the project folder we are deploying, add here\The reason for this is that some Linux systems have aliases for sensitive commandsaliasHere we add the slash to use the original command.Execute after the application is publishedGeneral can do some clear cache and some unnecessary file and so on command operation, here we also temporarily do not need special operation. When we’re done, we hit Submit

Alias:

  • We choose New Application, which means we manually create a deployment application

  • Fill in our release now, and after a little while, the platform reads our repository information and can select the current branch and the version to deploy to commit. Click OK.(To ensure that the new page is successfully deployed, we need to open the local code to modify some of the page content, and then commit a new commit to deploy the new page.)

  • We then click OK to see a pop-up log build message

GIf dynamic graph:

  • Once we see that the build is successful, we open up our front-end project address again to see if anything has changed. 😁 appears to be a successful new addition to the method shown on the page.

GIf dynamic graph:

Combine webhook to achieve the final goal of automated build

  • Let’s go ahead and open the app Manager and select the app that we created and expand it, click on Webhook and select the branch or tag that we want to publish.The idea here is that whenever the selected branch or tag changes, the SPUG will automatically clone the latest code for automated deployment.

  • Here, after we select the branch, the webhook URL below will generate a link, and the Secret Token below needs to set its own Secret key, the complexity of the Secret key is up to you.(figure 2)

  • And then we went to the code repository, which we now call Gitee, and we went to our project. Click the Admin page, go to the Webhook menu, and select Add Webhook

  • Paste the webhook URL in the URL below, and the Webhook signature is the secret key that we set up ourselves, and tick the box below that you want. The five conditions below that trigger will be followed by a push of data, if it is a Webhook build service will be triggered to build build deployment, so HERE I just need topush,Tag Push,Pull RequestThat’s enough, and then click Add.

  • We then do an operation in our native code to write an effect, commit a new commit and see if a new build is automatically generated and then deployed

There are five build records before pushing new code:

After modifying the code, push it to the master branch:

When you go to the SPUG, you’ll find a different new release, which is the automatic build release task

The status is also successful, so let’s see if the page works

Dynamic graph GIF:

At this point, we have completed a series of tasks and achieved our expectations. All we need to do is submit the code and the online projects will be synchronized automatically, reducing the need for manual deployment.

At the end

In this also thanks to see the students here, may write a lot of deficiencies, because the seniority is still young, the article is relatively poor foundation, but if there is a question or can leave a message in the comment section.

😁 Sun my study desk

Reference materials for students:

  • Spug official documentation
  • Docker with and without CE
  • Install nginx in centos7 and deploy the front-end project
  • Install Node in docker container