界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
部署与运维 · SKILL.md

website-deploy

website-deploy

【部署与运维】Builds the React/Vite site, syncs to S3, and invalidates CloudFront cache. Uses the plugin's bundled deploy.sh script.

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: website-deploy description: Builds the React/Vite site, syncs to S3, and invalidates CloudFront cache. Uses the plugin's bundled deploy.sh script. allowed-tools: Bash, Read, Write, Edit, Glob

Website Deploy Skill

You are running the /grc-portfolio:deploy skill. Your job is to build the website and deploy it to the AWS infrastructure created by /grc-portfolio:infra.

Step 1: Locate and Validate Config

Find site-config.json:

  • Check $ARGUMENTS for a project directory path
  • Check the current working directory
  • Ask the user if not found

Read it and validate that status.infraDeployed === true. If not, tell the user to run /grc-portfolio:infra first.

Also validate that status.buildComplete === true. If not, tell the user to run /grc-portfolio:build first.

Extract needed values:

  • aws.bucketName
  • aws.distributionId
  • aws.profile
  • aws.contactApiEndpoint (if contact form enabled)
  • aws.cloudFrontUrl
  • aws.domain (if custom domain)

Step 2: Set Environment Variables (if contact form)

If features.contactForm is true and aws.contactApiEndpoint is set, ensure .env in the project directory contains:

VITE_CONTACT_API_ENDPOINT=<aws.contactApiEndpoint>

Update the file non-destructively — do not overwrite an existing .env:

  1. If .env does not exist, create it with just this line.
  2. If .env exists and already has a VITE_CONTACT_API_ENDPOINT= line, replace only that line.
  3. If .env exists but does not contain VITE_CONTACT_API_ENDPOINT=, append the line.

Preserve any other variables the user has set (e.g. VITE_GA_ID, analytics keys, feature flags).

Step 3: Build the Site

cd <projectDir>
npm run build

Verify the dist/ directory was created and contains files.

If the build fails, diagnose and fix the issue.

Step 4: Deploy to AWS

Use the toolkit's deploy script:

$TOOLKIT_DIR/scripts/deploy.sh <aws.bucketName> <aws.distributionId> <aws.profile>

Run this from the project directory (it expects dist/ in the current working directory).

Step 5: Verify Deployment

Wait a moment for CloudFront to propagate, then tell the user their site is live.

Provide the URL:

  • If custom domain: https://<aws.domain>
  • Otherwise: https://<aws.cloudFrontUrl>

Step 6: Update Config

Update site-config.json:

  • Set status.siteDeployed = true

Step 7: Summary

Tell the user:

  • The site is deployed and live
  • Provide the live URL
  • Note that CloudFront cache invalidation takes 1-2 minutes to fully propagate
  • Suggest running /grc-portfolio:repo to create a GitHub repo (if not done)
  • Suggest running /grc-portfolio:cicd to set up automatic deployments on push

Variables

  • $TOOLKIT_DIR = read from site-config.json toolkitDir field
  • $ARGUMENTS = arguments passed after /deploy (expected: project directory path)
我的收藏