Rsync from Basics to Production: Frontend Project Automated Deployment

Hello everyone! Today I'll share a practical tutorial about rsync, focusing on automated deployment solutions. As developers, we frequently need to synchronize local files to servers, especially when deploying frontend projects after building. This article will start with rsync basics and conclude with a Vue3 project automated deployment solution.

I. What is rsync?

Rsync is a fast, versatile file copying tool for remote and local use. Its key features include:

Incremental transfer: only transfers modified parts
Compression support
Preserves file permissions and timestamps
Selective file exclusion
Resume capability for interrupted transfers

II. Basic Usage

2.1 Basic Syntax

rsync -avz /source_dir/ user@host:/destination_dir/

2.2 Common Parameters

-a: Archive mode, preserves all attributes
-v: Verbose output
-z: Compress during transfer
-P: Show progress
--delete: Remove files in destination that don't exist in source
--exclude: Exclude specific files

III. Advanced Techniques

3.1 Multiple File Exclusion

rsync -avz \
--exclude 'node_modules' \
--exclude '.git' \
--exclude '*.log' \
/source/ user@server:/dest/

3.2 Bandwidth Limiting

# Limit bandwidth to 1MB/s
rsync -avz --bwlimit=1000 /source/ user@server:/dest/

3.3 Resume Interrupted Transfers

rsync -avzP --partial /source/ user@server:/dest/

IV. Practical Case: Vue3 Project Automated Deployment

Let's implement a complete automated deployment solution for a Vue3 project.

4.1 Project Structure

my-vue3-project/
├── src/
├── dist/          # Build output directory
├── deploy.sh      # Deployment script
└── package.json

4.2 Deployment Script

Create deploy.sh:

#!/bin/bash

# Configuration
SERVER_USER="your-username"
SERVER_HOST="your-server-ip"
SERVER_PORT="22"
SERVER_PATH="/var/www/html/my-app"
DIST_PATH="./dist/"

# Color output functions
print_green() {
    echo -e "\033[32m$1\033[0m"
}

print_red() {
    echo -e "\033[31m$1\033[0m"
}

# 1. Deployment confirmation
read -p "Confirm deployment to production? (y/n) " -n 1 -r
echo
if [[ ! $REPLY =~ ^[Yy]$ ]]
then
    print_red "Deployment cancelled"
    exit 1
fi

# 2. Build project
print_green "Starting build process..."
npm run build

if [ $? -ne 0 ]; then
    print_red "Build failed!"
    exit 1
fi

# 3. Sync to server
print_green "Starting sync to server..."
rsync -avz --progress \
    --exclude '.git' \
    --exclude '.env' \
    --delete \
    -e "ssh -p ${SERVER_PORT}" \
    ${DIST_PATH} \
    ${SERVER_USER}@${SERVER_HOST}:${SERVER_PATH}

if [ $? -ne 0 ]; then
    print_red "Deployment failed!"
    exit 1
fi

print_green "Deployment successful! 🎉"

4.3 Configure package.json

Add deployment command to package.json:

{
  "scripts": {
    "deploy": "bash deploy.sh"
  }
}

4.4 Usage Instructions

Ensure rsync is installed on the server

# Ubuntu/Debian
sudo apt-get install rsync

# CentOS
sudo yum install rsync

Configure passwordless SSH login (recommended)

# Generate key pair
ssh-keygen -t rsa

# Upload public key to server
ssh-copy-id -i ~/.ssh/id_rsa.pub user@server

Execute deployment

npm run deploy

V. Advanced Optimization Tips

Add Environment Detection

# Add environment parameter in deploy.sh
ENV=$1
if [ "$ENV" != "prod" ] && [ "$ENV" != "test" ]; then
    print_red "Please specify correct environment: prod or test"
    exit 1
fi

Add Deployment Logging

# Record each deployment
echo "$(date '+%Y-%m-%d %H:%M:%S') - Deployed by $(whoami)" >> deploy.log

Add Backup Functionality

# Backup before deployment
BACKUP_DIR="/backup/$(date +%Y%m%d)"
rsync -avz ${SERVER_USER}@${SERVER_HOST}:${SERVER_PATH} ${BACKUP_DIR}

Add Health Check

# Check service after deployment
CHECK_URL="https://your-domain.com"
if curl -s --head ${CHECK_URL} | grep "200 OK" > /dev/null; then
    print_green "Service check passed"
else
    print_red "Service might be unstable, please check!"
fi

VI. Common Issues and Solutions

Permission Issues

Ensure correct permissions on target directory
Use sudo rsync or adjust directory permissions

Slow Synchronization

Use -z for compression
Set appropriate --bwlimit
Consider using --partial for resume capability

File Loss

Use --backup and --backup-dir for backups
Be careful with --delete parameter

Conclusion

Rsync is a powerful file synchronization tool that can significantly improve our development efficiency. Through this article's automated deployment solution, we can easily implement quick deployment of frontend projects. Here are some recommended practices:

Always test before deploying to production
Maintain good backup habits
Use rsync parameters appropriately
Establish complete deployment logging mechanisms

Rsync from Basics to Production Frontend Project Automated Deployment