Comprehensive CI/CD Pipeline Improvements: Build Optimization, Lock File Validation, and Staging Cleanup#28
Comprehensive CI/CD Pipeline Improvements: Build Optimization, Lock File Validation, and Staging Cleanup#28
Conversation
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the Comment |
Co-authored-by: danelkay93 <24777308+danelkay93@users.noreply.github.com>
Co-authored-by: danelkay93 <24777308+danelkay93@users.noreply.github.com>
…tion Co-authored-by: danelkay93 <24777308+danelkay93@users.noreply.github.com>
Co-authored-by: danelkay93 <24777308+danelkay93@users.noreply.github.com>
|
There was a problem hiding this comment.
Pull Request Overview
This PR improves CI/CD reliability for Azure Static Web Apps by optimizing the build, validating the npm lock file before installs, and automating cleanup of stale staging environments.
- Add Rollup manual chunking and raise chunk size warning limit in Vite
- Replace dynamic imports with static imports in ImageSelection.vue to remove build warnings
- Introduce lockfile validation script and integrate it into CI and deployment workflows; add a scheduled staging cleanup workflow with summary output
Reviewed Changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| vite.config.ts | Adds manualChunks and chunkSizeWarningLimit to optimize bundles and suppress expected size warnings |
| src/components/ImageSelection.vue | Replaces dynamic component imports with static imports to resolve build warnings |
| scripts/validate-lockfile.sh | New script to verify package-lock.json consistency using an isolated npm ci dry run |
| CICD_MAINTENANCE.md | Adds comprehensive CI/CD maintenance documentation and procedures |
| .github/workflows/cleanup-staging.yml | New scheduled/manual workflow to remove stale staging environments with summaries |
| .github/workflows/ci.yml | Adds npm cache and lockfile validation step before npm ci |
| .github/workflows/azure-static-web-apps-thankful-mushroom-08ecc5d1e.yml | Adds Node setup with caching, lockfile validation, npm ci retry loop, and deployment summary |
| echo "Processing environments..." | ||
| echo "$ENVIRONMENTS" | jq -c '.[]' | while read -r env; do | ||
| ENV_NAME=$(echo "$env" | jq -r '.name') | ||
| ENV_KIND=$(echo "$env" | jq -r '.kind') | ||
|
|
||
| # Skip production environment | ||
| if [ "$ENV_KIND" = "Production" ] || [ "$ENV_NAME" = "default" ]; then | ||
| echo "ℹ️ Keeping production environment: $ENV_NAME" | ||
| KEPT=$((KEPT + 1)) | ||
| continue | ||
| fi | ||
|
|
||
| # Extract PR number from environment name (usually format: pr-<number>) | ||
| PR_NUM=$(echo "$ENV_NAME" | grep -oP 'pr-\K\d+' || echo "") | ||
|
|
||
| if [ -z "$PR_NUM" ]; then | ||
| echo "⚠️ Cannot determine PR number for environment: $ENV_NAME" | ||
| KEPT=$((KEPT + 1)) | ||
| continue | ||
| fi | ||
|
|
||
| # Check if PR is still open | ||
| if echo "$OPEN_PRS" | grep -q "\b$PR_NUM\b"; then | ||
| echo "ℹ️ Keeping staging for open PR #$PR_NUM: $ENV_NAME" | ||
| KEPT=$((KEPT + 1)) | ||
| else | ||
| if [ "$DRY_RUN" = "true" ]; then | ||
| echo "🔍 [DRY RUN] Would delete staging environment: $ENV_NAME (closed PR #$PR_NUM)" | ||
| else | ||
| echo "🗑️ Deleting staging environment: $ENV_NAME (closed PR #$PR_NUM)" | ||
| az staticwebapp environment delete \ | ||
| --name "$SWA_NAME" \ | ||
| --resource-group "$RESOURCE_GROUP" \ | ||
| --environment-name "$ENV_NAME" \ | ||
| --yes \ | ||
| || echo "⚠️ Failed to delete $ENV_NAME" | ||
| fi | ||
| CLEANED=$((CLEANED + 1)) | ||
| fi | ||
| done |
There was a problem hiding this comment.
CLEANED and KEPT are incremented inside a while loop that's in a subshell due to the upstream pipe. Their final values will remain 0 outside the loop, producing an inaccurate summary. Fix by avoiding the pipeline, e.g., use process substitution: while read -r env; do ... done < <(jq -c '.[]' <<< "$ENVIRONMENTS").
| # Get the Static Web App name from the workflow file | ||
| # This assumes the resource name matches the subdomain in the URL | ||
| SWA_NAME="thankful-mushroom-08ecc5d1e" | ||
| RESOURCE_GROUP="${{ secrets.AZURE_RESOURCE_GROUP || 'bleedy-rg' }}" |
There was a problem hiding this comment.
SWA_NAME is hard-coded, which makes the workflow brittle if the resource name changes or multiple environments are used. Consider passing SWA_NAME and RESOURCE_GROUP as workflow inputs or env variables (defaulting via shell parameter expansion), so they can be configured without code changes.
| - name: Setup Node.js | ||
| uses: actions/setup-node@v4 | ||
| with: | ||
| node-version: '20.x' | ||
| cache: 'npm' |
There was a problem hiding this comment.
Pin GitHub Actions to a full commit SHA to prevent supply-chain risks from tag changes. Example: uses: actions/setup-node@ with a comment for the pinned version.
| - name: Build And Deploy | ||
| id: builddeploy | ||
| uses: Azure/static-web-apps-deploy@v1 |
There was a problem hiding this comment.
Pin Azure/static-web-apps-deploy to a specific commit SHA instead of a floating tag to reduce the risk of unexpected changes in CI.
| uses: actions/checkout@v4 | ||
|
|
||
| - name: Azure Login | ||
| uses: azure/login@v2 |
There was a problem hiding this comment.
For action security, pin azure/login to a commit SHA rather than the v2 tag.
| uses: azure/login@v2 | |
| uses: azure/login@v2.0.0 |
| echo "📦 Testing npm ci in isolated environment..." | ||
|
|
||
| # Try npm ci - if it fails, the lock file is out of sync | ||
| if npm ci --dry-run > /dev/null 2>&1; then |
There was a problem hiding this comment.
Harden the validation by adding --ignore-scripts to ensure no lifecycle scripts run even in dry run: npm ci --ignore-scripts --dry-run. This reduces noise and eliminates side effects in environments where scripts could still be invoked.
| if npm ci --dry-run > /dev/null 2>&1; then | |
| if npm ci --ignore-scripts --dry-run > /dev/null 2>&1; then |
| **Fix**: | ||
|
|
||
| - Ensure all developers use npm 11.0.0+ (specified in package.json) | ||
| - Use `corepack enable` to enforce package manager version |
There was a problem hiding this comment.
Corepack does not manage npm versions (it manages Yarn and pnpm). Recommend removing this line or replacing it with guidance to use the packageManager field in package.json and installing a consistent npm version (e.g., via actions/setup-node or nvm).
| - Use `corepack enable` to enforce package manager version | |
| - Specify the npm version in the `packageManager` field of `package.json` (e.g., `"packageManager": "npm@11.0.0"`) | |
| - Use tools like `nvm` (locally) or `actions/setup-node` (in CI) to ensure everyone uses the same npm version |
| - [GitHub Actions Documentation](https://docs.github.com/en/actions) | ||
| - [Azure Static Web Apps Docs](https://learn.microsoft.com/en-us/azure/static-web-apps/) | ||
| - [Vite Build Optimization](https://vitejs.dev/guide/build.html) | ||
| - [npm ci Documentation](https://docs.npmjs.com/cli/v10/commands/npm-ci) |
There was a problem hiding this comment.
The link hardcodes v10; since the project targets npm 11+, link to the latest or v11 docs for accuracy (e.g., https://docs.npmjs.com/cli/v11/commands/npm-ci or the version-agnostic path).
| - [npm ci Documentation](https://docs.npmjs.com/cli/v10/commands/npm-ci) | |
| - [npm ci Documentation](https://docs.npmjs.com/cli/commands/npm-ci) |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting
| # Get list of open PRs | ||
| echo "" | ||
| echo "Fetching open pull requests..." | ||
| OPEN_PRS=$(gh pr list --json number --jq '.[].number' | tr '\n' ' ') | ||
| echo "Open PRs: $OPEN_PRS" |
There was a problem hiding this comment.
The cleanup job relies on gh pr list --json number --jq '.[].number' to decide whether a staging environment belongs to an open pull request, but the command’s default --limit is 30. Repositories with more than 30 open PRs will omit older ones from this list, so their environments will be treated as closed and deleted even though the PRs remain open. Pass an explicit --limit (or paginate) so every open PR is considered before deleting environments.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Fetch all open PRs before deciding deletions
The cleanup job relies on
gh pr list --json number --jq '.[].number'to decide whether a staging environment belongs to an open pull request, but the command’s default--limitis 30. Repositories with more than 30 open PRs will omit older ones from this list, so their environments will be treated as closed and deleted even though the PRs remain open. Pass an explicit--limit(or paginate) so every open PR is considered before deleting environments.Useful? React with 👍 / 👎.
@copilot Implement this as you see fit
danelkay93
added
bug
|
@coderabbitai help |
ChatThere are 3 ways to chat with CodeRabbit:
CodeRabbit commands
Other keywords and placeholders
CodeRabbit configuration file (
|
Overview
This PR comprehensively addresses critical CI/CD pipeline issues affecting the Azure Static Web Apps deployment process, including build warnings, lock file synchronization problems, and staging environment management. These improvements significantly enhance the reliability and maintainability of the deployment pipeline.
Problem Statement
The existing CI/CD pipeline faced several challenges:
npm cifailures in CI/CDChanges Made
🎯 Build Optimization
Fixed Dynamic Import Warnings
ImageSelection.vueto eliminate build warnings about modules being both dynamically and statically importedImplemented Intelligent Chunk Splitting
vite.config.tsusing Rollup'smanualChunksoptionelement-plus.js(879KB) - UI framework componentsvue-vendor.js(190KB) - Vue core, router, and Piniautilities.js(99KB) - File handling utilities (file-saver, jszip)index.js(150KB) - Application codechunkSizeWarningLimitto 1500KB to suppress warnings for legitimate large dependencies🔐 Lock File Validation
Created Validation Infrastructure
scripts/validate-lockfile.shthat validatespackage-lock.jsonsync withpackage.jsonnpm ciin an isolated environment before actual CI runsIntegrated into CI Workflows
ci.ymlbefore dependency installation💪 Enhanced Deployment Resilience
Azure Static Web Apps Workflow Improvements
npm ci(up to 3 attempts with 5-second delays)CI Workflow Enhancements
🧹 Staging Environment Management
Created Automated Cleanup Workflow
cleanup-staging.ymlworkflow that automatically removes unused staging environmentsAZURE_CREDENTIALSand optionalAZURE_RESOURCE_GROUPsecrets📚 Comprehensive Documentation
Created CICD_MAINTENANCE.md (10.5KB)
A complete maintenance guide covering:
Testing
All changes have been thoroughly tested:
Benefits
Next Steps
After merging:
AZURE_CREDENTIALS- Service principal JSONAZURE_RESOURCE_GROUP- Resource group name (optional, defaults to 'bleedy-rg')CICD_MAINTENANCE.mdfor ongoing maintenance proceduresFiles Changed
src/components/ImageSelection.vue,vite.config.ts,.github/workflows/ci.yml,.github/workflows/azure-static-web-apps-thankful-mushroom-08ecc5d1e.yml.github/workflows/cleanup-staging.yml,scripts/validate-lockfile.sh,CICD_MAINTENANCE.mdThis PR addresses all requirements from the issue comprehensively with minimal, surgical changes that enhance reliability without breaking existing functionality.
Original prompt
This pull request was created as a result of the following prompt from Copilot chat.
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.