Using GitHub Actions to Deploy Front‑end Projects: A Step‑by‑Step Guide

Front‑end deployment traditionally requires manual steps such as building, uploading to an Nginx directory, and restarting the server; repetitive changes quickly become burdensome. GitHub Actions provides a robot that automates these tasks, turning the process into a continuous integration pipeline.

GitHub Actions are predefined operations (checkout, test, deploy, etc.) that can be combined into workflows. The platform offers a runner with 2‑core CPU, 7 GB RAM, and 14 GB SSD, or you can self‑host runners for custom needs.

To deploy a front‑end project, select a repository, create a workflow under .github/workflows , and choose a template (e.g., Node.js). The generated node.js.yml can be renamed and extended with additional .yml files such as deploy.yml or test.yml .

# workflow name (optional)
name: Node.js CI
on:
  push:
    branches: [master]
  pull_request:
    branches: [master]
jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x, 15.x]
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: npm install
      - run: npm test
      - run: npm run build

Common configurations include creating a version tag with the Create Tag Release action and publishing a GitHub Pages site using peaceiris/actions-gh-pages@v3 . Example snippets are provided for each.

Docker can be added to improve portability and isolation. An Nginx configuration file ( vhost.nginx.conf ) and a Dockerfile are placed in the project root to build an image that serves the built files.

FROM nginx
COPY ./dist/ /usr/share/nginx/html/
# copy custom nginx config
COPY ./vhost.nginx.conf /etc/nginx/conf.d/bilibili-vue.conf
EXPOSE 80

The image is pushed to Alibaba Cloud Container Registry. Secrets for registry credentials are stored in GitHub Settings → Secrets, and the workflow logs in, builds, tags, and pushes the image, then SSHes into the server to run a deployment script.

docker login --username=${{ secrets.DOCKER_USERNAME }} registry.cn-hangzhou.aliyuncs.com --password=${{ secrets.DOCKER_PASSWORD }}
docker build -t bilibili-vue:latest .
docker tag bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
docker push registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest

A final shell script logs into the server, stops and removes the old container, pulls the new image, and starts it:

echo "---------docker Login--------"
docker login --username=$1 registry.cn-hangzhou.aliyuncs.com --password=$2
echo "---------docker Stop--------"
docker stop bilibili-vue
echo "---------docker Rm--------"
docker rm bilibili-vue
docker rmi registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo "---------docker Pull--------"
docker pull registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo "---------docker Create and Start--------"
docker run --rm -d -p 8081:80 --name bilibili-vue registry.cn-hangzhou.aliyuncs.com/zlyyyy/bilibili-vue:latest
echo "---------deploy Success--------"

After pushing code, the Actions tab shows real‑time workflow execution and logs for each step, confirming a successful automated deployment. The article concludes that this CI/CD setup eliminates manual updates, simplifies migrations, and can be extended with other cloud providers or internal automation systems.