Bitbucket pipeline - build Create-react-app, zip it, upload it via ftp and unzip it on server

Question

I'm using a bitbucket pipeline to deploy my react application.

Right now my pipeline looks like this:

image: node:10.15.3

pipelines:
  default:
      - step:
          name: Build
          script:
          - npm cache clean --force
          - rm -rf node_modules
          - npm install
          - CI=false npm run deploy-app
          artifacts: # defining build/ as an artifact
          - 'build-artifact/**'
      - step:
          name: Deploy
          script:
            - apt-get update
            - apt-get install ncftp
            - ncftpput -v -u "$USERNAME" -p "$PASSWORD" -R $SERVER build 'build-artifact/*'
            - echo Finished uploading build

It works really well like this, but the ftp upload takes about 8 minutes, which is way to long because with the free plan of Bitbucket I can only use the pipeline feature for 50 minutes per month.

It seems like the uploads of every small file takes forever. That's why I thought that maybe uploading a single zip file will be way more performant.

So my question is: Is it really faster? And how it is possible to ZIP the artifact, upload the zip to the server and unzip it there?

Thanks for your help

score 2 · Answer 1 · answered Nov 25 '19 at 10:57

In fact, you should consider using another tool to upload file, for example rsync which has a couple of useful features, such as compression of the data. It also only uploads files that were changed from the previous upload, which is gonna speed up the uploads as well. You can use the rsync-deploy pipe for example:

script:
  - pipe: atlassian/rsync-deploy:0.3.2
    variables:
      USER: 'ec2-user'
      SERVER: '127.0.0.1'
      REMOTE_PATH: '/var/www/build/'
      LOCAL_PATH: 'build'
      EXTRA_ARGS: '-z'

Note the -z option passed via the EXTRA_ARGS. This will enable the data compression when transferring files.

score 0 · Answer 2 · answered Apr 25 '23 at 11:45

There's another option. First install zip-build:

npm install --save-dev zip-build

Then, in your build script (check help here https://www.npmjs.com/package/zip-build):

"build": "react-scripts build && zip-build -t your-zip-file.zip"

Then define your artifacts as your-zip-file.zip. However, if you are deploying to Azure, you might have to define the artifacts as dist/your-zip-file.zip. I'm not sure about the other servers. Here 'dist' is the default destination folder that was created while running the build command.

Bitbucket pipeline - build Create-react-app, zip it, upload it via ftp and unzip it on server

2 Answers2