github action을 통한 vercel 수동 배포 완전 정복 (with 모노레포)

apps ├── design-system ├── mildang-ui ├── app1 ├── app2 └── app3

echo "VERCEL_GIT_COMMIT_REF: $VERCEL_GIT_COMMIT_REF" # 기존 if [[ "$VERCEL_GIT_COMMIT_REF" =~ ^(stage|develop|production|beta|gs-certification|)$ ]]; then # 수정 if [[ "$VERCEL_GIT_COMMIT_REF" =~ ^(stage|develop|production|beta|gs-certification|feat.*|fix.*)$ ]]; then

name: Deploy To Vercel on: workflow_dispatch: inputs: package: description: '배포할 패키지를 선택하세요' required: true type: choice options: - app1 - app2 - app3 - app4 - app5 - app6 jobs: deploy: runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Set up Node.js uses: actions/setup-node@v2 with: node-version: '18' - name: Install dependencies run: node common/scripts/install-run-rush.js install --purge - name: Install Vercel CLI run: npm install -g vercel - name: Run Deploy Script env: VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_LINKS: ${{ secrets.VERCEL_LINKS }} BRANCH_NAME: ${{ github.ref_name }} run: | cd scripts/vercel-deploy npm run link:vercel ${{ github.event.inputs.package }} - name: List files in project root run: | ls -la cat .vercel/project.json - name: Deploy to Vercel run: vercel --token ${{ secrets.VERCEL_TOKEN }} -y

- name: Run Deploy Script env: VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }} VERCEL_LINKS: ${{ secrets.VERCEL_LINKS }} BRANCH_NAME: ${{ github.ref_name }} run: | cd scripts/vercel-deploy npm run link:vercel ${{ github.event.inputs.package }}

import { writeFileSync, mkdirSync } from 'fs'; import path from 'path'; const deploy = async () => { try { const packageName = process.argv[2]; const vercelLinksRaw = process.env.VERCEL_LINKS; const vercelLinks = JSON.parse(vercelLinksRaw); console.log(vercelLinks); if (!packageName || !vercelLinksRaw) { throw new Error('package name and vercelLinks are required'); } console.log('packageName', packageName); console.log('vercelLinksRaw', vercelLinksRaw); const project = vercelLinks[packageName]; if (!project) { console.error(`No project found for package: ${packageName}`); process.exit(1); } const { projectId, orgId } = project; if (!projectId || !orgId) { console.error(`projectId or orgId is missing for package: ${packageName}`); process.exit(1); } const projectRoot = path.resolve(__dirname, '../../'); const vercelDir = path.join(projectRoot, '.vercel'); mkdirSync(vercelDir, { recursive: true }); const projectJsonPath = path.join(vercelDir, 'project.json'); const projectJson = { projectId, orgId }; writeFileSync(projectJsonPath, JSON.stringify(projectJson, null, 2)); console.log(`.vercel/project.json created for package: ${packageName} at ${projectJsonPath}`); } catch (error) { console.error('Error parsing VERCEL_LINKS or writing project.json:', error); process.exit(1); } }; deploy().catch((err) => { console.error(err); process.exit(1); });

- uses: pnpm/action-setup@v4 with: run_install: false - name: Cache pnpm uses: actions/cache@v3 with: path: ~/.pnpm-store key: ${{ runner.os }}-pnpm-${{ hashFiles('pnpm-lock.yaml') }} restore-keys: | ${{ runner.os }}-pnpm- - name: Install Dependencies run: pnpm install --filter @<team>/vercel-deploy

- name: Install jq run: sudo apt-get install jq - name: Set Vercel Token Based on Actor id: set_token run: | VERCEL_TOKEN=$(echo '${{ secrets.VERCEL_TOKENS_BY_ACTOR }}' | jq -r '."${{ github.actor }}"') if [ -z "$VERCEL_TOKEN" ] || [ "$VERCEL_TOKEN" == "null" ]; then echo "No valid token found for ${{ github.actor }}, using default token." VERCEL_TOKEN=${{ secrets.VERCEL_TOKEN }} fi echo "VERCEL_TOKEN=$VERCEL_TOKEN" >> $GITHUB_ENV

