返回

Travis-CI自动化测试,轻松部署到CentOS服务器

前端

  1. 前期准备

1.1 创建Git仓库

在开始之前,我们需要创建一个Git仓库来托管我们的前端工程代码。您可以使用Github或GitLab来创建您的仓库,本教程中我们将使用Github。

1.2 创建SSH Key

我们需要创建一个SSH密钥来连接到我们的部署服务器。SSH密钥是用来加密和解密通信的,可以帮助我们安全地访问远程服务器。

1.3 安装Travis-CI

Travis-CI是一款流行的持续集成和持续部署工具,可以帮助我们自动构建、测试和部署我们的代码。我们可以通过以下命令来安装Travis-CI:

gem install travis

1.4 创建Travis-CI配置文件

Travis-CI配置文件(.travis.yml)用于定义我们的测试和部署脚本。我们将使用以下内容作为我们的Travis-CI配置文件:

language: node_js
node_js:
  - "12"
script:
  - npm run test
deploy:
  provider: script
  script: npm run deploy
  on:
    branch: master

2. 自动化测试

2.1 安装测试框架

我们需要安装一个测试框架来对我们的前端工程进行测试。我们可以使用以下命令来安装Jest:

npm install --save-dev jest

2.2 编写测试脚本

我们需要编写测试脚本来测试我们的前端工程。我们可以使用以下代码作为我们的测试脚本:

describe("MyComponent", () => {
  it("should render correctly", () => {
    const wrapper = shallow(<MyComponent />);
    expect(wrapper).toMatchSnapshot();
  });
});

2.3 运行测试

我们可以使用以下命令来运行测试:

npm run test

3. 部署到CentOS服务器

3.1 准备部署服务器

我们需要准备一台CentOS服务器来部署我们的前端工程。我们可以使用阿里云、腾讯云或其他云服务提供商来租用服务器。

3.2 安装Nginx

我们需要在我们的服务器上安装Nginx来作为我们的Web服务器。我们可以使用以下命令来安装Nginx:

yum install nginx

3.3 安装Node.js和Vue.js

我们需要在我们的服务器上安装Node.js和Vue.js。我们可以使用以下命令来安装Node.js和Vue.js:

curl -sL https://rpm.nodesource.com/setup_12.x | bash -
yum install nodejs
npm install -g @vue/cli

3.4 部署前端工程

我们可以使用以下命令来部署我们的前端工程到服务器:

npm run build
scp -r build/* root@<your_server_ip>:/var/www/html/

3.5 访问前端工程

我们可以通过以下URL来访问我们的前端工程:

http://<your_server_ip>/

4. 总结

通过本教程,我们学习了如何使用Travis-CI来自动化测试并部署我们的前端工程到CentOS服务器。我们使用了Vue脚手架来构建我们的单页应用,并使用了Github来托管我们的项目。我们使用了SSH密钥来连接到我们的部署服务器,并使用了Travis-CI配置文件(.travis.yml)来定义我们的测试和部署脚本。我们还学习了如何安装和配置Nginx来作为我们的Web服务器。最后,我们学习了如何部署我们的前端工程到服务器并访问它。