linux安裝jenkins實現自動化部署nuxt.js、vue、egg

前情提要：最近幫朋友開發了一套網站，由於前后端都是自己一個人做，部署也是自己弄，所以在這里記錄下，下次再有需要部署的項目可以直接用，不用再去挨着查找文章；
我前台項目采用了nuxt.js框架，管理系統使用了vue框架，后台服務使用了node.js的egg框架，所以本篇文章將介紹在linux上安裝node.js、pm2、nginx、mongodb以及jekins等，以及相關配置實現自動化部署； 我的linux系統是 centos 7.6；

一、linux上安裝jdk（在linux控制台中執行下面命令）： 

yum install -y java-1.8.0-openjdk-devel.x86_64 #安裝命令
java -version  #查看版本

  # 你可以在 /usr/lib/jvm 目錄下找安裝目錄

 

二、linux安裝node.js  

2.1、node 下載 參考網站(https://blog.csdn.net/weixin_40861707/article/details/109455582);可以在這里查找你想安裝的版本

  cd /etc/sysconfig #進入到sysconfig目錄

  wget https: // nodejs.org/dist/v14.16.1/node-v14.16.1-linux-x64.tar.gz #下載安裝包

  tar -zxvf node-v14.16.1-linux-x64.tar.gz #解壓安裝包

2.2、為node與npm建立軟連接（注意紅色部分是否是你node的安裝路徑）

ln -s /etc/sysconfig/node-v14.16.1-linux-x64/bin/node /usr/bin/node
ln -s /etc/sysconfig/node-v14.16.1-linux-x64/bin/npm /usr/bin/npm

2.3、下載cnpm並建立軟連接

npm install -g cnpm --registry=https://registry.npm.taobao.org

ln -s /etc/sysconfig/node-v14.16.1-linux-x64/bin/cnpm /usr/bin/cnpm

2.4、服務器配置node環境變量（不配置jenkins無法正常執行pm2命令）

vim /etc/profile  # 打開配置文件  a鍵進入編輯模式

# 在最后面添加node環境變量（注意NODE_HOME后面的路徑是否為你node的安裝路徑）
export NODE_HOME=/etc/sysconfig/node-v14.16.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin

# 按Esc 后輸入 :wq 保存退出

source /etc/profile # 然后執行這個命令使配置文件立即生效

注意：上面方法新的shell或重啟服務器后無法使用之前配置的環境變量，要用需再次執行source /etc/profile讓它生效；永久環境變量添加的方法是需運行 vi ~/.bashrc 打開配置文件，添加環境變量； 再執行 source ~/.bashrc 立即生效；

 

您可能需要用到的命令;

whereis node-v14.16.1-linux-x64.tar.gz   #查詢安裝包路徑
pwd   #查看當前所處路徑
ln -s    #建立軟連接
ln -snf  #覆蓋軟連接
查看已經建立的軟連接： 在 /usr/local/bin/   目錄執行： ls -lR

 

三、linux安裝git 

yum install git

git version #查看git版本

whereis git #查看git安裝路徑

 

四、linux安裝nginx

4.1、確認系統屬否安裝了gcc、pcre-devel、zlib-devel、openssl-devel

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

4.2、安裝nginx

yum install nginx # 安裝命令

 
            
              nginx -v # 查看版本 
             
 
             
               rpm -ql nginx # 查看路徑 
              
/usr/sbin/nginx #啟動nginx 
              
 
              
#第一次啟動nginx失敗： 出現這種情況一般是80端口被占用，使用 sudo fuser -k 80/tcp 命令關閉80端口即可 參考： 
              https://www.cnblogs.com/xpybsh/p/13694748.html 
              
             
           

4.3、啟動成功后瀏覽地址訪問直接訪問IP

 

4.3、nginx常用命令

/usr/sbin/nginx -s stop #停止

/usr/sbin/nginx -s reload #重啟

nginx安裝目錄：/usr/local/nginx nginx

日志查看： vim /var/log/nginx/error.log 

打開nginx配置文件：vim /etc/nginx/nginx.conf 

測試配置文件是否正確：nginx -t 

 

  查看nginx位置：whereis nginx

 

 4.4、nginx配置（這里是我項目的配置，根據自己的項目差異配置會有差別）

運行 vim /etc/nginx/nginx.conf  打開配置文件后按a鍵進入編輯模式，配置以下內容后點擊Esc鍵輸入:wq保存后退出，再執行  nginx -t  檢查配置文件是否存在問題，

沒問題就執行： /usr/sbin/nginx -s reload 重啟nginx；

    upstream nodenuxt {
        server 127.0.0.1:3001; #nuxt項目
        keepalive 64;
    }
    server {
        listen 80; # 監聽端口80
        server_name  nuxt.xxx.com; # 匹配域名(前台nuxt項目)
         # 代理騰訊接口
        location ^~ /api/getonline {
             rewrite ^/api/(.*)$ /$1 break;
             proxy_pass https://webpresence.qq.com;
        }
        # 代理前台接口
        location ^~ /api/nk {
             proxy_pass http://127.0.0.1:7001;
        }
        # 代理管理系統接口
        location ^~ /api/yk {
             proxy_pass http://127.0.0.1:7001;
        }
        # 代理圖片地址
        location ^~ /public/avatar/upload {
             proxy_pass http://127.0.0.1:7001;
        }
        location / {
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_set_header Host $host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_cache_bypass $http_upgrade;
            proxy_pass http://nodenuxt; # 反向代理地址
        }

    }
    server {
        listen 80;
        server_name manage.xxx.cn; # 管理系統（vue項目）
        location / {
            autoindex on;
            root /home/webapps/manage;
            index index.html;
            try_files $uri $uri/ /index.html;
        }
        # 代理圖片地址
        location ^~ /public/avatar/upload {
             proxy_pass http://127.0.0.1:7001;
        }
        location = /favicon.ico {
            log_not_found off;
            access_log off;
        }
    }

 

 

 

五、linux安裝pm2

sudo cnpm install -g pm2  #安裝命令
sudo ln -s /etc/sysconfig/node-v14.16.1-linux-x64/bin/pm2 /usr/local/bin/ #建立軟連接（注意pm2的安裝地址）
vim /etc/profile #打開配置文件
export PM2_HOME=/root/.pm2/ #添加環境變量，加在配置文件最后按 Esc后輸入：wq保存退出
source /etc/profile # 然后執行這個命令使配置文件立即生效

pm2常用命令：

# 啟動項目
pm2 start npm --name "xxx" -- run start
# 查看所用已啟動進程：
$ pm2 list
# 重啟某一個進程：
$ pm2 restart XXX
# 停止某一個進程：
$ pm2 stop XXX
# 刪除某一個進程：
$ pm2 delete XXX
# 查看某個進程詳情
pm2 show 0 或者 # pm2 info 0 #查看進程詳細信息，0為PM2進程id

jekins  使用PM2 啟動項目后，在控制台無法看到進程的解決方案：
https://www.jianshu.com/p/3c628003a4e5

清空日志信息：pm2 flush

 

六、linux安裝MongoDB數據庫

我的后台服務數據存儲用到了mongodb。

注意：（首先服務器記得開放27017端口，否則后續無法啟動mogodb服務）

6.1、mongodb安裝

# 下載安裝包
wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.0.24.tgz
# 解壓
tar -zxvf mongodb-linux-x86_64-rhel70-4.0.24.tgz
# 刪除安裝包
rm -rf mongodb-linux-x86_64-rhel70-4.0.24.tgz
# 將解壓包拷貝到指定目錄重命名為mongodb
mv mongodb-src-r4.2.8  /usr/local/mongodb
# cd 移動到安裝目錄
cd /usr/local/mongodb/
# 創建mongodb數據存儲文件和日志文件
mkdir data
mkdir logs
cd ./logs
touch mongodb.log
cd ../
mkdir etc
cd etc
touch mongodb.conf

6.2、修改配置文件

# 打開配置文件
vim mongodb.conf

# 添加下列內容
·········································
#數據庫路徑
dbpath=/usr/local/mongodb/data
#日志輸出文件路徑
logpath=/usr/local/mongodb/logs/mongodb.log
#錯誤日志采用追加模式
logappend=true
#啟用日志文件，默認啟用
journal=true
#這個選項可以過濾掉一些無用的日志信息，若需要調試使用請設置為false
quiet=true
#端口號 默認為27017
port=27017
#允許遠程訪問
bind_ip=0.0.0.0
#開啟子進程
fork=true
#開啟認證，必選先添加用戶，先注釋（不用驗證賬號密碼）
#auth=true
·········································

#添加后按Esc輸入:wq保存退出
source mongodb.conf # 執行配置生效

6.3、配置mongodb環境變量

# 將mongodb服務加入環境變量
vi /etc/profile #打開配置文件

# 加在文件最后
export MONGODB_HOME=/usr/local/mongodb
export PATH=$PATH:/usr/local/mongodb/bin 

#添加后按Esc輸入:wq保存退出

source /etc/profile #執行配置生效

6.4、啟動mongodb服務(在mongodb的安裝目錄下的bin目錄下啟動服務)

cd /usr/local/mongodb/bin

./mongod --config /usr/local/mongodb/etc/mongodb.conf

查看mongodb是否已經啟動成功

netstat -lanp | grep "27017"

 

6.5、操作mongo數據庫、添加用戶、安全認證

配置了環境變量的前提下，任意目錄下，輸入命令mongo即可進入數據庫，否則需要在mongodb安裝目錄下的bin目錄下使用 ./mongo 命令

mongo
show dbs  # 查看當前所有數據庫。

use admin 
db
# 創建賬戶
db.createUser({user:"root",pwd:"admin001",roles:[{role:"root",db:"admin"}]})

6.6、授權成功后，關閉mongo服務

db.shutdownServer()

exit   #退出mondodb命令行

# 打開配置文件，放開auth=true注釋
vim /usr/local/mongodb/etc/mongodb.conf

source  mongodb.conf  #執行配置生效

# 啟動數據庫
cd /usr/local/mongodb/bin
./mongod --config /usr/local/mongodb/etc/mongodb.conf
# 進入mongodb命令行
mongo
show dbs # 此時看不到任何數據庫表，說明我們的安全認證用戶配置生效了
use admin  
db.auth('root','admin001') # 輸出1，說明驗證成功

 

mongodb插入一條數據（此項可忽略）

# 向用戶表添加一條初始用戶數據用於管理系統登錄
# use myDbData
# db.user.save({ name: 'admin', account: 'admin001', password: 'admin001',isDelete:NumberInt(0) })

客戶端遠程連接數據庫參考：https://blog.csdn.net/qq_41107231/article/details/108028319

 

七、在服務器上創建放項目代碼的目錄

cd /home
mkdir webapps   # 代碼全放這里/home/webapps
cd webapps # 進入該文件夾
mkdir client # 創建放前台項目的文件夾
mkdir manage # 創建放管理系統項目的文件夾
mkdir serve # 創建放服務端項目的文件夾

 

 

八、linux上安裝 jenkins

8.1、安裝jekins

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo

sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key

yum install jenkins

rpm -ql jenkins  # 查找jenkins安裝路徑

 

8.2、修改jenkins配置文件；修改默認端口與目錄權限

vim /etc/sysconfig/jenkins  # 打開jenkins配置文件  

打開配置文件后按 a 進入編輯模式，修改下方兩處：

$JENKINS_USER="root"
JENKINS_PORT="8080"

修改成功后按esc鍵輸入 :wq 保存退出。

8.3、運行下方命令啟動jenkins服務（出現OK表示Jenkins啟動成功）

service jenkins start

然后在瀏覽器輸入 你服務器的外網ip:8080 進入Jenkins登錄頁面。（注：訪問前確保服務器開放了8080端口）

 8.4、服務器控制台輸入下面命令找到jenkins密碼

tail /var/lib/jenkins/secrets/initialAdminPassword

在jekins網站中輸入密碼登錄后選擇要安裝的插件后進行安裝（可以選擇推薦安裝的插件）。

 

8.5、jekins中配置git插件地址（我自動部署jenkins會去拉我git倉庫的代碼）

打開jenkins主頁面–>系統管理–>全局工具配置  下面，在git一欄中name使用git即可, Path to Git executable 中填寫linux上git的安裝地址,(即whereis git的結果) 保存即可。

8.6、jenkins安裝node.js插件

在jenkins主頁面–>系統管理–>插件管理-> 選擇node.js經行安裝

安裝后：jenkins主頁面–>系統管理–>全局工具配置（配置下方信息）

 

 

 

 8.7、jekins新建任務與配置

在jekins首頁，點擊“新建任務”然后操作如下步驟：

 點保存后進入到任務配置界面，首先配置項目git倉庫地址;

然后配置任務構建環境：

 

 最后配置構建執行的shell：
1、vue項目的構建命令：

 

 2、nuxt.js執行的shell

rm -rf /home/webapps/client/*  # 刪除之前的所有文件
cnpm install # 安裝依賴
cnpm run build # 打包項目
tar czvf nuxt_build_web.tar.gz .nuxt static nuxt.config.js package.json config # 壓縮文件
mv ./nuxt_build_web.tar.gz /home/webapps/client # 移動壓縮包到指定目錄
rm -rf ./nuxt_build_web.tar.gz # 刪除當前文件夾下的壓縮包（jenkins目錄下的壓縮包）
cd /home/webapps/client # 移動到項目所在目錄
tar xzvf nuxt_build_web.tar.gz # 解壓壓縮包
rm -rf nuxt_build_web.tar.gz # 刪除壓縮包
cnpm install # 安裝依賴
source ~/.bashrc
source /etc/profile
pm2 restart "kangyu-nuxt-client"  # 重啟進程（非第一次構建執行這個命令重啟）
# pm2 start cnpm --name "kangyu-nuxt-client" -- run start # 使用pm2啟動項目(第一次構建時執行這個命令啟動)

3、egg項目構建執行的shell

BUILD_ID=DONTKILLME
rm -rf ./app/public/*  # 先刪除工作空間public下所有靜態資源
cp -R ./* /home/webapps/serve  # 拷貝工作空間中文件到指定目錄
cd /home/webapps/serve
cnpm install
cnpm run stop
cnpm run start

 

 

九、配置開機啟動命令（服務器重啟自動啟動某些項目）

9.1、開機pm2啟動nuxt項目

• 運行 pm2 startup，即在/etc/init.d/目錄下生成pm2-root的啟動腳本，且自動將pm2-root設為服務。
• 運行 pm2 save，會將當前pm2所運行的應用保存在/root/.pm2/dump.pm2下，當開機重啟時，運行pm2-root服務腳本，並且到/root/.pm2/dump.pm2下讀取應用並啟動。

9.2、開機啟動nginx、mogodb、egg

1、新建腳本文件

cd /home
mkdir custom
vi /home/custom/auto_run_script.sh

2、在腳本文件中添加需執行的shell

# 開機啟動nginx
/usr/sbin/nginx
# 開機啟動mogodb
sudo /usr/local/mongodb/bin/mongod --config /usr/local/mongodb/etc/mongodb.conf
# 開機啟動egg服務
cd /home/webapps/serve
cnpm run start

3、wq保存后執行下方命令賦予可執行權限

chmod +x /home/custom/auto_run_script.sh

4、將腳本添加到 /etc/rc.d/rc.local 文件中

$ vim /etc/rc.d/rc.local # 打開配置文件

/home/custom/auto_run_script.sh  #添加需要執行的腳本

$ source /etc/rc.d/rc.local # 生效

在Centos7下，rc.local文件開機默認是不執行的

必須運行 chmod +x /etc/rc.d/rc.local