当前位置:网站首页>How do large factories use devcloud pipeline to realize automatic deployment of web applications?

How do large factories use devcloud pipeline to realize automatic deployment of web applications?

2020-12-06 13:11:58 kagol

DevUI It's a team with both design and engineering perspectives , Serve Huawei cloud DevCloud The platform and Huawei's internal several middle and background systems , For designers and front-end Engineers .
Official website :devui.design
Ng Component library :ng-devui( welcome Star)
Official communication : add to DevUI Little helper (devui-official)
DevUIHelper plug-in unit :DevUIHelper-LSP( welcome Star)

Preface

This article takes DevUI Component library For example, website , Introduce how to use DevCloud Pipeline automation deployment of a front-end application .

This paper can be considered as yes 《 Hand in hand to teach you to build your own Angular Component library 》 The sequel to , When we set up the component library , How to deploy its website to the server .

1 Build a server environment

This machine has developed the code , and push To the remote code repository , It also needs to be deployed to the server , Only users can access .

So in order to deploy your application , The first step is to buy a server , In order to save cost , Generally, you will buy cloud servers that are used on demand , How to apply for cloud server is not introduced , Here's how to do it in Linux Server setup Nginx service .

1.1 install Nginx

Web Applications usually use Nginx As a reverse proxy .

In order to give users access to our app , It needs to be installed on the server Nginx application .

We use source code compilation to install the latest version of Nginx, It is mainly divided into the following steps :

  • download
  • decompression
  • To configure
  • compile
  • install

1.1.1 download Nginx Source code

First in Nginx Download page on official website find Linux Version of Nginx Source package address , And then use wget Command download Nginx Source installation package .

1 wget http://nginx.org/download/nginx-1.18.0.tar.gz

 

1.1.2 decompression

Use tar Command to decompress .

1 tar -zxvf nginx-1.18.0.tar.gz

 

1.1.3 To configure

Enter the first nginx The root directory of the source code , And then execute configure The configuration script , There is only nginx Installation directory .

1 cd nginx-1.18.0
2 ./configure --prefix=/usr/local/nginx

 

After execution, we found that there was a mistake , It turns out that there is a lack of dependency Libraries .

 1 [root@ecs-kagol nginx-1.18.0]# ./configure --prefix=/usr/local/nginx
 2 checking for OS
 3  + Linux 3.10.0-862.14.1.5.h428.eulerosv2r7.x86_64 x86_64
 4 checking for C compiler ... found
 5  + using GNU C compiler
 6  + gcc version: 4.8.5 20150623 (EulerOS 4.8.5-28) (GCC)
 7 checking for gcc -pipe switch ... found
 8 ...
 9 checking for PCRE library in /usr/local/ ... not found
10 checking for PCRE library in /usr/include/pcre/ ... not found
11 checking for PCRE library in /usr/pkg/ ... not found
12 checking for PCRE library in /opt/local/ ... not found
13 
14 ./configure: error: the HTTP rewrite module requires the PCRE library.
15 You can either disable the module by using --without-http_rewrite_module
16 option, or install the PCRE library into the system, or build the PCRE library
17 statically from the source with nginx by using --with-pcre=<path> option.

 

It mainly needs to be installed pcre/zlib/openssl Three dependency Libraries , We use yum Package management tools ( similar Node Of npm Package management tools ) To install .

1 yum -y install pcre-devel zlib-devel openssl-devel

 

After installing the dependency library, execute again configure Script ,Nginx Configuration is successful , The configuration results are as follows :

 1 ...
 2 checking for getaddrinfo() ... found
 3 checking for PCRE library ... found
 4 checking for PCRE JIT support ... found
 5 checking for zlib library ... found
 6 creating objs/Makefile
 7 
 8 Configuration summary
 9   + using system PCRE library
10   + OpenSSL library is not used
11   + using system zlib library
12 
13   nginx path prefix: "/usr/local/nginx"
14   nginx binary file: "/usr/local/nginx/sbin/nginx"
15   nginx modules path: "/usr/local/nginx/modules"
16   nginx configuration prefix: "/usr/local/nginx/conf"
17   nginx configuration file: "/usr/local/nginx/conf/nginx.conf"
18   nginx pid file: "/usr/local/nginx/logs/nginx.pid"
19   nginx error log file: "/usr/local/nginx/logs/error.log"
20   nginx http access log file: "/usr/local/nginx/logs/access.log"
21   nginx http client request body temporary files: "client_body_temp"
22   nginx http proxy temporary files: "proxy_temp"
23   nginx http fastcgi temporary files: "fastcgi_temp"
24   nginx http uwsgi temporary files: "uwsgi_temp"
25   nginx http scgi temporary files: "scgi_temp"

 

We note that the execution is complete configure After configuring the script , It generates a Makefile file , This file is used to compile Nginx Source code .

1.1.4 compile

Compared to configuration , The steps of compiling are much simpler , Just execute make Command is enough .

