Gitlab Automatic deployment iv: Deploy Gitlab projects using Gitlab-Runner

preface

The front end boss of the company left the company for some reasons. He left in a hurry. I had little contact with this aspect before, and I had only a half-knowledge of it. In these two days, WHILE learning, I began to build, while recording the whole process of building.

In this series of articles, from setting up Gitlab, to installing and registering Gitlab-Runner, to combining the two to deploy a simple project, you will learn how to automate the packaging and deployment of your projects on Gitlab.

There are four articles in the series, including:

How to install Gitlab on Aliyun
Install GITLAB – RUNNER
LINUX login without password
Deploy GITLAB’s projects using Gitlab-Runner

As I have been doing is the front end, I am not skilled for Linux, if there is a mistake, please point out.

A project to deploy Gitlab using Gitlab-Runner

This is the final article in the series, in which we will use Gitlab-Runner to deploy projects on Gitlab.

Step1 Linux You can log in to Linux without the password

In this article, you have implemented Windows to Linux password-free logins, and Linux to Linux is similar.

Pay special attention to ！！！！

When we set up gitlab-runner, we created a user named ‘gitlab-runner’. All operations of gitlab-runner are performed under the account ‘gitlab-runner’. You can run the whoami command in the script to check:

whoami
# Gitlab-runner user
gitlab-runner
Copy the code

Therefore, the no-password login should also be configured under the 'gitlab-runner' account. If the no-password login is configured with the 'root' account, gitlab-runner will see an error when running the no-password login:

Host key verification failed.
ERROR: Job failed: exit status 1
Copy the code

Because the ‘gitlab-runner’ user does not have the no-password login permission, do not use the ‘root’ account to configure no-password, do not use the ‘root’ account to configure no-password, do not use ‘root’ account to configure no-password!

Log in to the gitlab-runner user

Remember when we installed Gitlab-Runner, we had one line like this?

sudo useradd --comment 'GitLab Runner' --create-home gitlab-runner --shell /bin/bash
Copy the code

This is where the gitlab-runner account was created

Note: Changing the password here does not affect gitlab-runner’s use of the account

passwd gitlab-runner
Copy the code

Then log in using the Gitlab-Runner account and continue

Let’s say we want to log in to machine B from machine A

First generate the public and private keys in machine A

ssh-keygen -t rsa
Copy the code

Then press enter, and you can type the following command to see what is generated

cd ~/.ssh
ls -a. authorized_keys id_rsa id_rsa.pub known_hostsCopy the code

Send the public key of machine A to machine B by typing the following command on machine A

ssh-copy-id [email protected] Public IP address of machine B
Copy the code

Then enter yes or Enter as prompted. Finally, you need to enter the password for machine B. If successful, you will see

Number of key(s) added: 1
Copy the code

Try logging in to machine B

ssh [email protected]
Welcome to Alibaba Cloud Elastic Compute Service !
Copy the code

Step2 create a project locally

Here the project is generated directly using vue-CLI

vue create gitlab-vue
Copy the code

Let’s run it locally

Create a project on Gitlab as well and push the local project to Gitlab’s project

cd existing_folder
git init
git remote add origin [email protected]:root/gitlab-vue.git
git add .
git commit -m "Initial commit"
git push -u origin master
Copy the code

Step3 write the.gitlab-ci.yml file

The process for creating a.gitlab-ci.yml file in the project root directory is as follows

Install build dependencies.
Package the new file.
Log in to the project deployment server, remove the old version of the project files, and finally copy the packaged files.

Note that the first two steps here are done on gitlab-Runner

According to the process, we first define the following basic steps, and submit. Then you can see that Pipelines are running properly

stages:
  - install_deps
  - build_prod
  - deploy_prod

cache:
  key: ${CI_BUILD_REF_NAME}
  paths:
    - node_modules/
    - dist

Install build dependencies
install_deps_job:
  stage: install_deps
  only:
    - master
  script:
    - echo 'Install build dependency phase'
  tags:
    - my-tag

# Package new files
build_prod_job:
  stage: build_prod
  only:
    - master
  script:
    - echo 'Package new file phase'
  tags:
    - my-tag

# Log in to the project deployment server, remove the old version of the project files, and finally copy the packaged files
deploy_prod_job:
  stage: deploy_prod
  only:
    - master
  script:
    - echo 'Log in to the project deployment server, remove the old version of the project files, and finally copy the packaged files.'
  tags:
    - my-tag
Copy the code

Let’s do it in steps

1. Install build dependencies

This step is simple, just install the dependency

