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
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
- 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
/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 $FTPFOLDERPATH" # deploy artifacts - scp -P22 -r storybook-static/* $SSH_USERNAME@$SSH_HOST:$FTPFOLDERPATH only: - develop - main