DevUI is a team with both design and engineering perspectives, serving huawei DevCloud platform and huawei internal background systems, as well as designers and front-end engineers. Add devui Helper (Devui-Official) DevUIHelper plugin: Devuihelper-lsp (welcome Star)

preface

This article takes the DevUI component library website as an example to introduce how to use the DevCloud pipeline to automatically deploy a front-end application.

This article is a sequel to How to Build Your Own Angular Component Library. Once you’ve built your component library, deploy your web site to the server.

1 Set up a server environment

After the code is developed locally and pushed to a remote code repository, it needs to be deployed on a server for users to access it.

Therefore, in order to deploy your application, the first step is to purchase a server. In order to save costs, it is generally necessary to purchase an on-demand cloud server. How to apply for a cloud server is not described.

1.1 install Nginx

Web applications often use Nginx as a reverse proxy.

In order for users to access our application, we need to install the Nginx application on the server.

We used source code compilation to install the latest version of Nginx, which consists of the following steps:

  • download
  • Unpack the
  • configuration
  • compile
  • The installation

1.1.1 Download Nginx source code

To download the Nginx installation package for Linux, run the wget command to download the Nginx installation package.

Wget HTTP: / / http://nginx.org/download/nginx-1.18.0.tar.gzCopy the code

1.1.2 decompression

Run the tar command to decompress the package.

The tar - ZXVF nginx - 1.18.0. Tar. GzCopy the code

1.1.3 configuration

Go to the root directory of the nginx source code, and then execute the configure configuration script, which only configures the nginx installation directory.

CD nginx - 1.18.0. / configure -- prefix = / usr/local/nginxCopy the code

An error was reported after execution. It turned out that the dependency library was missing.

[root@ecs-kagol nginx-1.18.0]#./configure --prefix=/usr/local/nginx checking for OS + Linux 3.10.0-862.14.1.5. H428. Eulerosv2r7. X86_64 x86_64 checking for C compiler... Found + using GNU C Compiler + GCC version: 4.8.5 20150623 (EulerOS 4.8.5-28) (GCC) Checking for Gcc-PIPE switch... found ... checking for PCRE library in /usr/local/ ... not found checking for PCRE library in /usr/include/pcre/ ... not found checking for PCRE library in /usr/pkg/ ... not found checking for PCRE library in /opt/local/ ... not found ./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the module by using --without-http_rewrite_module option, or install the PCRE library into the system, or build the PCRE library statically from the source with nginx by using --with-pcre=<path> option.Copy the code

We use yum package management tool (similar to Node NPM package management tool) to install the pcre/zlib/ OpenSSL dependency libraries.

yum -y install pcre-devel zlib-devel openssl-devel
Copy the code

Configure Nginx successfully. The configuration result is as follows:

. checking for getaddrinfo() ... found checking for PCRE library ... found checking for PCRE JIT support ... found checking for zlib library ... found creating objs/Makefile Configuration summary + using system PCRE library + OpenSSL library is not used + using system zlib library nginx path prefix: "/usr/local/nginx" nginx binary file: "/usr/local/nginx/sbin/nginx" nginx modules path: "/usr/local/nginx/modules" nginx configuration prefix: "/usr/local/nginx/conf" nginx configuration file: "/usr/local/nginx/conf/nginx.conf" nginx pid file: "/usr/local/nginx/logs/nginx.pid" nginx error log file: "/usr/local/nginx/logs/error.log" nginx http access log file: "/usr/local/nginx/logs/access.log" nginx http client request body temporary files: "client_body_temp" nginx http proxy temporary files: "proxy_temp" nginx http fastcgi temporary files: "fastcgi_temp" nginx http uwsgi temporary files: "uwsgi_temp" nginx http scgi temporary files: "scgi_temp"Copy the code

Note that after executing the configure configuration script, a Makefile is generated, which is used to compile the Nginx source code.

1.1.4 compilation

Compared to configuration, the compilation step is much easier, just need to execute the make command.

make
Copy the code

1.1.5 installation

This step will actually generate the corresponding file in the /usr/local/nginx directory.

make install
Copy the code

After the installation, all the files needed to run the nginx application have been generated in the /usr/local/nginx directory.

1.1.6 Running and starting Nginx

