1. 购买阿里云 ECS

在 阿里云 ECS（Elastic Compute Service）界面，购买一台虚拟服务器，购买注意事项是
付费模式：如果是实验性质 或 短期使用，选择 “按量付费” ，因为它随时可停 或 调整配置；在明确使用用途的情况下，选择“包年包月”，整体来说价格更划算。
实例配置：考虑到需要安装Jenkins作为构建服务器，Nginx作为Web服务器，我们选择稍好的配置 2核 + 8G。
镜像：选择 CenterOS，8.2 64位
新建安全组：配置80、443、22、8080端口。
创建密钥对并下载，记得保存密钥，除了密码登陆方式外，可以在使用密钥的方式登陆。
创建实力后不知道登陆密码，需要在管理中进行设置。
假定我们最终得到的机器的公网IP地址为：47.111.64.6

2. 创建Github项目并配置Webhook

在 Github 个人空间下新建一个由 create react app 创建的项目。
在 Setting 中的 Webhooks 中，创建一个Hook，触发地址填写为：http://47.111.64.6:8080/github-webhook/
注：8080为Jenkins的启动端口，/github-webhook/ 是 Github Integration 插件的识别路径（ 结尾/ 不能少）

3. SSH登陆到服务器并安装Jenkins和Nginx

Jenkins

本地Mac下通过 Terminal 到创建好的服务器上，安装Java、Git、Jenkins，然后启动Jenkins

  1. $ ssh root@47.111.64.6
  2. $ yum -y install java-1.8.0-openjdk.x86_64
  3. $ yum -y install git
  4. $ sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo
  5. $ sudo rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
  6. $ sudo yum install jenkins-2.238 -y
  7. $ systemctl start jenkins

启动Jenkins后，按照指引安装推荐的插件。
安装成功后，会提示默认密码存放地址，通过 less命令得到密码粘贴后进入系统，并设置用户名和密码，比如：admin、abcd1234。

Nginx

  1. $ yum install -y nginx
  2. $ systemctl start nginx
  3. $ cd /home
  4. $ mkdir webapps
  5. $ chown jenkins: /home/webapps

启动Nginx后，可以通过 ip地址的方式（默认在80端口）上测试是否成功。
然后通过 vim /etc/nginx/nginx.conf 打开配置文件，将root地址修改为 /home/webapps/note-web/build，这个地址是我们项目打包好后，拷贝到的位置。

4. 配置Jenkins Job

Jenkins的插件安装界面，安装 Nodejs 和 Github Integration 插件。
Jenkins的配置界面，把安装的 Nodejs 指定为全局的参数。
新建一个 freestyle 的 job，参数配置分别为：

  • Github类型，填入repo的地址
  • 代码管理选择Git，填入带 .git 后缀的地址
  • 触发方式选择 GitHook 的方式
  • 在构建参数中，选择配置的Nodejs环境
  • 在构建过程中，选择执行shell，其内容如下
    1. npm install
    2. npm run build
    3. cp -rf build/* /home/webapps/note-web
    启动创建的Job看到SUCCSS后，可以打开ip地址访问，看项目内容是否已经生效。
    手动修改代码，提交到Github上，Jenkins会被自动触发，重新构建打包，以及执行拷贝任务。