<project-name>-git-<branch-name>-<scope-slug>.vercel.app;

- name: Deploy to Vercel And Extract URL id: deploy run: | DEPLOY_OUTPUT=$(vercel --token ${{ env.VERCEL_TOKEN }} -y) echo "$DEPLOY_OUTPUT" DEPLOY_URL=$(echo "$DEPLOY_OUTPUT" | grep -o 'https://[^ ]*.vercel.app') echo "Deployed URL: $DEPLOY_URL" echo "DEPLOY_URL=$DEPLOY_URL" >> $GITHUB_ENV env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }} - name: Map Package to Display Name run: | case "${{ github.event.inputs.package }}" in app1) VERCEL_DISPLAY_NAME="vercel-project-name1";; app2) VERCEL_DISPLAY_NAME="vercel-project-name2";; app3) VERCEL_DISPLAY_NAME="vercel-project-name3";; *) VERCEL_DISPLAY_NAME="unknown";; esac echo "VERCEL_DISPLAY_NAME=$VERCEL_DISPLAY_NAME" >> $GITHUB_ENV - name: Replace slash with dash in branch name run: | BRANCH_NAME="${{ github.ref_name }}" # Use sed to replace / with - CLEANED_BRANCH_NAME=$(echo "$BRANCH_NAME" | sed 's|/|-|g' | cut -c 1-63) echo "Branch name with dashes (max 63 chars): $CLEANED_BRANCH_NAME" echo "CLEANED_BRANCH_NAME=$CLEANED_BRANCH_NAME" >> $GITHUB_ENV - name: Set Vercel Alias based on Branch Name run: | ALIAS_URL="${{ env.VERCEL_DISPLAY_NAME }}-git-${{ env.CLEANED_BRANCH_NAME }}-<vercel team name>.vercel.app" vercel alias ${{ env.DEPLOY_URL }} $ALIAS_URL --token ${{ env.VERCEL_TOKEN }} --scope <vercel team name> echo "ALIAS_URL=$ALIAS_URL" >> $GITHUB_ENV

on: workflow_dispatch: inputs: # ...중략 change_logs: description: '배포 변경사항을 입력하세요. 입력 시 #deploy 채널에 알림이 갑니다. (\n으로 여러줄 입력)' required: false type: string

- name: Send Slack Notification (Success) if: success() run: | cd scripts/vercel-deploy npm run notify:success env: SLACK_WEBHOOK_URL_TO_RND_DEPLOY: ${{ secrets.SLACK_WEBHOOK_URL_TO_RND_DEPLOY }} SLACK_WEBHOOK_URL_TO_DEPLOY_NOTIFICATION: ${{ secrets.SLACK_WEBHOOK_URL_TO_DEPLOY_NOTIFICATION }} PACKAGE: ${{ github.event.inputs.package }} DEPLOY_URL: ${{ env.ALIAS_URL }} BRANCH_NAME: ${{ github.ref_name }} GITHUB_ACTOR: ${{ github.actor }} CHANGE_LOGS: ${{ github.event.inputs.change_logs }} - name: Send Slack Notification (Failure) if: failure() run: | cd scripts/vercel-deploy npm run notify:failure env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL_TO_DEPLOY_NOTIFICATION }} PACKAGE: ${{ github.event.inputs.package }} BRANCH_NAME: ${{ github.ref_name }} GITHUB_ACTOR: ${{ github.actor }} GITHUB_SERVER_URL: ${{ env.GITHUB_SERVER_URL }} GITHUB_REPOSITORY: ${{ env.GITHUB_REPOSITORY }} GITHUB_RUN_ID: ${{ env.GITHUB_RUN_ID }}