Deploying Storybook via Gitlab Pipeline via SFTP

This is an update to my previous script to deploy Storybook to S3 via Gitlab Pipelines. We’re running a dev server on EC2 and I wanted to be able to deploy the project using SFTP. This assumes you already created a new user account on the FTP server.

Create an SSH key on your local machine and save it without a password using the following command:

sh-keygen -t ed25519 -C "GitLab SSH key"

You should have two new files in .ssh directory:

• id_ed25519 — private key
• id_ed25519.pub — public key

Add Key to Gitlab CI/CD Settings

Copy content of private key and go back to GitLab project. Navigate to Settings -> CI/CD -> Variables -> Expand -> Add Variable. GitLab’s variable is a key-value pair. Name key SSH_PRIVATE_KEY and paste private key in value field. Click Add Variable.

Add two more variables:

• SSH_USER — name of the user on the remote server
• SSH_HOST — IP address of remote server
• FTPFOLDERPATH – The path where to upload files too on your server.

Copy the contents of public key and go back to remote server. Login as the same user which you have specified in SSH_USER GitLab’s variable.

Add SSH Key to Server

Navigate to /home/<username>/.ssh. If directory .ssh doesn’t exist, then create it. Paste the public key into authorized_keys file. If you don’t have authorized_keys file, create it.

Add .gitlab.ci.yml

Important Note: I ended up using node:16 for my script because my instance of Storybook was using Webpack 4 and the node:latest was using Node 18 which wasn’t compatible. If you’re using webpack 5, you should be able to use a later version. I’m also using node:16 instead of alpine or buster because I ran into issues adding the SSH keys. I’ll work on optimizing this later for performance but it works.

image: node:16

stages:
  - build
  - deploy

build:
  stage: build
  script:
    - npm install
    - npm run build-storybook
  artifacts:
    paths:
      - storybook-static
  only:
    - develop
    - main
deploy:
  stage: deploy
  artifacts:
    paths:
      - storybook-static
  before_script:
    - "command -v ssh-agent >/dev/null || ( apt-get update -y && apt-get install openssh-client -y )"
    - eval $(ssh-agent -s)
    - echo "$SSH_PRIVATE_KEY" | tr -d '\r' | ssh-add -
    - mkdir -p ~/.ssh
    - chmod 700 ~/.ssh
    - ssh-keyscan $SSH_HOST >> ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
    - ls -la
  script:
    - echo "$SSH_USERNAME@$SSH_HOST"
    # clean up old storybook files
    - ssh -p22 $SSH_USERNAME@$SSH_HOST "rm -rf $FTPFOLDERPATH"
    # deploy artifacts
    - scp -P22 -r storybook-static/* $SSH_USERNAME@$SSH_HOST:$FTPFOLDERPATH
  only:
    - develop
    - main