Push a folder from Bitbucket repo to public server using Pipelines

Question

I have pipelines enabled in my Bitbucket repository and I need to run Angular 2 build and deploy the dist folder (which gets created after the build command is executed) in my server after every build.

I have following in my bitbucket-pipelines.yml file:

image: node:4.6.0

pipelines:
  default:
    - step:
        script: # Modify the commands below to build your repository.
          - npm install
          - npm run build:prod

I found this code snippet on the Internet:

- apt-get update
- apt-get -qq install git-ftp
- git ftp push --user $FTP_USERNAME --passwd $FTP_PASSWORD ftp://123.456.789.123/timount/angular_app

I use a pem file to login to my server through the SSH client. So is the above code snippet useful? If not, how can I use the pem file in the above command?

To make it more clear, npm run build:prod command actually creates the dist folder, which needs to be deployed on the server at the above location. How can I achieve this?

Answer 1

1. Write this in bitbucket-pipelines.yml

image: node:8.7.0
pipelines:
  default:
    - step:
        name: Installation
        caches:
          - node
        script:
          - npm install
    - step:
        name: Building
        script:
          - npm install -g @angular/cli #need to install angular-cli to make build
          - npm run build --aot
    - step:
        name: Deployment
        script:
          - apt-get update
          - apt-get install ncftp
          - ncftpput -v -u "$FTP_USERNAME" -p "$FTP_PASSWORD" -R $FTP_HOST $FTP_SITE_ROOT dist/*
          - echo Finished uploading /dist files to $FTP_HOST$FTP_SITE_ROOT

2. Configure your bitbucket environment variables

Answer 2

Not the answer

I don't think Git FTP is what you want here. If you look at their website the reason its a product at all is to only deploy files that changed. My suspicion is that your dist folder will be recreated in its entirety each time you build. Even if that's not the case, they state:

It keeps track of the uploaded files by storing the commit id in a log file on the server. It uses Git to determine which local files have changed.

The Bitbucket Pipelines instances are ephemeral, so there's nowhere to store the log. That undermines the motivation for using git-ftp at all. I suppose you could push the log somewhere and retrieve it, but I would be surprised if that were worth your time.

Answer

I don't think there's anything particularly special about what you're trying to do - Angular and Git just happen to be involved, but you're just trying to move a folder from one machine to another. There are tons of software products that would be available to help you with that, but scp, which stands for Secure Copy, is one of the more popular ones which is included in many Linux distributions (what Docker container are you building off?). You can see numerous examples here, but essentially I think what you want to do comes down to:

scp -i /path/to/your/.pemkey -r /copy/from/path user@server:/copy/to/path

(Example taken from this StackOverflow question)

Note that you'll have to make sure the server you're going to is publicly accessible, otherwise there's no way to route from the Pipelines build to the target computer (so far as I know)

Answer 3

As I posted in this Github thread, while git-ftp is designed to only deploy tracked file changes, it is actually possible to deploy your entire dist folder on every commit, even if these files are untracked.

You first need to create a file called .git-ftp-include in the root of your repo, and add a single line with the path to your dist folder, ensuring you add ! to the start of the line:

!.vuepress/dist/

Then run the following command:

git ftp push --all --syncroot .vuepress/dist/

The --all uploads ALL your files (even unchanged ones), while --syncroot only uploads the files within the specified folder (uploading them to the root folder).