使用docker+jenkins构建前端项目发布到nginx

1.准备环境

为了方便公司开发优化代码，不需要反复地将项目包发送给运维部署，我们对开发环境的前端项目利用jenkinsCI/CD进行自动化部署

需要两台服务器 一台jenkins 一台发布服务器,这里发布服务器 我直接使用开发环境的服务器 将admin界面与云计算展示界面部署上去

Jenkins服务器	192.168.5.123
docker+nginx	192.168.5.177

然后开始准备应用服务的部署

2.服务准备

2.1.nginx部署

首先在开发环境中利用docker部署nginx ，将nginx的发布页面路径映射到宿主机上，为了方便公司服务统一管理以及后期留存，统一使用docker-compose的方式部署

docker与docker-compose的安装方式自行百度

编写docker-compose.yaml文件

version: '3'

services:
  nginx:
    restart: always
    image: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./conf.d:/etc/nginx/conf.d
      - ./log:/var/log/nginx
      - ./html:/usr/share/www/html     

然后运行docker-compose文件

docker-compose up -d

这里我们可以看到刚才映射的nginx配置文件已经出现，我们修改一下nginx的配置文件，在conf.d下面创建nginx的子配置文件

vim zhanting.conf
server {
                listen  80;
                server_name  192.168.5.177;
location / {
        if ($request_filename ~* .*\.(?:htm|htmt|jpg|png|css|js|jpeg)$)
        {
           add_header Cache-Control "private, must-revalidate, no-cache, no-store, max-age=0";
        }
        root   /usr/share/www/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
location /api {
 proxy_pass       http://192.168.5.177:5000/manage;
}

}

然后保存退出，重启nginx容器，查看一下

docker ps -a

2.2.jenkins部署

这里我直接用公司本地环境的jenkins服务器，之前已经部署过可以参考jenkins部署文档

3.前端环境准备

因为我们是用jenkins构建前端项目 所以我们要准备NodeJS ，以及npm进行构建

3.1.NodeJS

3.1.1.插件下载

首先我们要在jenkins的客户端里下载NodeJS插件

3.1.2.全局配置

下载完成之后，我们进入全局配置界面，配置Nodejs的版本，这里我选择的是NodeJS 20.0版本，如果版本太老的话可能会提示npm版本太旧

配置完成保存退出即可

3.1.3.系统配置

进入系统配置我们要配置我们所需要发布的前端页面的主机名、主机地址、以及主机ip、用户名、发布录

配置完成之后，我们需要去对前端项目主机配置免密

jenkins机器操作 ，主要是让jenkins主机不用密码 就可以通过ssh访问前端项目主机 

id-copy-ssh 192.168.5.177
输入root用户密码

####注意：因为我们公司所使用的服务器都是ubuntu系统，root用户没有密码 所以我们得在前面加上用户，然后对用户提权确保登录的这个用户有root权限 

id-copy-ssh orangepi@192.168.5.177

普通用户提权

sudo usermod -aG sudo username

然后回到jenkins刚才的系统设置界面，点击test测试按钮，出现Success即可，如果不是或者报红的话就是jenkins和前端服务器的免密没做好

3.2.npm

可以通过npm镜像下载nodejs压缩包，并上传服务器 https://registry.npmmirror.com/binary.html?path=node

下载完成之后上传到服务器中，解压下载好的压缩包 ，然后配置node，npm的软连接

 tar -zxvf node-v20.0.0-linux-x64.tar.gz -C /opt/software
 ln -s /opt/software/node-v20.0.0-linux-x64/bin/node /usr/local/bin/node
 ln -s /opt/software/node-v20.0.0-linux-x64/bin/npm /usr/local/bin/npm
 node -v
 npm -v

centos7服务器使用nvm安装的node之后，只要使用npm或者node，均会出现以下问题 

npm -v
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

原因

查看系统内安装的glibc版本

然后再根据分析可得知 新版的node v18开始 都需要GLIBC_2.27支持，可是目前系统内却没有那么高的版本

strings /lib64/libc.so.6 |grep GLIBC_

GLIBC_2.2.5

...

GLIBC_2.17

....

解决办法

更新glibc

根据提示 安装所需要的glibc-2.28

wget http://ftp.gnu.org/gnu/glibc/glibc-2.28.tar.gz
tar xf glibc-2.28.tar.gz 
cd glibc-2.28/ && mkdir build  && cd build
../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin

可能出现的错误

上步更新glibc 可能会发生错误。

如果没有错误 下边这一步 不用看。

make问题

configure: error:

*** These critical programs are missing or too old: make bison compiler

*** Check the INSTALL file for required versions.

解决办法：升级gcc与make

升级GCC(默认为4 升级为8)</span>

yum install -y centos-release-scl
yum install -y devtoolset-8-gcc*
mv /usr/bin/gcc /usr/bin/gcc-4.8.5
ln -s /opt/rh/devtoolset-8/root/bin/gcc /usr/bin/gcc
mv /usr/bin/g++ /usr/bin/g++-4.8.5
ln -s /opt/rh/devtoolset-8/root/bin/g++ /usr/bin/g++

升级 make(默认为3 升级为4)

wget http://ftp.gnu.org/gnu/make/make-4.3.tar.gz
tar -xzvf make-4.3.tar.gz && cd make-4.3/
./configure  --prefix=/usr/local/make
make && make install
cd /usr/bin/ && mv make make.bak
ln -sv /usr/local/make/bin/make /usr/bin/make

 这时 所有的问题 都已经解决完毕 再重新执行上一步 更新glibc即可

cd /root/glibc-2.28/build
../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin

我的依旧报错：bison太老旧

configure: error:

*** These critical programs are missing or too old: bison

*** Check the INSTALL file for required versions.

看看我的bison版本多少

bison -v
-bash: bison: 未找到命令
yum install -y bison

 这时 所有的问题 真的真的都已经解决完毕 再重新执行上一步 更新glibc即可

cd /root/glibc-2.28/build
../configure --prefix=/usr --disable-profile --enable-add-ons --with-headers=/usr/include --with-binutils=/usr/bin

继续更新

make 和 make install在linux中就是安装软件的意思 简单这么理解就好。

make && make install

验证下 是不是好了

npm -v

如果还是出现下面的问题，要连接新的动态库

npm -v
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

用下面命令查看 

strings /usr/lib64/libstdc++.so.6 | grep CXXABI

更新libstdc++.so.6.0.26

更新lib libstdc++.so.6.0.26

替换系统中的/usr/lib64

cp libstdc++.so.6.0.26 /usr/lib64/
cd /usr/lib64/
ln -snf ./libstdc++.so.6.0.26 libstdc++.so.6

npm -v

4.构建项目

准备工作都做好了之后我们就可以开始构建项目了

 

 配置完成之后保存退出即可，当开发这边推送代码到gitlab代码仓库之后，jenkins触发自动构建

5.jenkins构建licloud-api

上面我们已经把前端项目准备好了 后面我们开始部署接口自动化部署

基本步骤同上 我们创建一个自由的自定义项目

 

这里要注意 构建完成之后执行的命令，和上面的前端项目的命令不一样 

然后保存退出即可