During my work and while building my personal portfolio website, I wrote an automated deployment workflow .yml file using GitHub Actions. This workflow implements automation from frontend code building to uploading to remote servers.

I learned that GitHub Actions supports automatic execution and manual triggering of workflows, and by configuring workflow_call to receive parameters, it enhances deployment flexibility.

Here’s a practical example of the workflow configuration:

name: Deploy to Production

on:
  push: # 自动触发
    branches:
      - master
  workflow_dispatch: # 手动触发

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '20.18.x'
        
    - name: Install dependencies
      run: yarn install
      
    - name: Build project
      run: yarn build
      env:
        MODE: production
        NAME: my-app
        
    - name: Deploy to server
      uses: appleboy/ssh-action@v0.1.5
      with:
        host: $
        username: $
        key: $
        script: |
          cd /path/to/app
          pm2 restart my-app

For example:

• Use actions/setup-node@v3 to set up the Node.js environment;
• Build the project through yarn build;
• Call upload.js to upload static files to OSS;
• Use the ssh-deploy component to upload packaged files to remote servers;
• Finally start the application through pm2.

This automated deployment workflow not only saves a lot of repetitive operations but also reduces the probability of errors during deployment.

Configuration Details

The role of each configuration line:

Trigger Configuration:

• push: Automatically triggers the workflow when code is pushed to the master branch
• workflow_dispatch: Allows manual triggering of the workflow from the GitHub Actions UI

Workflow Steps:

• workflow_call: Supports other workflows calling this process, and can also be used in manual deployments.
• matrix.node-version: Supports running on multiple Node versions; here set to 20.18.x.
• actions/checkout: Pull the current code.
• setup-node: Install the specified version of Node.
• yarn: Install dependencies.
• build: Build the project, supporting environment variables MODE and NAME.
• upload.js: Upload static files.
• ssh-deploy: Use SSH to transfer .output/ and pm2.config.js to remote servers.
• ssh-action: Log into the remote host and start the service using pm2.

Benefits and Challenges

If this automated workflow is not used, it would bring the following problems:

• Each build requires manual packaging and uploading, prone to errors;
• Lack of standardized deployment processes, not conducive to team collaboration;
• Repetitive work wastes time and is unsustainable.

Through CI/CD, not only does it improve efficiency, but it also makes it easier to trace back, adjust, and maintain deployment processes.

Conclusion

Summary:

Through using GitHub Actions, I mastered basic CI/CD practices. Automated deployment workflows are extremely critical for frontend project delivery, version control, and remote synchronization, and are an important component of modern frontend engineering.