1 make

 

1.1.5 install

After compiling, it is installed , This step will really be in /usr/local/nginx Directory to generate the corresponding file .

1 make install

 

After installation , stay /usr/local/nginx Directory has been generated to run Nginx All the files needed by the application .

1.1.6 Run start Nginx

perform nginx In the catalog sbin/nginx You can start it directly Nginx La .

1 /usr/local/nginx/sbin/nginx

 

1.1.7 Verify that startup succeeded

Enter the server's public network in the local browser IP Address , Can access Nginx application .

This shows Nginx Welcome page of , When we deploy our own Web After application , This page will show our own home page .

2 Manually deploy the process

We've developed... On this machine DevUI After the code of the website , perform npn run build, This will be in dist The directory gets DevUI All static resource files of the website , You can use it locally first anywhere Look at the effect .

To deploy it to the server , And pass Nginx Server access , We need to upload these files to the server nginx Catalog , It's not realistic to transfer files one by one , It needs to be compressed and packaged , Then upload it to the server , Finally, decompress it to nginx Of html The directory is deployed .

Step 1: Compress and pack tar

Step 2: Decompression deployment deploy

2.1 Compress and pack

npm run build The static resources constructed are stored in the dist Under the table of contents , Just execute the following command to generate tar Compressed package :

1 tar czvf devui.tar.gz ./dist

 

2.2 Decompression deployment

logon server , Use rz The command will be generated in the previous step tar Packages uploaded to Linux The server , And then use tar Unzip the command to nginx Of html Directory to complete the deployment .

1 tar zxvf devui.tar.gz

 

If you need to perform the above steps manually after each development , It will be very troublesome , And it's easy to make mistakes .

Why not automate it ?

3 Use DevCloud Pipeline realizes automatic deployment

DevCloud Huawei R & D practice 、 Cutting edge R & D concept 、 Advanced research and development tools as one of the software development platform , In order to achieve Web Automated deployment of applications , We mainly need to use DevCloud Of Assembly line / Compiling and constructing / Release / Deploy 4 A service .

It is mainly divided into the following 4 A step :

  1. establish DevCloud project
  2. Create a pipeline
  3. Create build tasks
  4. Create deployment tasks

3.1 establish DevCloud project

because DevCloud All services are carried through projects , So you need to create a project first , Create a Kanban project here .

Enter the first DevCloud home page , Follow these steps to create a Kanban project :

  1. Click create project in the upper right corner
  2. Select Kanban project
  3. Enter the project name
  4. determine

After the project is successfully created, you can directly enter the homepage of the project , Click on the head menu structure & Release Under the Assembly line Button to carry out the assembly line home page .

3.2 Create a pipeline

In the upper right corner of the pipeline home page, there is a button to create a pipeline , Click to enter the pipeline creation process .

Creating a pipeline is divided into the following steps :

  • Enter the pipeline name
  • Select template , Here we choose the empty template
  • Choose the code source , Just use Github Code warehouse can be
  • Custom workflow

Choose the code source

In order to choose Github The source of the code repository , We need to add a service extension point , get Github Authorization of , such DevCloud Only on this side of the assembly line can we pull Github Code for , Build 、 Deployment and other steps .

The steps to add extension points are also simple :

  • Enter the extension point name
  • Conduct OAuth to grant authorization

With the extension point , You can choose your Github Warehouse as code source .

After selecting the code source, you can create your pipeline .

The newly created pipeline contains 3 Stages , The first stage is associated with a Github Code warehouse of , The second phase is an empty build phase , There's no mission in there , The third stage is a non editable release repository stage .

This assembly line can't do anything at present , We need to add tasks to it to complete the automated deployment of the website .

3.3 Create build tasks

Review the previous manual deployment steps :

  1. Build source code
  2. Compress source code
  3. Upload the software package to the server
  4. Unzip the package to Nginx Catalog

So we first need to add a build task to the pipeline :

  1. Add a build type task to the build phase
  2. Create a build task
  3. In the pipeline selection step, create a good pipeline

3.3.1 Add a build type task to the build phase

Add a task to the build phase , Then select the build type in the sideslip , At this time, there is no build task under this type , So there's no choice , You need to create a build task first .

3.3.2 Create a build task

Click the Create button in the select task to schedule , Enter the new build task page , Follow the guidelines to create a build task :

  1. Enter the build task name
  2. Choose the one we created earlier Entpoint example , And... In this example Github Warehouse
  3. Don't use templates , Create directly
  4. add to Npm Build and upload the software package to release the library ( The key )
  5. Configure build parameters

Npm structure

This step uses the default build script command directly , Just increase the number of hits tar The command of the package can be :

1 ...
2 
3 npm install #  Install dependency library 
4 
5 npm run build #  ordinary NG CLI Production package build command 
6 
7 npm run tar #  newly added 

 

tar command :

1 "tar": "node scripts/tar.js",

 

