Background:

CI: Continuous Integratiion CD: Continuous Delivery

Common tools:

Jenkins: The most widely used CI/CD tool travis-CI: a lightweight integration tool that automatically integrates with Git Hub to build circ-CI from cloud host:

Jenkins runs on a native (Mac) server and tries to compile and deploy a Web application on this server. The compilation process requires the Node environment and is then compiled and deployed to the native Nginx server.

Software engineering lifecycle:

Git = hook = build/test/deploy

Jenkins installation

  • Preparation work, the machine first installed Java
  • Download the latest and stable files from Jenkins’ websitejenkins.war

Locally run Jenkins

  • On the terminal or Iterm CD to the directory where Jenkins. War is located

  • Run the command java-jar jenkins.war

  • The browser will automatically open http://localhost:8080 (assuming the port is not occupied by another service) and wait for the Unlock Jenkins page to appear

  • Copy the password directly from the terminal, click Continue, and enter the Customize Jenkins page. Select the first one, Install Suggested Plugins, and click OK to enter the plug-in installation page. If the installation fails, click Retry or skip it.

  • The plug-in installation process is visible on the terminal, which takes quite a while.

  • Once created, you can see the Welcome to Jenkins! Congratulations, Jenkins is now installed.

Configuration Jenkins

The next step is to configure Jenkins.

  • Click New Item to create a New task

  • Fill in a task name and select Free Style Project

  • The General configuration. Fill in your Git repo link. There are other things you can do here, like you can only run one job at a time and Throttle builds to 1.

  • Source code management. Choose Git (you can also configure another source management tool such as SVN). – Jenkins will automatically go to the warehouse to pull down the code after the Jenkins mission is enabled. The default is code that builds the Master branch.

  • To build the trigger, select GitHub Hook Trigger for GITScm Polling. In addition, the url of Jenkins needs to be filled in the webhooks setting of git repository setting, because this is a local Jenkins, git cannot access it, so it will not be shown for the moment

  • Build the environment. To install the NodeJS plug-in, go to Manage Jenkins to find the Global Tool installation and fill in the native Node version

  • Build. Select the shell command. This article uses the local Nginx as the server, so it is necessary to copy Jenkins’ packaged products into the Nginx service directory.

Nginx

If the machine is not installed install first. Go to nginx.conf, vim nginx.conf, and set location root under server. This is where your project artifacts will be placed. Port reset one and restart. This directory must correspond to the directory where the Shell is packaged in Jenkins’ Settings. The access URL set here is localhost:8082

Build the project

Everything is ready, and it’s finally the exciting moment! Find the project in Jenkins and click Build Now to see the Build progress bar.

Click Console Output to see the build result:

At this point we start the Nginx service, Nginx, open the browser localhost:8082, and then we can access our project online. At this point, our project is built and packaged! Then take ~

conclusion

This paper realizes the whole process of Jenkins+Nginx+Git local automatic deployment front-end project. To recap: Jenkins was responsible for building:

  • Set up the plug-in in Jenkins, configure certain commands and permissions, go to Git to pull up the code, Shell automatically package the product, copy the product to the local Nginx server
  • Nginx is responsible for providing the service,nginx -s reloadRestart the nginx service
  • Git is responsible for source code custody and triggers builds

Pit:

  • The Jenkins plugin was very slow to download and launch for the first time
  • Jenkins plugins, see if they download successfully, especially NodeJS
  • Nginx configuration, mainly the server directory path, port, do not have the same as other occupied port.
  • Shell packaging products, copy directories, and other common commands
  • The directory where Nginx resides is a bit cumbersome, so try several times if you are not familiar with it
/usr/local/etc/nginx/nginx.conf (configuration file path) /usr/local/var/www (server default path)Copy the code
  • View the Nginx configuration directory:nginx -tAnd return to:
nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok  
nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful
Copy the code