To start nginx directly, run sbin/nginx in nginx.

/usr/local/nginx/sbin/nginx
Copy the code

1.1.7 Verifying the startup

To access the Nginx application, enter the public IP address of the server in the local browser.

This shows the Nginx welcome page, which will display our own homepage once we have deployed our Web application.

2 Manual deployment process

After we finished developing the code of DevUI website on the local machine, we executed NPN run build. At this time, we will get all the static resource files of DevUI website in dist directory. You can first use Anywhere to see the effect locally.

In order to deploy them to the server and access them through the Nginx server, we need to upload these files to the server’s Nginx directory. Uploading them one by one is definitely not practical. We need to zip them up, upload them to the server, and unzip them to the Nginx HTML directory to complete the deployment.

Step 1: Compress and pack tar

Step 2: Decompress the package and deploy deploy

2.1 Compression and Packaging

Static resources generated by NPM run build are stored in the dist directory. Run the following command to generate a tar package:

tar czvf devui.tar.gz ./dist
Copy the code

2.2 Decompressing Deployment

Log in to the server, run the rz command to upload the tar package generated in the previous step to the Linux server, and then run the tar command to decompress the package to the Nginx HTML directory to complete the deployment.

tar zxvf devui.tar.gz
Copy the code

If you had to perform these steps manually every time you finished development, it would be cumbersome and error-prone.

Why not automate it?

3 Use DevCloud pipeline for automatic deployment

DevCloud is a software development platform integrating Huawei’s R&D practices, cutting-edge R&D concepts and advanced r&d tools. In order to realize automatic deployment of Web applications, we mainly need to use DevCloud’s pipeline, compilation and construction, release and deployment services.

It is mainly divided into the following four steps:

  1. Create the DevCloud project
  2. Create pipeline
  3. Creating a Build Task
  4. Creating a Deployment Task

3.1 Creating a DevCloud project

Since all DevCloud services are hosted through projects, you need to create a project first, which is a Kanban project.

To create a Kanban project, go to the DevCloud home page and follow these steps:

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

After the project is successfully created, directly enter the home page of the project. Click the assembly line button under build & Publish in the header menu to carry out the assembly line home page.

3.2 Creating a Pipeline

There is a button to create an assembly line in the upper right corner of the assembly line homepage. Click it to enter the assembly line creation process.

Creating an pipelining line consists of the following steps:

  • Input pipeline name
  • Select template, in this case we select empty template
  • Select the source and use the Github repository directly
  • Custom workflow

Select code source

In order to select the source of Github code repository, we need to add a service extension point and obtain Github authorization, so that DevCloud pipeline can pull Github code, build, deploy, etc.

The steps for adding extension points are also simple:

  • Enter the extension point name
  • Perform OAuth authorization

With extension points, you can choose your Github repository as your code source.

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

The pipeline that can be created consists of three phases. The first phase is associated with a Github repository, the second phase is an empty build phase with no tasks, and the third phase is a non-editable release repository phase.

The pipeline is currently doing nothing, and we need to add tasks to it to automate the deployment of the site.

3.3 Creating a Build Task

Review the previous manual deployment steps:

  1. Build source code
  2. Compressed source code
  3. Upload software packages to the server
  4. Decompress the package to the Nginx directory

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

  1. Add a build type task during the build phase
  2. Create a build task
  3. The pipeline is created one step ahead of the pipeline selection

3.3.1 Add a build type task during the Build phase

Add a task in the build phase and select the build type in the sideslip. There is no build task under this type, so you cannot select it. You need to create the build task first.

3.3.2 Creating a Build task

Click the Create button in selecting the task to be scheduled to enter the new Build task page and follow the instructions to create a build task:

  1. Enter the build task name
  2. Select the Entpoint instance we created earlier, and the Github repository under this example
  3. Create a vm directly without using a template
  4. Add two build steps of Npm build and upload package channel distribution library (critical)
  5. Configure build Parameters

Npm build

This step uses the default build script command. You only need to add the tar package command:

. NPM run build NPM run tar NPM run tarCopy the code

The tar command:

"tar": "node scripts/tar.js",
Copy the code

tar.js

