build & deploy failure

Question

We are using Nunjucks and GitLab to create and deploy our project website.

Up until a week ago, there were no problems, but suddenly we noticed that the changes to the website would not take effect after building and deploying.

Once we modify something, we run npm run gulp all and if there are no errors, we open the webpages from within the dist folder to see if it all looks fine. If we are happy, we commit and push, which automatically triggers the GitLab CI/CD job and after a few minutes, the live website shows the changes.

Here is the code in our .gitlab-ci.yml

before_script:
  ##
  ## Run ssh-agent inside the build environment.
  ##
  - eval $(ssh-agent -s)

  ##
  ## Add the SSH key stored in SSH_PRIVATE_KEY variable to the agent store.
  ##
  - echo "$SSH_PRIVATE_KEY" | ssh-add - > /dev/null

  ##
  ## Create the SSH directory and give it the right permissions.
  ##
  - mkdir -p ~/.ssh
  - chmod 700 ~/.ssh

  ##
  ## Add Host Keys.
  ##
  - echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts
  - chmod 644 ~/.ssh/known_hosts

stages: 
  - build
  - deploy

prod_build:
  stage: build
  script:
    - echo "Build"
    - npm install --loglevel verbose
    - npm install natives@1.1.6
    - npm run gulp all
    - ls
  only:
    - master
  tags:
    - Sisyphus
  
prod_deploy:
  stage: deploy
  script:
    - echo "Deploy to webserver"
    - npm install --loglevel verbose
    - npm install natives@1.1.6
    - npm run gulp all
    - rsync -av dist/ blah@blahblah.com:/var/www/blah/ --delete
  allow_failure: false
  environment:
    name: deploy
  only:
  - master
  tags:
    - Sisyphus
  when: always

The above content has not changes. It all used to be fine. So, we have no clue why recently the process does not update the website.

This is the content of our gulpfile.js

var gulp = require('gulp') ;
var watch = require('gulp-watch') ;
var nunjucksRender = require('gulp-nunjucks-render');
var rev = require('gulp-rev');
var revRewrite = require('gulp-rev-rewrite');
var gulpClean = require('gulp-clean');

function clean() {
  return gulp.src('dist', { read: false, allowEmpty: true })
  // Renders template with nunjucks.
  .pipe( gulpClean() )
}

function renderNunjucks() {
  // Gets .html and .nunjucks files in pages.
  return gulp.src('pages/**/*.+(html|njk)')
  // Renders template with nunjucks.
  .pipe(nunjucksRender({
      path: ['templates', 'pages']
    }))
  // Outputs files in app folder.
  .pipe( gulp.dest('dist') )
}

function copyStatic() {
    return gulp.src('public/**/*')
  .pipe( rev() )
  .pipe( gulp.dest('dist') )
  .pipe( rev.manifest() )
  .pipe( gulp.dest('dist') );
}

function RevRewrite() {
  const manifest = gulp.src('dist/rev-manifest.json');
  return gulp.src('dist/**/*')
  .pipe( revRewrite({ manifest }) )
  .pipe( gulp.dest('dist') );
}

gulp.task('clean', clean);
gulp.task('nunjucks', gulp.series('clean', renderNunjucks))
gulp.task('copy', gulp.series('clean', copyStatic));
gulp.task('rev-rewrite', gulp.series('nunjucks', RevRewrite));
gulp.task('all', gulp.series(clean, gulp.parallel(copyStatic, renderNunjucks), RevRewrite));

Of course we have looked at the Jobs log files to see if there are any errors or red flags, but all seems to be OK, ending with a Job succeeded message.

What could possibly be the reason? We suspect some kind of failure to do proper cleanup, as sometimes we compare the dist and live website's pages (via inspecting them) and realize that, for example, the index.css file is empty, whereas it should contain the css stuff that we have put in it.

How do we find out if this is an update that broke the process or rsync not syncing and cleaning up, etc...?

Answer 1

Try adding a checksum to the end of your rsync command:

rsync -av dist/ blah@blahblah.com:/var/www/blah/ --delete --checksum

If the size and/or date of your file(s) are not changed for some reason, this usually happens...