More articles

preface

When the company first entered the front end, it still used FTP tools to deploy projects, and the most skilled commands were RM-RF and CP. Now it seems that I was still in the era of cold weapons at that time, and I was still stupid and didn’t know it. After that, in addition to the different deployment methods, most companies began to use Jenkins to deploy projects. With the popularity of front-end engineering, deployment has become a necessary skill for front-end students, and it is really never too late to learn. As a technician, one should have the consciousness of a technician

Github Actions

Actions is a CI/CD service officially launched by Githubin November, 19. Blogs that follow the travelers are also automatically deployed to Github through Actions. Compared with other deployments, actions has the advantage that users do not need to write complex scripts. You can refer to other developers’ existing actions

Basic terminology

GitHub Actions Basic terms:

  • workflow

Continuous integration of a run process is a workflow

  • job

Workflow consists of one or more jobs. Workflow is a continuous integration run that can complete multiple tasks

  • step

Each job consists of multiple steps

  • action

Each step can execute one or more commands (actions) in turn.

Yml file

GitHub Actions scripts are yML files, located under. GitHub/Workflow

There are two configuration methods:

  1. Github will commit the code once it is configured, so we must pull the code once

  2. Github \workflows\main.yml =.github\workflows\main.yml

configuration

GitHub Pages configuration entry: Settings =>GitHub Pages

Workflow workflow workflow workflow workflow workflow workflow
name: Publish page
# on is listening for the triggered action, which listens for the push code to trigger the deployment
Tags and paths can also be configured. You can also configure branches-ignore, tag-ignore, paths-ignore, ignore branches, tags, etc
on:
  push:
    branches:
      - master
      
Schedule can be configured to trigger deployment periodically. Check out the CRON expression and select manual deployment

# Jobs is what we're going to do
Create a build-and-deploy job
# runs-on specifies the dependent virtual environment as Ubuntu-latest
Start each step under steps
# name: Checkout retrieves code
# Use other developers' actions/checkout@v2
# name: Install and Build Start to Install the environment and package
# name: Deploy starts the deployment, again using other authors' existing actions
# width BRANCH Specifies the BRANCH to deploy: BRANCH
# with FOLDER Files to deploy (i.e. packaged resources) blog/.vuepress/dist
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2 
        with:
          persist-credentials: false

      - name: Install and Build 
        run: | npm install npm run build      - name: Deploy 
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          GITHUB_TOKEN: The ${{ secrets.GITHUB_TOKEN }}
          BRANCH: gh-pages
          FOLDER: blog/.vuepress/dist
Copy the code

GitHub Actions deployment is very simple, many key areas can use ready-made Actions, greatly reduce the cost of deployment, online deployment progress check GitHub Actions

Jenkins & nginx

We can first go to Ali Cloud to register a free server, about 1-12 months, enough for us to try, but the configuration process is quite painful (small white indicates various configuration and permissions, really can make people dead, in the final analysis is too weak), Qilu virtual machine uses Ubuntu, Ali Cloud provides a variety of ways to link virtual machines, you can try, qilu also recommends a tool to connect to the server mobaxTerm, the following is the way provided by Ali cloud

Use Ali Cloud SSH link encountered problems in several ways to deal with:

  1. To enable ports in a security group, for examplesshThe default port number is22
  2. to/etc/ssh/sshd_configSee thePermitRootLoginSet whether toyesAnd comment closed (# deleted)
  3. sshUnable to link, you can check to see if it is startedsshservice

Other small problems do not say, more problems to find it

nginx

/ / install nginx
apt-get install nginx
/ / start
service nginx start
/ / stop
service nginx stop
/ / restart
service nginx restart
Copy the code

Configure nginx briefly. Next, as the deployment address of our test project, add the following configuration to /etc/nginx/nginx.conf:

server { listen 8000; server_name localhost; location / { root test; index index.html index.htm; }}Copy the code

The front-end static resources are deployed at /usr/share/nginx/. You can create your own test folder and add an HTML page to see if it is accessible

More configuration of nginx is not introduced, currently basically meets our requirements for automatic deployment testing, nginx is very powerful, after the journey to do a special issue of sharing

jenkins

Nginx installs and starts Jenkins in the same way as nginx installs and starts Jenkins in the same way as nginx installs and starts Jenkins. The NodeJS Plugin and Publish Over SSH are used to configure the Node environment and connect to remote services. Remember to restart the Jenkins service after installing the Plugin

Jenkins relies on Java, ali Cloud server does not have Java environment, remember to install yourself

node

Configure node in the Global tool and select the required node version

ssh

SSH configuration entry in system configuration

  • Name: Defines a name
  • Hostname: indicates the server address
  • Username: indicates the login user
  • Remote Directory: indicates the Remote deployment address
  • Passphrase/Password: enter the user Password

Fill in these and save

Create a project

Create a name, select a free style software project, and when you have a project with the same configuration type the project name in the copy below, and the same configuration will be brought up

Enter the configuration of the project, fill in the name of the project and associate git address. Because github network is unstable and often fails, the code cloud is selected here

Specify the branch

We choose manual trigger here, and then in order to ensure that the server code cloud redundant resources and resources are up to date, we choose to delete the last deployed in nginx resources after packaging, before deployment

Select the previously configured Node

Write the packaging script, using CNPM

Finally, the packaged deployment operation is configured. The packaged file is DIST, and we only need to deploy the content in DIST

Nginx is now deployed on port 8000. Nginx is now deployed on port 8000

conclusion

To complete a simple deployment is not trouble, but from a very tired, because in the field of themselves are not familiar with doing things what have to check and make, and some unknown error, but the front development so fast, or technology develops so fast, don’t develop their own technology and the technology how long the road, always do something familiar, Sounds like it would be boring, too