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.
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
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 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
/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.
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