feat: Add workflow for PR preview deployment (#303)

This pull request introduces a new GitHub Actions workflow for generating and deploying a preview of the site when a pull request is made. 此 PR 引入了一个新的 GitHub Actions 工作流程，用于在创建 PR 自动部署网站的预览，可以更方便的检查文档站和组件效果。
arco-design · Nov 21, 2024 · dc4d2e9 · dc4d2e9
1 parent c3ceaf2
commit dc4d2e9
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 2 deletions.
diff --git a/.github/workflows/pr-preview.yml b/.github/workflows/pr-preview.yml
@@ -0,0 +1,83 @@
+name: PR Preview
+
+on:
+    pull_request:
+        branches:
+            - main
+
+jobs:
+    build-and-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: '16'
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Set ARCO_SITE_DOMAIN
+              run: echo "ARCO_SITE_DOMAIN=preview-${{ github.event.number }}-arco-design-mobile.surge.sh" >> $GITHUB_ENV
+
+            - name: Build site:home
+              run: npm run site:home
+              env:
+                  ARCO_SITE_DOMAIN: ${{ env.ARCO_SITE_DOMAIN }}
+
+            - name: Build site:pc
+              run: npm run site:pc
+              env:
+                  ARCO_SITE_DOMAIN: ${{ env.ARCO_SITE_DOMAIN }}
+
+            - name: Build site:mobile
+              run: npm run site:mobile
+              env:
+                  ARCO_SITE_DOMAIN: ${{ env.ARCO_SITE_DOMAIN }}
+
+            - name: Merge output directories
+              run: |
+                  # 合并文件
+                  cp -R output_resource/* output/page/
+                  # 创建目标目录
+                  mkdir -p merged_output/mobile/react/arco-design/pc
+                  mkdir -p merged_output/mobile/react/arco-design/mobile
+                  # 移动目录内容
+                  mv output/page/home/* merged_output/mobile/react/
+                  mv output/page/pc/* merged_output/mobile/react/arco-design/pc/
+                  mv output/page/mobile/* merged_output/mobile/react/arco-design/mobile/
+                  # 创建重定向 HTML 文件
+                  echo '<html><head><meta http-equiv="refresh" content="0; url=/mobile/react/arco-design/pc/" /></head><body></body></html>' > merged_output/index.html
+
+            - name: Install Surge
+              run: npm install --global surge
+
+            - name: Deploy to Surge
+              env:
+                  SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+                  ARCO_SITE_DOMAIN: ${{ env.ARCO_SITE_DOMAIN }}
+              run: |
+                  surge ./merged_output ${{ env.ARCO_SITE_DOMAIN }} --token $SURGE_TOKEN
+
+            - name: Find Comment
+              uses: peter-evans/find-comment@v2
+              id: fc
+              with:
+                  issue-number: ${{ github.event.pull_request.number }}
+                  comment-author: 'github-actions[bot]'
+                  body-includes: PR Preview Link
+
+            - name: Comment PR with Preview Link
+              uses: peter-evans/create-or-update-comment@v2
+              env:
+                  ARCO_SITE_DOMAIN: ${{ env.ARCO_SITE_DOMAIN }}
+              with:
+                  issue-number: ${{ github.event.pull_request.number }}
+                  comment-id: ${{ steps.fc.outputs.comment-id }}
+                  edit-mode: replace
+                  body: |
+                      ✨ **PR Preview Link**: [https://${{ env.ARCO_SITE_DOMAIN }}](https://${{ env.ARCO_SITE_DOMAIN }})
diff --git a/.gitignore b/.gitignore
@@ -17,6 +17,7 @@ yarn.lock
 # package-lock.json
 output/
 output_resource/
+merged_output/
 .history
 *.func-info.json
 *.mixin-info.json

diff --git a/sites/home/inject/inject.config.js b/sites/home/inject/inject.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    $siteDomain$: 'arco.design',
+    $siteDomain$: process.env.ARCO_SITE_DOMAIN ?? 'arco.design',
     $extraNavMenu$: '',
     $extraNavLink$: '',
     $footerFeedback$: '',

diff --git a/sites/pc/inject/inject.config.js b/sites/pc/inject/inject.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-    $siteDomain$: 'arco.design',
+    $siteDomain$: process.env.ARCO_SITE_DOMAIN ?? 'arco.design',
     $githubLink$: `{
         text: (
             <Tooltip content="Github" position="br">