const fs = require('fs'); const tar = require('tar'); fs.stat('./result', (error, stats) => { if (error) { fs.mkdirSync('./result'); // create an empty} tar.c({gzip: Pipe (fs.createWritestream ('./result/devui.tar.gz')); // Put the generated tar package (devui.tar.gz) in the result directory});Copy the code

Upload software packages to the distribution library

The previous Npm build step created the package, and the purpose of this task is to upload the tar package to the distribution library, which is the third stage in the previous pipeline, so that the tar package can be downloaded to the target server at deployment time.

In this step, you need to enter the build package path:

./result/devui.tar.gz
Copy the code

The release version number and package name are not written out, but are taken from the deployment parameters in the following format:

${releaseVersion}
Copy the code

ReleaseVersion is the build parameter that needs to be configured in the next step.

Configure build Parameters

CodeBranch is the default parameter, and we need to add releaseVersion and serviceName as build parameters, one for the build number and the other for the serviceName.

3.3.3 Select the line created in the previous step

Back to the pipeline, you can select the line created in the previous step and save it.

Now that the build steps are done, let’s run with it.

After running the pipeline we can see our tar build in the release warehouse:

With the build package we can deploy it to the server, but we certainly don’t want to deploy it manually. Instead, we create a deployment task in the pipeline and automate the process.

3.4 Creating a Deployment Task

Adding deployment tasks to the pipeline is similar to adding build tasks in three steps:

  1. Add a new stage
  2. Add a deployment type task in this phase
  3. Create a deployment task (Critical)
  4. In Step 2, select the deployment task created in Step 3

Create a deployment task

Similar to creating a build task:

  1. Enter the deployment task name
  2. Select a blank template and create it directly
  3. Add the two build steps of selecting the deployment source and executing shell commands (critical)
  4. Configuring Deployment Parameters

Selecting the deployment source

Select a host group and fill in the software package and deployment directory.

The package is the package from the previous release repository, directly from /devui/${releaseVersion}, where ${releaseVersion} is the deployment parameter, similar to the previous build parameter.

The deployment directory is the directory to upload the tar package to on the target machine, which we upload to the /devui directory.

To create a host group, click The Add button next to the host group to go to the create Host group page. To create a host group, perform the following steps:

  1. Enter the host group name
  2. Adding a host (previously applied ECS Elastic Cloud Host)

Set the following parameters for adding a host:

  1. The host name
  2. Host IP address
  3. User name (root)
  4. password
  5. Port Number (22)

Executing shell commands

Shell command is the shell command you want to execute after you have uploaded the tar package to the target server. We certainly want to decompress the tar package.

Execute the following shell:

Run the following command to delete the static resource: rm -rf /usr/local/nginx/ HTML /* # Delete the static resource: tar ZXVF /devui/${serviceName}.tar.gz -c /usr/local/nginx/ HTML # Unzip the tar packages to nginx HTML directory/usr/local/mv nginx/HTML/dist / * / usr/local/nginx/HTML /Copy the code

Configuring Deployment Parameters

The deployment parameters and build parameters are configured in the same way and will not be described here.

Add deployment tasks and we can run off the pipeline and see what happens.

After the assembly line runs, the four stages are displayed in green:

After deployment, visit our host IP address to see the website effect, which is the same as DevUI official website.

3.5 Scheduled Task

After building the assembly line, we can configure a scheduled task to automatically run the assembly line with the designated branch every day or every week without manual intervention.

To ensure version quality, you can also configure a grayscale deployment policy and add a dip test task to ensure that no problems occur during the deployment of the live network.

If you are interested in DevCloud, you can check out the DevOps website, where you can learn how to play the whole DevOps process from requirements planning to r&d, testing and operation.

4 summary

This article describes in detail how to automate the deployment of the Github repository source code for a website to the server.

This paper first introduces how to apply for a server and set up a server environment, and then focuses on the steps of setting up Nginx service on a Linux server.

Then the manual deployment process is briefly introduced.

Finally, it describes how to use DevCloud pipelining tools to achieve automated deployment.

Join us

We are DevUI team, welcome to come here and build elegant and efficient human-computer design/research and development system with us. Email: [email protected].

The text/DevUI Kagol

Previous articles are recommended

Start writing tests for Your Angular app now

Dark Mode and Thematic Development of Web Interfaces

“How to build a grayscale Publishing environment”