react项目_React 前端项目自动化构建、部署

React项目

     自动构建部署

随着微服务、容器、云计算的发展，近些年 DevOps、CI/CD 等概念越来越多地映入大家的眼帘。DevOps 是现在流行的一种软件开发方法，对传统软件应用生命周期的重构以支持敏捷开发和持续集成持续交付的一套方法论，DevOps打破原来的开发和运维之间的界限，将分离的两个流程融合到了应用的研发过程中，这些改变的目的是为了支持和适应应用快速、安全、可持续和频繁的版本发布。

本文记录对React web项目实现简单的持续集成、持续部署。

01

环境

■ 代码库GitLab

■ 自动化平台Jenkins(docker安装)

请在Jenkins插件中安装Gitlab插件

02

自动化配置

整体流程图

Step 1

添加构建镜像文件、自定义nginx配置文件

在你的项目中新建DockerFile、nginx.conf用于构建nginx镜像(nginx用于运行react项目)，如下：

然后将代码上传至GitLab仓库。

Step 2

Jenkins新建自动化软件项目

在Jenkins里面新建一个自由风格的软件项目，依次配置源码管理 - 构建触发器 - 构建环境 - 构建。

Jenkins项目配置

源码管理选择Git输入Repository和登陆验证、构建的分支

构建触发器选择Build when a change is pushed to GitLab，后面的地址GitLab webhook URL即是GitLab项目里通用-集成输入的webhook(同时需要高级里生成Secret token)

构建环境中选择Delete workspace before build starts(需要可以选择)

构建执行shell

如若主机没有Docker环境

Jenkins只是传统方式安装

请在Jenkins中安装Publish over SSH(或FTP)

执行Shell只需要保留开始构建项目那段

最后增加构建后操作

Send build artifacts over SSH(或FTP)

《传统自动化部署方式》

Step 3

GitLab项目集成webhook

在项目通用-集成界面填入构建触发器中的GitLab webhook URL & Secret Token，在Trigger中选择Push填入master分支上推送，点击add webhook完成集成 - push到master分支都会触发Jenkins项目流程。

点击测试按钮，当出现HTTP 200代表集成成功。

Hook executed successfully: HTTP 200

本文只是对DevOps中自动构建部署环节做了个简单的实现，比较适合小团队或者个人开发，省去频繁构建、发布的环节。