Build web full stack system, join dAFang, click me!
Reference Item Address
6.1 Travis and dead simple
What is continuous integration?
Travis CI is a continuous integration service that can be tied to projects on Github, specified to monitor a branch, and automatically grabbed whenever new code is pushed; It provides an environment to run tests, complete builds, and deploy to a server.
Because Travis and Github are brothers, they have by far the largest market share.
What function do we want to implement?
When we push the code to the Github repository, we complete the deployment of our own server (blog.youliaowu.com) and github’s free server (hejialianghe.github. IO).
6.1.1 Preparations
First we set up a Github account and then access Travis Ci; Log in with a Github account; Then click the red button to update the repository, and click the blue part to trigger a project to build.
6.1.2 Hejialianghe.github. IO has been deployed
1. Generate a token on Github
Because Travis needs to push the compiled code to the hejialianghe.github. IO repository after compiling, there must be an identifier to verify it, which is the purpose of our token generation!
Click on your github image in the upper right corner -> Click Settings-> There will be a list on the left -> Developer Settings-> Personal Access Tokens -> Generate New Token -> Give the token a name access_token, check the list, and click Generate Token to Generate it.
Do not close the current page after the token is generated, please write down this token; Because it is only shown once, forgotten can only be generated again.
2. Set environment variables for Travis
We just generated the token on Github and set the token to the environment variable corresponding to Travis. This will be used in the following execution script. To avoid the plaintext token, we set the environment variable.
We go to the Travis website, click on the project we’re building, and click on the blue section in the upper right corner -> Settings
Set name to access_token, value to the token generated on Github, and click Add to add environment variables.
3. Create.travis. Yml and deploy.sh in the project root directory
. Travis. Yml configuration
language: node_js
node_js:
- lts/* Set the language version. LTS means stable version
branches:
only:
- master Set which branch to listen on only
cache: # cache
apt: true
yarn: true
directories:
- node_modules
install: # Install dependencies
- yarn
script: # Script to execute
- yarn build
- sh ./deploy.sh
Copy the codeThe deploy. Sh configuration
#! usr/bin/env sh
Abort the script when an error occurs
set -e
# CD to the build output directory
cd dist
git init
git add -A
git commit -m 'deploy'
# Here access_token is an environment variable set by Travis
git push -f https://${access_token}@github.com/hejialianghe/hejialianghe.github.io master
cd - # Return to the previous level
Copy the codeAt this point, we just need to push the code to the master branch to complete the build and deployment, can refer to the source: source address
6.1.3 Complete deployment of blog.youliaowu.com
1. Generate the public key and private key and copy the public key to the deployment server
Why are public and private keys generated?
Because Travis needs to upload the built code to the deployment server, and the upload needs to be verified, we log in to the deployment server using SSH public and private keys.
🍎 Run the ssh-keygen -t rsa command to generate the public key and private key
ssh-keygen -t rsa Run this command on your own computer, press Enter all the way, and open bash on your window computer
Copy the codeAfter success, the following information is displayed. Id_rsa is the private key and id_rsa.pub is the public key.
Your identification has been saved in /Users/hejialiang/.ssh/id_rsa
Your public key has been saved in /Users/hejialiang/.ssh/id_rsa.pub
Tomato: Copy the public key to your server
# ssh-copy-id < User name for logging in to the deployment server >@< Address of the deployment server > -p < SSH port of the deployment server >
If SSH default port is 22, -p is not requiredSSH - copy - id [email protected]This command adds the public key to the authorized_keys file in the server ~/.ssh/ directory
This command is used to log in to your own server. If you do not need to enter the password, it means that your public key has been added successfully. This is just to verify that the public key has been added successfullySSH [email protected]Copy the codeUsing the above three commands we have successfully added the public key to the deployment server, so now we are adding the private key to Travis.
2. Add the private key to Travis
In order to avoid the disclosure of the private key, we also need to encrypt the private key using the Travis command line tool here, because we don’t have Travis command line tool on our computer, so we need to download and install it. To download Travis, we need to use the Ruby package gem, MAC has Ruby built in, so we don’t need to download it. For other systems, you need to download the latest Ruby first. Let’s take the MAC as an example.
We logged in to the server above, now we log out of the server, or call a command-line tool, to perform the following operations
Download 🍎 Travis
# View the mirror source
gem sources -l
Add Ali image source, delete foreign image source, in order to download faster
gem sources --add http://mirrors.aliyun.com/rubygems/ --remove https://rubygems.org/
# download Travis
sudo gem install travis
Copy the codeOnce Travis downloads, we use it to encrypt the private key.
🍎 Encrypt the private key
We switch the path to the root directory of our project, CD/Users/hejialiang/Desktop/vue/pro – FrontEnd, of course, this is my directory, switch to your own project root directory, and then execute the following command, note that the project directory to Ronald Reagan. Git file, Otherwise there will be problems.
# --auto Automatically log in to github and enter your github password
travis login --auto
The --add parameter automatically writes environment variables to.travis.yml
sudo travis encrypt-file ~/.ssh/id_rsa --add
Copy the codeThis command generates an environment variable, $encrypted_844372f51C48_key, which holds the key and is stored in Travis CI, and is required for file decryption.
After the execution, there are two more parameters in the environment variable in the Travis website project Settings, and the following two lines are added in the before_install cycle in.travis. Yml, and the encrypted private key id_rsa.enc is generated in the root of the project
before_install:
- openssl aes-256-cbc -K $encrypted_31539db9e051_key -iv $encrypted_31539db9e051_iv
-in id_rsa.enc -out ~\/.ssh/id_rsa -d
Copy the codeLet’s remove the \ escape from the above ~\/. SSH /id_rsa -d. We don’t need this escape.
Tomato: Below is the complete travis.yml configuration
language: node_js
node_js:
- lts/* Set the language version. LTS means stable version
branches:
only:
- master Set which branch to listen on only
cache:
apt: true
yarn: true
directories:
- node_modules # Cache dependency
before_install:
- openssl aes-256-cbc -K $encrypted_844372f51c48_key -iv $encrypted_844372f51c48_iv
-in id_rsa.enc -out ~/.ssh/id_rsa -d # id_rsa.enc Private key for encryption
- chmod 600 ~/.ssh/id_rsa # Reduce permissions on id_rsa file
- echo -e "The Host 122.51.11.29 \ n \ tStrictHostKeyChecking no \ n" >> ~/.ssh/config # Add production server address to test machine trust list
install: # Install dependencies
- yarn
script: # Script to execute/deploy.sh addons: ssh_known_hosts: 122.51.11.29# Add SSH trust list
after_success: The # script phase is executed on successSCP - o stricthostkeychecking = no - r. / dist / * [email protected]: / home/WWW/blog# copy to service using SCP
Copy the codeSCP copies all resources from the Travis server dist directory to the deployment server’s /home/www/blog directory, which is the directory generated by your webpack.
Then push the code to Github and you’re done!
We can go to the Travis-ci website to see how the project is being built, and we can see the display of the script output.
6.1.4 Encountered Problems
1. The latest version of Ruby to download
I started to encrypt the private key on the Linux server, and downloaded Ruby on the Linux server. I used sudo yum install Ruby to download it, but it was not the latest version, it was 2.0.0 version, which caused a series of problems later. Do not use sudo yum install Ruby to download the latest version of the software. I have no problems with the 2.3.7 version of the software. Windows directly download the installation package can, there may be some problems, there are questions directly Baidu bar, generally have the answer.
On Linux, it is recommended to install the compiled source code
mkdir -p /usr/local/ruby # Create ruby directory
cd usr/local/ruby # enterWget HTTP: / / https://cache.ruby-lang.org/pub/ruby/2.7/ruby-2.7.0-preview1.tar.gz# downloadThe tar ZXVF - ruby - 2.7.0 - preview1. Tar. Gz# decompression
cd. / ruby - 2.7.0 - preview1. / configure -- prefix = / usr /local/ruby Configure and specify the installation location
make && make install # compile and install
ln -s /usr/local/ruby/bin/ruby /usr/local/bin/ruby Set global soft links
Copy the code2. Environment variables generated by private key encryption are faulty
$encrypted_31539DB9e051_key $encrypted_31539DB9e051_iv $Encrypted_31539DB9e051_iv $Encrypted_31539DB9e051_iv
We are looking at https://www.travis-ci.org/ instead of https://travis-ci.com/. The variables on the two sites cannot be synchronized unless the org environment variable is imported into the com site.
3. The upload to the server may time out
Because Travis is a foreign website, uploading to the domestic server may time out, you can configure the script in Travis. Yml to compress and upload it.
6.1.5 summary
Upload to github server is actually very simple, the key is uploaded to their own server will appear some problems, are basic installation package problems, if there is a problem can communicate with me, in the guide of the project introduction has contact information, see in the blogger hard output content, help my project point a star source address.
Build web full stack system and work in big factory