如何在不能连外网的服务器上部署vue项目

当前正在开发的项目中，需要部署vue前端代码。但是给了一台不能连外网的服务器。综合考虑下，采取的方案是先从一台可以连外网的服务器上下载好代码并打包好，然后将打包好的dist文件夹传给不能连外网的服务器。这其中有几个难点是以前没有做过的，特记录如下。

1、难点

（1）如何实现两台服务器间的免密ssh传输？
（2）如何实现git的免密ssh方式下载代码？
（3）shell脚本如何编写？

2、两台服务器间免密ssh传输

cd ~/.ssh
ssh-keygen -t rsa  //生成密钥和公钥
//生成特定的名称
//ssh-keygen -t rsa -f ssh-test
ssh-copy-id root@10.*.*,* //将公钥（名为id\_rsa.pub文件）追加到认证文件（名为authorized\_keys文件）
//连接特定的名称
//ssh-copy-id -i ~/.ssh/ssh-test.pub root@172.*.*.*
ssh root@10.*.*.* //测试是否连接成功
//连接特定的名称
ssh -i ~/.ssh/ssh-test root@10.*.*.*

3、gitlab的免密ssh 更新代码

cd ~/.ssh
ssh-keygen -q -f water-client-dev -P '' //再生成一堆密钥和公钥，公钥配到gitlab用户对应的设置。
//将公钥赋值到SSH keys里面。然后点击"Add key"生成print
cd 代码目录
eval "$(ssh-agent -s)"  
ssh-add ~/.ssh/water-client-dev
//加载密钥，就可以clone代码了~~

4、写脚本

#!/bin/bash
 # 
 # desc：前端构建脚本，从已有nodejs环境的服务器构建，并上传前端服务器。因前端服务器无法从依赖库下载所需依赖，需通过构建机中转。
 # preDefine:
 # 1、private key put in ~/.ssh/water-client-dev for passWord free remote login
 # 2、mkdir local and remote build path
 # 脚本位置：与前端项目同级根目录
 
eval "$(ssh-agent -s)" >>/dev/nul
ssh-add ~/.ssh/water-client-dev 2>>/dev/nul

origin_dictionary='/DATA/water/client/ui'
build_file_path="dist"
generated_tar_file_name="build.tar"
target_host="10.*.*.*"
target_dictionary="/DATA/water/client/"
target_host_user='root'
branch_name=$2

# 进入构建目录，即package.json所在目录
#cd tip
update_src(){
  echo "1、start update>>>>>>>"
  cd $origin_dictionary
  git pull

  # 如果设置branch参数，检查是否需要checkout
  if [[ -n "$branch_name" ]]; then
    git branch|grep "\* $branch_name"
    if [ $? -ne 0 ]; then echo "checkout new branch"; git checkout $branch_name;git pull; fi
  fi
  
  # git checkout .
  # git pull
  ssh-agent -k >>/dev/nul
  echo ">>>>>>>>update complete"
}

build_prj(){
  echo "2、start build>>>>>>>>"

  echo "check whether package.json updated"
  modified=$(find  $origin_dictionary/package.json -mmin -1)
  if [ -n "$modified" ]
  then
      echo "modified, run npm install"
      npm install --unsafe-perm
      if [ $? -ne 0 ]
      then
        exit 1;
      fi
  else
      echo "not modified"
  fi

  npm run build

  if [ $? -ne 0 ]
      then
        exit 1;
      fi

  echo ">>>>>>>>build complete"
}

update_src
build_prj

echo "3、start tar>>>>>>>>"
# remove old and tar new
if [ -e $generated_tar_file_name ]
then
    echo "file exist"
    echo "start remove file"
    rm -f $generated_tar_file_name
else
    echo "file not exist"
fi
echo "creating tar file"
tar -cf $generated_tar_file_name $build_file_path
echo "created succeed"
echo ">>>>>>>>tar complete"

echo "4、start upload to Remote server>>>>>>>>"
# scp -i  $generated_tar_file_name  root@$target_host:$target_dictionary
 scp  $generated_tar_file_name  root@$target_host:$target_dictionary
echo ">>>>>>>>upload complete"

echo "5、start untar at Remote server>>>>>>>>"
# remove old and untar new
 ssh root@$target_host "cd $target_dictionary;rm -rf $build_file_path;tar -xf $generated_tar_file_name ;exit;"
echo ">>>>>>>>update complete"

5、jenkins自动执行脚本

配置jenkins设置为，git代码已提交，就自动执行该脚本。
配置jenkins:

将红框中的链接复制到gitlab中的webhook页面中，gitlab调用Jenkins的url触发构建

在jenkins构建页面输入调用该脚本的命令

配置完后，就可以直接代码一更新，jenkins就自动调用脚本，完成代码的更新、打包和传输工作啦~~