Azure DevOps CI/CD(Pipeline) for Vue.js Deployment with Shared Hosting(SiteGround) SSH

azure-pipeline.yml

# Node.js with Vue
# Build a Node.js project that uses Vue.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- master

pool:
  vmImage: ubuntu-latest

variables:
- group: 'SiteGround_SSH'
- name: 'remoteServer'
  value: 'ssh.yourdomain.uk'
- name: 'remoteUser'
  value: 'remote-user-name'
- name: 'remotePath'
  value: '/path/to/your/domain'
- name: 'sshKeyFileName'
  value: 'ssh_key_file'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

# Download SSH Key
- task: DownloadSecureFile@1
  name: sshKey
  displayName: 'Download SSH Key'
  inputs:
    secureFile: 'ssh_key_file'  # Make sure this is the private key

- script: |
    npm install
    npm run build
  displayName: 'npm install and build'

# SCP Frontend dist folder to Remote Server
- script: |
   echo "Secure File Path: $(sshKey.secureFilePath)"
   chmod 600 $(sshKey.secureFilePath)  # Fix permissions
   eval $(ssh-agent -s)  # Start the SSH agent
   mkdir -p ~/.ssh  # Ensure the .ssh directory exists
   touch ~/.ssh/known_hosts  # Ensure the known_hosts file exists
   ssh-keyscan -p 18765 $(remoteServer) >> ~/.ssh/known_hosts  # Add the remote server to the known hosts file
   echo "${azure_pipeline}" | ssh-add $(sshKey.secureFilePath) # Add the SSH key to the agent
   scp -P 18765 -r ./dist/* $(remoteUser)@$(remoteServer):$(remotePath)  # Use sshpass to pass the passphrase and perform the SCP operation
  displayName: 'SCP Frontend dist folder to Remote Server'
  env: 
    azure_pipeline: $(azure_pipeline)  # Passphrase for the SSH key