Jenkins 安装

跟着安装教程直接一步步来点击查看Linxu安装

Nginx 安装

下载 nginx 安装包

进入官网下载nginx资源包 -- Nginx: download地址( 当前下载的是nginx-1.22.1 版本 )

工具安装

在安装nginx之前我们需要安装一些必须的依赖，为Nginx的安装做准备。

如 pcre 库（支持 rewrite 模块）、zlib 库（支持 gzip 模块）、openssl 库（支持 ssl 模块）等。

安装 gcc、gcc-c++、autoconf、automake

yum -y install gcc gcc-c++ autoconf automake

安装pcre依赖

yum -y install pcre pcre-devel

安装 zlib

yum -y install zlib zlib-devel

安装 openssl（支持 https 请求，如无需支持，可不安装）

yum -y install openssl openssl-devel

注意: 安装依赖若报错(如下图), 请确定当前服务器是否可以联网, 例如ping一个公网的ip: ping www.baidu.com

如果ping不通,就是上不了网, 找运维连接上网络后, 安装所需的依赖即可.

也可以进行安装包下载

ssl 功能需要 openssl 库下载地址: www.openssl.org/
gzip 模块需要 zlib 库下载地址: www.zlib.net/
rewrite 模块需要 pcre 下载地址: www.pcre.org/

将下载的安装包上传到 linux 中自己创建的文件夹下

安装顺序依次为：openssl、zlib、pcre, 最后安装nginx包。

openssl

tar -zxvf openssl-3.0.3.tar.gz 

cd openssl-3.0.3/

./config

make

make install

zlib

tar -zxvf zlib-1.2.12.tar.gz

cd zlib-1.2.12/

./configure 

make

make install

pcre

tar -zxvf pcre2-10.40.tar.gz

cd pcre2-10.40/

./configure 

make

make install

其他问题可参考网址: blog.csdn.net/S1901/artic…

创建安装目录

提前创建nginx安装目录, 例如/fast/nginx

# 进入根目录
cd  /
# 创建fast空目录
mkdir fast
# 进入fast目录
cd fast
# 创建nginx空目录
mkdir nginx

解压, 编译, 安装

选择文件管理并连接选择服务器，将 nginx-1.22.1.tar.gz 安装包拖拽至文件管理器中

然后返回终端, 将nginx-1.22.1.tar.gz移动到fast文件夹下:

# 进入fast文件夹
cd /fast
# 将nginx安装包移动到fast文件夹下
mv /home/nginx-1.22.1.tar.gz  .
# 解压 nginx-1.22.1.tar.gz
tar -xzvf nginx-1.22.1.tar.gz
# 进入解压目录
cd nginx-1.22.1
# 编译前的环境检测及相关配置
./configure  --prefix=/fast/nginx

(注意: ./configure 未指定 Nginx 安装目录，则会默认安装在 /usr/local/nginx 目录下（此目录需要 root 用户权限，否则安装会失败），如需指定安装目录，带上参数 --prefix={安装目录}，如：./configure --prefix=/fast/nginx，则会将 Nginx 安装在 /fast/nginx 目录下)

编译无误就执行编译安装

make && make install

执行完以上操作后，在 /fast/nginx 目录下会生成 conf、html、logs、sbin 这几个目录。

conf：存放 Nginx 的相关配置文件；

html：用于存放静态页面文件

logs：存放相关日志文件

sbin：Nginx 的启动命令存放在这里

Nginx常用命令

(注意: 使用Nginx常用命令,必须进入启动命令目录)

# 进入 Nginx 启动命令目录
cd /fast/nginx/sbin
# 启动Nginx
./nginx
# 停止Nginx
./nginx -s stop
# 重新加载nginx
./nginx -s reload
# 查看进程
ps -ef | grep nginx
# 查看Nginx版本号
./nginx -v

nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    client_max_body_size  20m;
    include mime.types;
    default_type application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        charset utf-8;

        location / {
            root   /usr/share/nginx/html/saas;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        location /api/ {
            proxy_pass http://xxx/;
        }
    }
}

Jenkins 使用

Jenkins 插件

Jenkins 提供了非常丰富的插件供我们使用

NodeJS

Publish Over SSH

使用该插件可以进行指定服务器配置，项目构建后可以将文件推送至对应服务器

Jenkins 任务

创建视图

在新建任务前可以先新建视图（类似于文件夹），便于以后任务进行管理

新建Item

点击新建的视图后，点击新建Item可以进行任务的创建,前端项目选择 Freestyle Project

项目新建完成后，可以添加一些描述进行项目说明

源码管理

源码管理可以选择 Git 或者 SVN, 这里使用 Git 进行配置

这里需要进行配置以下几项：

Repository URL （git项目地址）
Credentials (git登录凭证)
指定分支

其中git登录凭证可以使用账号密码、Api Token 和 SSH 密钥

构建触发器

选择 Build when a change is pushed to GitLab. GitLab webhook URL
点击下方高级选项最下方 Generate 生成对应 Secret token
打开 Git 代码管理页面
选择设置 - Webhooks
填写 URL (第一步)
填写 Secret token (第二步)
填写 Push events (源码管理中分支)
点击 Add webhook 进行添加

构建

点击构建
选择增加构建步骤 - Execute shell
输入构建命令(进行项目打包，压缩，可自行配置)

npm install yarn -g
yarn install
yarn build
# 只打包，然后删除文件夹。
tar -zcvf dist.tar.gz dist/
rm -rf dist/

构建后操作

点击构建后操作
选择增加构建后操作步骤（Send build artifacts over SSH）
配置 SSH Server Name (服务器名称)
配置 Transfer Set Source files (要上传到目标服务器的文件。它是一个相对路径，相对于 Jenkins 的工作目录, 直接填写压缩包名称：dist.tar.gz)
配置 Remove prefix (去前缀 - 本项目可以不配置)
配置 Remote directory (远程的静态资源托管目录, 例如：/fast/nginx/html/saas/)
配置 Exec command: (远程机执行 shell，由于配置服务器默认为 /，所以工作目录也是以 / 开始)

cd /fast/nginx/html/saas/
# 删除历史项目目录
rm -rf dist/
# 备份项目
cp -rf dist.tar.gz dist-old.tar.gz
# 解压文件
tar -zxvf dist.tar.gz

触发构建

配置完成，之后进行代码提交后便会触发 Jenkins 任务进行项目构建部署，也可手动点击 Build Now 进行项目构建

前端工程化之Jenkins部署项目