tar.js

 1 const fs = require('fs');
 2 const tar = require('tar');
 3 
 4 fs.stat('./result', (error, stats) => {
 5   if (error) {
 6     fs.mkdirSync('./result'); //  non-existent result The directory creates an empty 
 7   }
 8 
 9   tar.c({ gzip: true }, ['dist']) //  take dist All files under the directory are packed 
10   .pipe(fs.createWriteStream('./result/devui.tar.gz')); //  The generated tar package (devui.tar.gz) Put it in result Under the table of contents 
11 });

 

Upload the package to the distribution Library

the previous Npm The build step has created the compressed package , The purpose of this task is to put this tar The package is uploaded to the Publishing Library , That's the first in the pipeline 3 Stages , Easy to download when deployed tar Package to target server .

This step mainly needs to fill in the build package path :

1 ./result/devui.tar.gz

 

Do not write the release version number and package name , Take it from the deployment parameters , The format is as follows :

1 ${releaseVersion}

 

among releaseVersion The next step is to configure the build parameters .

Configure build parameters

codeBranch Is the default parameter , We need to increase releaseVersion and serviceName Two build parameters , A version number for each build , The other is the service name .

3.3.3 In the pipeline selection step, create a good pipeline

Back to the assembly line , You can select the pipeline created in the previous step , Save it .

At this point, the steps of building have been completed , We can run and try .

After running the assembly line, we can see our tar Build packages :

With the build package, we can deploy it to the server , Of course, we certainly don't choose manual deployment , Instead, create a deployment task in the pipeline , Automate all processes .

3.4 Create deployment tasks

Adding deployment tasks to the pipeline is similar to adding build tasks , Just the following 3 Step by step :

  1. Add a new stage
  2. In this phase, add a deployment type task
  3. Create a deployment task ( The key )
  4. Steps in 2 Choose the steps in 3 Deployment task created in

Create a deployment task

Similar to creating a build task :

  1. Enter the deployment task name
  2. Select a blank template , Create directly
  3. Add select deployment source and execution shell Command these two build steps ( The key )
  4. Configure deployment parameters

Choose a deployment source

The key is to choose Host group , Fill in software package and Deployment Directory .

Software package is the software package that was released to the warehouse before , Directly from /devui/${releaseVersion} Take it , among ${releaseVersion} It's a deployment parameter , Similar to the previous build parameters .

The deployment directory is to place tar The compressed package is uploaded to the directory in the target machine , We passed on to /devui Directory .

Host group needs to be created , Select... Next to the host group newly build Button , Enter the create host group page , Just the following steps are needed to create a host group :

  1. Fill in the host group name
  2. Add host ( Previously applied for ECS Elastic virtual machine )

Add the information that the host needs to fill in :

  1. Host name
  2. host IP Address
  3. user name (root)
  4. password
  5. Port number (22)

perform shell command

perform shell The order is when you have put tar After the software package is uploaded to the target server , Hope to carry out shell command , We certainly hope that we will tar It's unpacked .

Perform the following shell that will do :

1 rm -rf /usr/local/nginx/html/* #  Delete previously deployed static resources 
2 tar zxvf /devui/${serviceName}.tar.gz -C /usr/local/nginx/html #  decompression tar Package to nginx Of html Catalog 
3 mv /usr/local/nginx/html/dist/* /usr/local/nginx/html/

 

Configure deployment parameters

The deployment parameters and build parameters are configured in the same way , I won't repeat .

After adding deployment tasks, we can run off the pipeline , Look at the effect .

After running the assembly line , All four stages will show green :

After deployment, visit our host IP Address to see the effect of the website , and DevUI Official website It's the same .

3.5 Timing task

After building the assembly line , We can configure a timed task , Automatically run the assembly line with specified branches every day or week , No human intervention at all .

In order to ensure the quality of the version , We can also configure the grayscale deployment strategy , Add dial test task , Ensure that every deployment of the existing network is not a problem .

I won't introduce them one by one in limited space , Those who are interested can follow DevCloud Official website , It describes in detail from demand planning to R & D 、 test 、 Operation and maintenance of the whole set DevOps How to play the process .

4 Summary

This article describes in detail how to put a website's Github The warehouse source code is automatically deployed to the server .

First introduce the application server and build the server environment , Focus on Linux Server setup Nginx Service steps ;

Then it introduces the manual deployment process ;

Finally, it introduces in detail how to use DevCloud Assembly line tools , Automated deployment .

Join us

We are DevUI The team , Welcome to join us in creating elegant and efficient man-machine design / R & D system . Recruitment email :muyang2@huawei.com.

writing /DevUI Kagol

Previous articles are recommended

《 Hands teach you how to use Rollup Package and publish your own tool library 》

《 The front end has these two artifacts , There's no need to chase the backstage to interface any more 》

《 Use Git,10 You may need to “ Repentance ” What happened 》

 

版权声明
本文为[kagol]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/202012061311271008.html