NPM: command not found NPM: command not found NPM: command not found

This section describes how to install nodes in Linux and how to configure the environment

Install build dependencies
install_deps_job:
  stage: install_deps
  This step will be performed on multiple branches, and will normally include all the branch names of the environment
  only:
    - dev
    - master
  script:
    - echo 'Install build dependency phase'
    - pwd /home/gitlab-runner/builds/6_sebBuN/0/root/gitlab-vue
    - npm i # Install dependencies
  tags:
    - my-tag
Copy the code

In the gitlab-Runner server, let’s enter the following command to check it out

cd /home/gitlab-runner/builds/6_sebBuN/0/root/gitlab-vue
ls -a

# If you see the node_modules folder, you have successfully installed the dependency
.                .editorconfig  .gitlab-ci.yml     public
..               .eslintrc.js   node_modules       README.md
babel.config.js  .git           package.json       src
.browserslistrc  .gitignore     postcss.config.js  yarn.lock

Copy the code

2. Package the new file

Vue-cli3’s package command packages the project in the dist folder

In this step, we first remove the old version of the dist folder and then repackage it

# Package new files
build_prod_job:
  stage: build_prod
  only:
    - master
  script:
    - echo 'Package new file phase'
    - pwd View the current directory
    - ls -a # View all files
    - rm -rf ./dist # Delete dist folder from current folder
    - npm run build # packaged
    - ls -a # Wrap complete, look at all files again
  tags:
    - my-tag
Copy the code

Commit the code, and in the Pipeline you can see that the dist folder is added to the directory

$ ls -a. babel.config.js .browserslistrc dist# There is an extra dist folder
.editorconfig
.eslintrc.js
.git
.gitignore
.gitlab-ci.yml
node_modules
package.json
postcss.config.js
public
README.md
src
yarn.lock
Copy the code

3. Log in to the project deployment server, remove the project files of the earlier version, and copy the packaged files to the project server

We created a new WWW folder in the root of the project server to put our project package files

# Log in to the project deployment server, remove the old version of the project files, and finally copy the packaged files
deploy_prod_job:
  stage: deploy_prod
  only:
    - master
  script:
    - echo 'Log in to the project deployment server, remove the old version of the project files, and finally copy the packaged files.'
    - cd dist # enter the dist
    - pwd
    - whoami # gitlab-runner
     # Log in to the target server
    - ssh [email protected]
    # List all files
    - ssh [email protected] "ls -a"
    # delete all contents from WWW folder
    - ssh [email protected] "rm -rf ./www/*"
    # Copy files remotely using the SCP command-scp-r-p 22./* [email protected]:/root/ WWW tags: -my-tagCopy the code

Of allocated tokens. Pseudo-terminal will not be allocated because stdin is not a terminal. Pseudo-terminals will not be allocated because standard input is not a terminal. Add the -t -t argument to force the pseudo terminal assignment, even if the standard input is not a terminal. Ignore it here! .

ssh -t -t [email protected]
Copy the code

Step4 install Nginx on the project server

Add port 8889 to the Aliyun security group rule

I’ve done it before, but I won’t repeat it here.

Installing dependency Packages

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

Download Nginx and unzip it

cd /usr/local
mkdir nginx
cd nginx
Download the tar packageWget HTTP: / / http://nginx.org/download/nginx-1.13.7.tar.gz# decompressionThe tar - XVF nginx - 1.13.7. Tar. GzCopy the code

Install Nginx

cd /usr/local/ nginx/nginx - 1.13.7# to perform
./configure
# Run the make command
make
# Execute make install
make install
Copy the code

Modify the Nginx configuration file

vi /usr/local/nginx/conf/nginx.conf
Copy the code

Make the following changes

# user nobody;
#... omit
http{
    server {
        listen       8889;
        server_name  localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;location / { root /root/www; index index.html index.htm; }}#... omit
}

Copy the code

Restart the Nginx

cd /usr/local/nginx/sbin
./nginx -s reload
Copy the code

Accessing IP+ port, I see 403 returned here

Go back to the Nginx configuration file and open the user nobody comment and change it to user root.

user  root;
#... omit
http{
    server {
        listen       8889;
        server_name  localhost;

        #charset koi8-r;

        #access_log logs/host.access.log main;location / { root /root/www; index index.html index.htm; }}#... omit
}
Copy the code

Restart, finally can access normal

We modify the code, commit, wait for the build to complete, refresh the page, and see that the changes have been added successfully

Reference:

How to install Node.js on CentOS to solve the nginx 403Forbidden problem