Day09-静态 HTML 的部署

部署静态的 HTML

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Gulp

部署过程可以使用指令(command line) 来完成

也可以整理成 shell script 的巨集来处理

也可以使用 python ....等等後端程序语言来实现

但是因为主要使用 Nodejs

一开始是使用 Grunt

但是後来就都改用 Gulp

这些都只是实现的一个手段

可以依据自己熟悉的程序语言做调整

这次主要的事情要把档案复制到远端的 Server 都某个资料夹里面

可以利用 gulp 的套件来完成(scp2, rsync, ftp....etc)

建立一个 gulpfile.js

const gulp = require('gulp');
const scp = require('gulp-scp2');

gulp.task('default', function() {
  return gulp.src('./index.html')
  .pipe(scp({
    host: 'aaa.bbb.ccc.ddd',
    username: 'username',
    password: 'password',
    dest: '/vaw/www/html/example'
  }))
  .on('error', function(err) {
    console.log(err);
  });
});

安装一下相关套件

  $ yarn add -D gulp gulp-scp2
  $ gulp default

这样就可以把档案复制到远端

在调整一下 .gitlab-ci.yml

stages:
  - copyToGoal

Prepare:Env:
  stage: copyToGoal
  script:
    - yarn install
    - gulp default

但是这样会把 server usernamepassword 记录在 repo 中

通常不会把这类敏感资料加到 git 内

所以就需要一些部署的环境变数

下个章节再来讨论一下


<<:  [Day9] 建立订单交易API_2

>>:  [DAY09] 部署用 Designer 做好的 Pipeline 到 Batch

六边形架构图

六边形架构图 (Hexagonal Architecture Diagram) 是一种用於软件设计的...

Proxmox VE 虚拟机管理操作 (二)

虚拟机的建置与操作已经来到基本使用的程度了,对於各种应用修改与尝试後可能伴随虚拟机被搞砸的风险。 ...

Vue.js 从零开始:元件

Vue 元件概念 Component元件,作为SPA的灵魂功能,可以将程序码以及模组封装起来,增加程...

[Day 03] 机器学习产品生命周期 — 救救我啊我救我

MLOps is an emerging discipline and comprises a s...

Day28 plugin

在专案中我们常常需要扩充功能,因此我们就可以使用插件,所以今天我们就要来学习如何使用 如何使用 可以...