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.

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

Copy content of public key and go back to remote server. Login as the same user which you have specified in SSH_USER GitLab’s variable. If you don’t have yet this user, it is time to create it.

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 /home/ddl/mnaddl/public_html/*"
    # deploy artifacts
    - scp -P22 -r storybook-static/* $SSH_USERNAME@$SSH_HOST:/home/ddl/mnaddl/public_html
  only:
    - develop
    - main
View Comments
There are currently no comments.

Leave a Reply