(一)Docker + Nginx + Jenkins 部署 React

Jenkins 持续集成

另一篇文章介绍了 如何使用 Jenkins 部署 SpringBoot Jar

https://github.com/luokaiii/luokaiii.jenkins

一、下载并启动Jenkins

Jenkins 官网下载所需的版本,这里使用 Docker 容器部署 Jenkins war(你也可以直接使用 java -jar jenkins.war -httpPort=8080 来启动,这样的话直接进入 [填写密码(锚点)](#1. 填写密码) 即可。)。

注意:我们并没有使用 hub.docker.com 中提供的 jenkins/jenkins 这个镜像。因为我试了一下没装成功,哈哈。

在 war 包的同级目录下,编写 Dockerfile,如下:

FROM openjdk:8
VOLUME /tmp
COPY jenkins.war app.war
ENTRYPOINT ["java","-jar","app.war","--httpPort=8080"]

构建 jenkins 镜像

#使用Dockerfile构建jenkins镜像
docker build -t luokaiii.jenkins .

编写 jenkins 启动脚本, start.sh:

docker run \
  --name luokaiii.jenkins \
  -p 8080:8080 \
  -p 50000:50000 \
  -v jenkins_home:/var/jenkins_home \
  -d luokaiii.jenkins

注意:1. 需要给 start.sh 文件授权,否则无法执行;2. 通过 -v 命令将jenkins文件挂载到本地;

二、环境初始化

1. 填写密码

运行上面写的 start.sh 启动脚本,并打开 localhost:8080,稍等片刻就会提示我们输入初始密码。

进入 jenkins 容器,docker exec -it luokaiii.jenkins bash (如果提示有误,则可以使用 container 的 id 来进入),找到位于 /root/.jenkins/secrets/initialAdminPassword 的密码并填写进入。

2. 安装插件

密码输入成功后,会提示我们选择需要安装的插件,这里我选择的是社区推荐插件。对于新入门的用户来说,推荐的往往够用了。

[站外图片上传中...(image-c1bb9c-1564998203331)]

在插件安装完成之后,我们需要加入以下额外的插件:

  1. Publish Over SSH // 向服务器发送文件
  2. SSH // 需要 SSH 来连接服务器
  3. Config File Provider
  4. NodeJS // 因为我们的测试项目是使用 react 写的一个模拟项目,因此需要NodeJS 与 npm 进行编译

添加插件的目录为:Manage Jenkins > Manage Plugins > 可选插件

3. 新建一个管理员账户

创建账户

ok,安装成功,进入我们的正题。

欢迎来到 Jenkins

三、使用 SSH 登录服务器

配置 SSH Key 有两种方式,一种是在本地生成,然后将公钥发送至服务器;另一种是在服务器生成,将私钥拷贝至本地。(好像没啥区别啊)

1. 在本地电脑生成 SSH

  1. 打开命令行,生成ssh-key:ssh-keygen -t rsa
  2. 将ssh-key 发送至服务器:ssh-copy-id -i ~/.ssh/id_rsa.pub root@xxx.xxx.xxx.xxx
  3. 输入服务器密码,即可上传成功
  4. 验证登录:ssh root@xxx.xxx.xxx.xxx -i id_rsa
  5. 输入私钥的 password 即可

2. 服务器端生成 SSH

  1. 使用密码登录远程服务器
  2. 执行命令 ssh-keygen ,输入文件地址、密码等信息,如名为 ssh_rsa
  3. 将 生成的私钥拷贝出来,放到需要连接的电脑上(可以新建文件,把 ssh_rsa 的内容拷贝进去)
  4. 重设本地文件的权限 chmod 0600 ssh_rsa
  5. 开启 SSH Key 登录
    1. 在远程服务器中找到 /etc/ssh/sshd_config
    2. 将以下两个参数设置为 on(默认为on)
      1. RSAAuthentication on
      2. PubkeyAuthentication on
  6. 关闭 密码 登录(可选,前提是你要确保之前的私钥备份好了,不然可就无法登陆了)
    1. 将 PasswordAuthentication 改为 no
  7. 测试使用 SSH Key 登录服务器
    1. ssh root@xxx.xxx.xxx.xxx -p port -i ~/.ssh/id_rsa
    2. xxx.xxx.xxx.xxx 为服务器 ip 地址
    3. port 为服务器登录端口
    4. ~/.ssh/id_rsa 为本地私钥地址

四、配置SSH

进入 Manage Jenkins > Configure System,并作出以下两个修改:

1. SSH remote hosts

配置远程服务器

[站外图片上传中...(image-97835c-1564998203331)]

2.Publish over SSH

配置推送文件时的服务器配置,使用 ssh key

[图片上传失败...(image-f6b23c-1564998203331)]

五、配置完整的任务

新建一个 Freestyle project

手动狗头

设置源码仓库地址,并添加用户名密码、或 SSHKey 的凭证

[图片上传失败...(image-1bb05d-1564998203331)]

构建前的环境配置,指定服务器地址、#NodeJS版本

构建环境

执行构建,并打印 Node 与 NPM 的版本,来确定是否安装成功;指定 npm 仓库为taobao镜像,并进行编译(react 编译后的文件放在 /build 下,其他语言参照各自特性而定)

构建

构建完成后,就是把生成的 build 目录发送至服务器指定目录了。如果您使用了 nginx 作了静态代理,则只需将 build 后的文件发送至该目录即可。

[图片上传失败...(image-147d76-1564998203331)]

六、测试是否正确安装及配置

1. 随便修改点文件,提交至github上

2. 点击立即构建

立即构建

3. 打开控制台输出,查看日志

不出意外的话,控制台中会依次打印出一下日志(日志太长,这里就不贴了,仔细看一下应该都很好理解,也不是什么比较难的单词)

  1. git fetch --tags .... // 从远程拉取代码
  2. node -v ; npm -v // 打印的node版本
  3. npm install --registry... // 修改npm 镜像源
  4. npm run build // 开始构建
  5. [SSH] executing post build script // 连接并上传build目录

4. 重新访问项目地址

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342