diff --git a/.github/workflows/build_docker.yml b/.github/workflows/build_docker.yml index 44e859ff..071b3729 100644 --- a/.github/workflows/build_docker.yml +++ b/.github/workflows/build_docker.yml @@ -11,7 +11,7 @@ name: Create and publish a dev Docker image on: push: - branches: ['main'] + branches: ["main"] env: REGISTRY: ghcr.io @@ -72,4 +72,3 @@ jobs: curl "https://pagespy.blucas.me/lark/ci?branch=$BRANCH_NAME&actionId=$GITHUB_RUN_ID" \ -X POST \ -H "token: $TOKEN" - diff --git a/.github/workflows/build_docker_hub.yml b/.github/workflows/build_docker_hub.yml new file mode 100644 index 00000000..dc1886ad --- /dev/null +++ b/.github/workflows/build_docker_hub.yml @@ -0,0 +1,73 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. + +# GitHub recommends pinning actions to a commit SHA. +# To get a newer version, you will need to update the SHA. +# You can also reference a tag or branch, but the action may change without warning. + +name: Docker hub Create and publish a dev Docker image + +on: + push: + branches: ["main"] + +env: + USER_NAME: huolalatech + IMAGE_NAME: page-spy-web + +jobs: + build-and-push-image: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Set Node.js 19.x + uses: actions/setup-node@v3 + with: + node-version: 19.x + + - name: Run install + uses: borales/actions-yarn@v4 + with: + cmd: install --ignore-optional + + - name: Build + run: | + yarn run build:client + cp -r dist backend/dist + + - name: Login to DockerHub + uses: docker/login-action@v2 + with: + username: ${{ env.USER_NAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + + - name: Extract metadata (tags, labels) for Docker + id: meta + uses: docker/metadata-action@v4 + with: + images: ${{ env.USER_NAME }}/${{ env.IMAGE_NAME }} + + - name: Build and push Docker hub image + uses: docker/build-push-action@v4 + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + + - name: Lark bot notify + env: + TOKEN: ${{ secrets.LARK_BOT_TOKEN }} + run: | + BRANCH_NAME=$(echo $GITHUB_REF | sed 's/refs\/heads\///') + curl "https://pagespy.blucas.me/lark/ci?branch=$BRANCH_NAME&actionId=$GITHUB_RUN_ID" \ + -X POST \ + -H "token: $TOKEN" diff --git a/.github/workflows/release_docker_hub.yml b/.github/workflows/release_docker_hub.yml new file mode 100644 index 00000000..95fdca54 --- /dev/null +++ b/.github/workflows/release_docker_hub.yml @@ -0,0 +1,79 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. + +# GitHub recommends pinning actions to a commit SHA. +# To get a newer version, you will need to update the SHA. +# You can also reference a tag or branch, but the action may change without warning. + +name: Docker hub Create and publish a Docker image + +on: + push: + branches: ["release"] +env: + USER_NAME: huolalatech + IMAGE_NAME: page-spy-web + +jobs: + build-and-push-image: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Set Node.js 19.x + uses: actions/setup-node@v3 + with: + node-version: 19.x + + - name: Run install + uses: borales/actions-yarn@v4 + with: + cmd: install --ignore-optional + + - name: Build + run: | + yarn run build:client + cp -r dist backend/dist + + - name: Login to DockerHub + uses: docker/login-action@v2 + with: + username: ${{ env.USER_NAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + + - name: Extract metadata (tags, labels) for Docker + id: meta + uses: docker/metadata-action@v4 + with: + images: ${{ env.USER_NAME }}/${{ env.IMAGE_NAME }} + + - name: Set up QEMU + uses: docker/setup-qemu-action@v2 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v2 + + - name: Build and push Docker image + uses: docker/build-push-action@v4 + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + platforms: linux/amd64,linux/arm64,linux/arm/v7 + + - name: Lark bot notify + env: + TOKEN: ${{ secrets.LARK_BOT_TOKEN }} + run: | + BRANCH_NAME=$(echo $GITHUB_REF | sed 's/refs\/heads\///') + curl "https://pagespy.blucas.me/lark/ci?branch=$BRANCH_NAME&actionId=$GITHUB_RUN_ID" \ + -X POST \ + -H "token: $TOKEN" diff --git a/.github/workflows/version_docker_hub.yml b/.github/workflows/version_docker_hub.yml new file mode 100644 index 00000000..8a14deaa --- /dev/null +++ b/.github/workflows/version_docker_hub.yml @@ -0,0 +1,71 @@ +# This workflow uses actions that are not certified by GitHub. +# They are provided by a third-party and are governed by +# separate terms of service, privacy policy, and support +# documentation. + +# GitHub recommends pinning actions to a commit SHA. +# To get a newer version, you will need to update the SHA. +# You can also reference a tag or branch, but the action may change without warning. + +name: Docker hub Create and publish a Docker image + +on: + push: + tags: + - "v*.*.*" +env: + USER_NAME: huolalatech + IMAGE_NAME: page-spy-web + +jobs: + build-and-push-image: + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + + steps: + - name: Checkout repository + uses: actions/checkout@v3 + + - name: Set Node.js 19.x + uses: actions/setup-node@v3 + with: + node-version: 19.x + + - name: Run install + uses: borales/actions-yarn@v4 + with: + cmd: install --ignore-optional + + - name: Build + run: | + yarn run build:client + cp -r dist backend/dist + + - name: Login to DockerHub + uses: docker/login-action@v2 + with: + username: ${{ env.USER_NAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + + - name: Extract metadata (tags, labels) for Docker + id: meta + uses: docker/metadata-action@v4 + with: + images: ${{ env.USER_NAME }}/${{ env.IMAGE_NAME }} + + - name: Set up QEMU + uses: docker/setup-qemu-action@v2 + + - name: Set up Docker Buildx + uses: docker/setup-buildx-action@v2 + + - name: Build and push Docker image + uses: docker/build-push-action@v4 + with: + context: . + push: true + tags: ${{ steps.meta.outputs.tags }} + labels: ${{ steps.meta.outputs.labels }} + platforms: linux/amd64,linux/arm64,linux/arm/v7 diff --git a/README.md b/README.md index c1cc5802..b3d04afc 100644 --- a/README.md +++ b/README.md @@ -5,26 +5,32 @@ [release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json [download-img]: https://img.shields.io/npm/dw/%40huolala-tech/page-spy-api [download-url]: https://www.npmjs.com/package/@huolala-tech/page-spy-api -[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser%20SDK&color=orange +[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser&color=orange [browser-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-browser -[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp%20SDK&color=green +[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp&color=green [uniapp-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-uniapp -[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat%20SDK&color=green +[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat&color=green [wechat-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-wechat -[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay%20SDK&color=blue +[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay&color=blue [alipay-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-alipay -[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro%20SDK&color=blue +[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro&color=blue [taro-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-taro -[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony%20SDK&color=black +[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony&color=black [harmony-ver-url]: https://ohpm.openharmony.cn/#/cn/detail/@huolala%2Fpage-spy-harmony [sdk-build-img]: https://img.shields.io/github/actions/workflow/status/HuolalaTech/page-spy/coveralls.yml?logo=github&label=build [sdk-build-url]: https://github.com/HuolalaTech/page-spy/actions/workflows/coveralls.yml [sdk-coveralls-img]: https://img.shields.io/coverallsCoverage/github/HuolalaTech/page-spy?label=coverage&logo=coveralls [sdk-coveralls-url]: https://coveralls.io/github/HuolalaTech/page-spy?branch=main -[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API%20version +[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API [api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags [api-go-img]: https://img.shields.io/github/go-mod/go-version/HuolalaTech/page-spy-api?label=go [api-go-url]: https://github.com/HuolalaTech/page-spy-api/blob/master/go.mod +[node-deploy]: https://img.shields.io/badge/Node_Deploy-Install-CB3937 +[node-deploy-url]: https://pagespy.org/#/docs/deploy-with-node +[docker-deploy]: https://img.shields.io/badge/Docker_Deploy-Install-1E63ED +[docker-deploy-url]: https://pagespy.org/#/docs/deploy-with-docker +[bt-deploy]: https://img.shields.io/badge/BT_Deploy-Install-20a53a +[bt-deploy-url]: https://pagespy.org/#/docs/deploy-with-baota
@@ -36,12 +42,14 @@ [![Build Status][sdk-build-img]][sdk-build-url]
[![Browser SDK version][browser-ver-img]][browser-ver-url] [![Wechat SDK version][wechat-ver-img]][wechat-ver-url] -[![Alipay SDK version][alipay-ver-img]][alipay-ver-url]
+[![Alipay SDK version][alipay-ver-img]][alipay-ver-url] [![UniApp SDK version][uniapp-ver-img]][uniapp-ver-url] [![Taro SDK version][taro-ver-img]][taro-ver-url] -[![Harmony SDK version][harmony-ver-img]][harmony-ver-url]
-[![API Version][api-ver-img]][api-ver-url] -[![Go Version][api-go-img]][api-go-url] +[![Harmony SDK version][harmony-ver-img]][harmony-ver-url] +[![API Version][api-ver-img]][api-ver-url]
+[![Deploy with Node][node-deploy]][node-deploy-url] +[![Deploy with Docker][docker-deploy]][docker-deploy-url] +[![Deploy with Baota][bt-deploy]][bt-deploy-url] PageSpy - Remote debugging as seamless as local debugging. | Product Hunt PageSpy - Remote debugging as seamless as local debugging. | Hacker News diff --git a/README_JA.md b/README_JA.md index 30b28cb6..d2323f7f 100644 --- a/README_JA.md +++ b/README_JA.md @@ -5,26 +5,32 @@ [release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json [download-img]: https://img.shields.io/npm/dw/%40huolala-tech/page-spy-api [download-url]: https://www.npmjs.com/package/@huolala-tech/page-spy-api -[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser%20SDK&color=orange +[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser&color=orange [browser-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-browser -[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp%20SDK&color=green +[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp&color=green [uniapp-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-uniapp -[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat%20SDK&color=green +[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat&color=green [wechat-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-wechat -[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay%20SDK&color=blue +[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay&color=blue [alipay-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-alipay -[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro%20SDK&color=blue +[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro&color=blue [taro-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-taro -[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony%20SDK&color=black +[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony&color=black [harmony-ver-url]: https://ohpm.openharmony.cn/#/cn/detail/@huolala%2Fpage-spy-harmony [sdk-build-img]: https://img.shields.io/github/actions/workflow/status/HuolalaTech/page-spy/coveralls.yml?logo=github&label=build [sdk-build-url]: https://github.com/HuolalaTech/page-spy/actions/workflows/coveralls.yml [sdk-coveralls-img]: https://img.shields.io/coverallsCoverage/github/HuolalaTech/page-spy?label=coverage&logo=coveralls [sdk-coveralls-url]: https://coveralls.io/github/HuolalaTech/page-spy?branch=main -[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API%20version +[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API [api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags [api-go-img]: https://img.shields.io/github/go-mod/go-version/HuolalaTech/page-spy-api?label=go [api-go-url]: https://github.com/HuolalaTech/page-spy-api/blob/master/go.mod +[node-deploy]: https://img.shields.io/badge/Node_Deploy-Install-CB3937 +[node-deploy-url]: https://pagespy.org/#/docs/deploy-with-node +[docker-deploy]: https://img.shields.io/badge/Docker_Deploy-Install-1E63ED +[docker-deploy-url]: https://pagespy.org/#/docs/deploy-with-docker +[bt-deploy]: https://img.shields.io/badge/BT_Deploy-Install-20a53a +[bt-deploy-url]: https://pagespy.org/#/docs/deploy-with-baota
@@ -36,12 +42,14 @@ [![Build Status][sdk-build-img]][sdk-build-url]
[![Browser SDK version][browser-ver-img]][browser-ver-url] [![Wechat SDK version][wechat-ver-img]][wechat-ver-url] -[![Alipay SDK version][alipay-ver-img]][alipay-ver-url]
+[![Alipay SDK version][alipay-ver-img]][alipay-ver-url] [![UniApp SDK version][uniapp-ver-img]][uniapp-ver-url] [![Taro SDK version][taro-ver-img]][taro-ver-url] -[![Harmony SDK version][harmony-ver-img]][harmony-ver-url]
-[![API Version][api-ver-img]][api-ver-url] -[![Go Version][api-go-img]][api-go-url] +[![Harmony SDK version][harmony-ver-img]][harmony-ver-url] +[![API Version][api-ver-img]][api-ver-url]
+[![Deploy with Node][node-deploy]][node-deploy-url] +[![Deploy with Docker][docker-deploy]][docker-deploy-url] +[![Deploy with Baota][bt-deploy]][bt-deploy-url] PageSpy - Remote debugging as seamless as local debugging. | Product Hunt PageSpy - Remote debugging as seamless as local debugging. | Hacker News diff --git a/README_ZH.md b/README_ZH.md index 0250044b..fa845f98 100644 --- a/README_ZH.md +++ b/README_ZH.md @@ -5,26 +5,32 @@ [release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json [download-img]: https://img.shields.io/npm/dw/%40huolala-tech/page-spy-api [download-url]: https://www.npmjs.com/package/@huolala-tech/page-spy-api -[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser%20SDK&color=orange +[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser&color=orange [browser-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-browser -[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp%20SDK&color=green +[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp&color=green [uniapp-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-uniapp -[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat%20SDK&color=green +[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat&color=green [wechat-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-wechat -[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay%20SDK&color=blue +[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay&color=blue [alipay-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-alipay -[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro%20SDK&color=blue +[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro&color=blue [taro-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-taro -[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony%20SDK&color=black +[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony&color=black [harmony-ver-url]: https://ohpm.openharmony.cn/#/cn/detail/@huolala%2Fpage-spy-harmony [sdk-build-img]: https://img.shields.io/github/actions/workflow/status/HuolalaTech/page-spy/coveralls.yml?logo=github&label=build [sdk-build-url]: https://github.com/HuolalaTech/page-spy/actions/workflows/coveralls.yml [sdk-coveralls-img]: https://img.shields.io/coverallsCoverage/github/HuolalaTech/page-spy?label=coverage&logo=coveralls [sdk-coveralls-url]: https://coveralls.io/github/HuolalaTech/page-spy?branch=main -[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API%20version +[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API [api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags [api-go-img]: https://img.shields.io/github/go-mod/go-version/HuolalaTech/page-spy-api?label=go [api-go-url]: https://github.com/HuolalaTech/page-spy-api/blob/master/go.mod +[node-deploy]: https://img.shields.io/badge/Node_Deploy-Install-CB3937 +[node-deploy-url]: https://pagespy.org/#/docs/deploy-with-node +[docker-deploy]: https://img.shields.io/badge/Docker_Deploy-Install-1E63ED +[docker-deploy-url]: https://pagespy.org/#/docs/deploy-with-docker +[bt-deploy]: https://img.shields.io/badge/BT_Deploy-Install-20a53a +[bt-deploy-url]: https://pagespy.org/#/docs/deploy-with-baota
@@ -36,12 +42,14 @@ [![Build Status][sdk-build-img]][sdk-build-url]
[![Browser SDK version][browser-ver-img]][browser-ver-url] [![Wechat SDK version][wechat-ver-img]][wechat-ver-url] -[![Alipay SDK version][alipay-ver-img]][alipay-ver-url]
+[![Alipay SDK version][alipay-ver-img]][alipay-ver-url] [![UniApp SDK version][uniapp-ver-img]][uniapp-ver-url] [![Taro SDK version][taro-ver-img]][taro-ver-url] -[![Harmony SDK version][harmony-ver-img]][harmony-ver-url]
-[![API Version][api-ver-img]][api-ver-url] -[![Go Version][api-go-img]][api-go-url] +[![Harmony SDK version][harmony-ver-img]][harmony-ver-url] +[![API Version][api-ver-img]][api-ver-url]
+[![Deploy with Node][node-deploy]][node-deploy-url] +[![Deploy with Docker][docker-deploy]][docker-deploy-url] +[![Deploy with Baota][bt-deploy]][bt-deploy-url] PageSpy - Remote debugging as seamless as local debugging. | Product Hunt PageSpy - Remote debugging as seamless as local debugging. | Hacker News diff --git a/src/assets/image/producthunt.svg b/src/assets/image/producthunt.svg index 6c9e8688..3c2e9aec 100644 --- a/src/assets/image/producthunt.svg +++ b/src/assets/image/producthunt.svg @@ -15,7 +15,7 @@ - 22 + 26 diff --git a/src/assets/image/screenshot/baota-install.png b/src/assets/image/screenshot/baota-install.png new file mode 100644 index 00000000..0111ce58 Binary files /dev/null and b/src/assets/image/screenshot/baota-install.png differ diff --git a/src/assets/image/screenshot/baota-pagespy.png b/src/assets/image/screenshot/baota-pagespy.png new file mode 100644 index 00000000..8f99902e Binary files /dev/null and b/src/assets/image/screenshot/baota-pagespy.png differ diff --git a/src/pages/Docs/components/DeployNext/index.tsx b/src/pages/Docs/components/DeployNext/index.tsx new file mode 100644 index 00000000..2f1cb08f --- /dev/null +++ b/src/pages/Docs/components/DeployNext/index.tsx @@ -0,0 +1,34 @@ +import { useLanguage } from '@/utils/useLanguage'; +import SDKImg from '@/assets/image/screenshot/page-spy-sdks.png'; + +export const DeployNext = () => { + const [lang] = useLanguage(); + + if (lang !== 'zh') { + return ( + <> +

+ After deployment, you need to integrate the appropriate SDK into the + client. Go to the "Quick Start" section for more details. +

+

+ The SDK's role is to collect runtime information from the client + application and automatically send the collected data to the deployed + PageSpy service, which then forwards it to the debugging endpoint. +

+ + + ); + } + return ( + <> +

部署完成后,需要在客户端引入对应的 SDK,前往「快速上手」章节查看。

+

+ SDK + 的功能是负责收集客户端程序的运行时信息,并自动将收集的信息发送到上面部署的 + PageSpy 服务、再由其转发到调试端。 +

+ + + ); +}; diff --git a/src/pages/Docs/components/DocMenus/index.tsx b/src/pages/Docs/components/DocMenus/index.tsx index 7e91901e..32587d7d 100644 --- a/src/pages/Docs/components/DocMenus/index.tsx +++ b/src/pages/Docs/components/DocMenus/index.tsx @@ -2,7 +2,7 @@ import { langType, useLanguage } from '@/utils/useLanguage'; import { useNavigate, useParams } from 'react-router-dom'; import './index.less'; import clsx from 'clsx'; -import { memo, useEffect, useTransition } from 'react'; +import { Children, memo, useEffect, useTransition } from 'react'; import { useSidebarStore } from '@/store/doc-sidebar'; import { useShallow } from 'zustand/react/shallow'; import { TransitionLink } from '@/components/Transition'; @@ -25,15 +25,61 @@ export const DOC_MENUS = [ }, doc: 'introduction', }, + ], + }, + { + group: { + zh: '服务部署', + en: 'Deploy', + ja: 'Deploy', + ko: 'Deploy', + }, + children: [ + { + label: { + zh: '部署说明', + en: 'Guide', + ja: '使用説明', + ko: '사용 설명', + }, + doc: 'deploy-guide', + }, + { + label: { + zh: '使用 Node 部署', + en: 'Deploy with Node', + ja: 'Node を使用してデプロイ', + ko: 'Node로 배포', + }, + doc: 'deploy-with-node', + }, + { + label: { + zh: '使用 Docker 部署', + en: 'Deploy with Docker', + ja: 'Docker を使用してデプロイ', + ko: 'Docker로 배포', + }, + doc: 'deploy-with-docker', + }, { label: { - zh: '服务部署', - en: 'Deploy', - ja: 'Deploy', - ko: 'Deploy', + zh: '使用 宝塔 部署', + en: 'Deploy with Baota', + ja: '宝塔を使用してデプロイ', + ko: 'Baota로 배포', }, - doc: 'deploy', + doc: 'deploy-with-baota', }, + // { + // label: { + // zh: '使用 1Panel 部署', + // en: 'Deploy with 1Panel', + // ja: '1Panel を使用してデプロイ', + // ko: '1Panel로 배포', + // }, + // doc: 'deploy-with-1panel', + // }, ], }, { diff --git a/src/pages/Docs/md/deploy-guide.en.mdx b/src/pages/Docs/md/deploy-guide.en.mdx new file mode 100644 index 00000000..27c8579b --- /dev/null +++ b/src/pages/Docs/md/deploy-guide.en.mdx @@ -0,0 +1,14 @@ +import ApiImg from '@/assets/image/screenshot/page-spy-api.png'; + + + +One of the core capabilities of PageSpy is its service that connects the client and the debugging endpoint, and forwards messages between them. + +To ensure data security and ease of use, PageSpy offers a variety of complete, out-of-the-box deployment options. You can choose any deployment method that suits yourself. + +### Deployments#deployments + +- [Deploy with Node](./deploy-with-node) +- [Deploy with Docker](./deploy-with-docker) +- [Install on Baota](./deploy-with-bt) +- [Install on 1Panel](./deploy-with-1panel) diff --git a/src/pages/Docs/md/deploy-guide.zh.mdx b/src/pages/Docs/md/deploy-guide.zh.mdx new file mode 100644 index 00000000..4090d2a2 --- /dev/null +++ b/src/pages/Docs/md/deploy-guide.zh.mdx @@ -0,0 +1,14 @@ +import ApiImg from '@/assets/image/screenshot/page-spy-api.png'; + + + +用于连接客户端和调试端、并转发两端之间消息的服务是 PageSpy 的核心能力之一。 + +为了数据安全和方便使用,PageSpy 提供完整的、开箱即用的多种部署方案,各位开发者可以根据自己的情况选择任意一种部署方式。 + +### 多种部署方案#deployments + +- [使用 Node 部署](./deploy-with-node) +- [使用 Docker 部署](./deploy-with-docker) +- [在宝塔面板安装](./deploy-with-bt) +- [在 1Panel 安装](./deploy-with-1panel) diff --git a/src/pages/Docs/md/deploy-with-baota.en.mdx b/src/pages/Docs/md/deploy-with-baota.en.mdx new file mode 100644 index 00000000..3610ea1e --- /dev/null +++ b/src/pages/Docs/md/deploy-with-baota.en.mdx @@ -0,0 +1,25 @@ +import BaotaPageSpy from '@/assets/image/screenshot/baota-pagespy.png'; +import BaotaInstall from '@/assets/image/screenshot/baota-install.png'; +import { DeployNext } from '../components/DeployNext'; + +PageSpy supports one-click deployment in the Baota Panel's Docker appstore. + +### Prerequisites#prerequire + +Install the Baota Panel by visiting the [Baota Panel](https://www.bt.cn/new/index.html) official website and selecting the appropriate script for installation. + +### Installation#install + +1. Go to "Docker - App Store," find PageSpy, and click install. + + + +2. Set the basic information and click "Confirm." + + + +3. The panel will automatically initialize the app, which takes about 3 minutes. After initialization, the service will be accessible via port 6752. + +### Next#next + + diff --git a/src/pages/Docs/md/deploy-with-baota.zh.mdx b/src/pages/Docs/md/deploy-with-baota.zh.mdx new file mode 100644 index 00000000..df7fc6a5 --- /dev/null +++ b/src/pages/Docs/md/deploy-with-baota.zh.mdx @@ -0,0 +1,25 @@ +import BaotaPageSpy from '@/assets/image/screenshot/baota-pagespy.png'; +import BaotaInstall from '@/assets/image/screenshot/baota-install.png'; +import { DeployNext } from '../components/DeployNext'; + +PageSpy 支持在宝塔面板的 Docker 应用商店一键部署。 + +### 前提#prerequire + +安装宝塔面板,前往 [宝塔面板](https://www.bt.cn/new/index.html) 官网,选择对应的脚本下载安装。 + +### 安装#install + +1. 前往「Docker - 应用商店」中找到 PageSpy,点击安装。 + + + +2. 设置基本信息,点击 "确定"。 + + + +3. 面板会自动进行应用初始化,大概需要 3 分钟左右,初始化完成后即可通过 6752 端口访问。 + +### 接下来#next + + diff --git a/src/pages/Docs/md/deploy-with-docker.en.mdx b/src/pages/Docs/md/deploy-with-docker.en.mdx new file mode 100644 index 00000000..7a5e9cce --- /dev/null +++ b/src/pages/Docs/md/deploy-with-docker.en.mdx @@ -0,0 +1,18 @@ +import { EmbedVideo } from '../components/EmbedVideo'; +import { DeployNext } from '../components/DeployNext'; + +### Install#install + +```bash +docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest +``` + +After completion, open the browser and visit http://localhost:6752 to access the service. + +### Video tutorial#video + +{' '} + +### Next#next + + diff --git a/src/pages/Docs/md/deploy-with-docker.zh.mdx b/src/pages/Docs/md/deploy-with-docker.zh.mdx new file mode 100644 index 00000000..b189688a --- /dev/null +++ b/src/pages/Docs/md/deploy-with-docker.zh.mdx @@ -0,0 +1,18 @@ +import { EmbedVideo } from '../components/EmbedVideo'; +import { DeployNext } from '../components/DeployNext'; + +### 安装#install + +```bash +docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest +``` + +执行完成后,打开浏览器访问 http://localhost:6752 即可访问服务。 + +### 视频学习#video + +{' '} + +### 接下来#next + + diff --git a/src/pages/Docs/md/deploy-with-node.en.mdx b/src/pages/Docs/md/deploy-with-node.en.mdx new file mode 100644 index 00000000..85c3560e --- /dev/null +++ b/src/pages/Docs/md/deploy-with-node.en.mdx @@ -0,0 +1,22 @@ +import { EmbedVideo } from '../components/EmbedVideo'; +import { DeployNext } from '../components/DeployNext'; + +### Install#install + +```bash +yarn global add @huolala-tech/page-spy-api@latest && page-spy-api + +# Or using npm + +npm install -g @huolala-tech/page-spy-api@latest && page-spy-api +``` + +After completion, open the browser and visit http://localhost:6752 to access the service. + +### Vide tutorial#video + +{' '} + +### Next#next + + diff --git a/src/pages/Docs/md/deploy-with-node.zh.mdx b/src/pages/Docs/md/deploy-with-node.zh.mdx new file mode 100644 index 00000000..be2a9058 --- /dev/null +++ b/src/pages/Docs/md/deploy-with-node.zh.mdx @@ -0,0 +1,22 @@ +import { EmbedVideo } from '../components/EmbedVideo'; +import { DeployNext } from '../components/DeployNext'; + +### 安装#install + +```bash +yarn global add @huolala-tech/page-spy-api@latest && page-spy-api + +# 如果你使用 npm + +npm install -g @huolala-tech/page-spy-api@latest && page-spy-api +``` + +执行完成后,打开浏览器访问 http://localhost:6752 即可访问服务。 + +### 视频学习#video + +{' '} + +### 接下来#next + + diff --git a/src/pages/Docs/md/deploy.en.mdx b/src/pages/Docs/md/deploy.en.mdx deleted file mode 100644 index d96e806f..00000000 --- a/src/pages/Docs/md/deploy.en.mdx +++ /dev/null @@ -1,41 +0,0 @@ -import { EmbedVideo } from '../components/EmbedVideo'; -import ApiImg from '@/assets/image/screenshot/page-spy-api.png'; -import SDKImg from '@/assets/image/screenshot/page-spy-sdks.png'; - - - -One of the core capabilities of PageSpy is its service that connects the client and the debugging endpoint, and forwards messages between them. - -To ensure data security and ease of use, PageSpy offers a variety of complete, out-of-the-box deployment options. You can choose any deployment method that suits yourself. - -### Deploy Using Node#node - -```bash -yarn global add @huolala-tech/page-spy-api@latest - -# If you use npm - -npm install -g @huolala-tech/page-spy-api@latest -``` - -After installation, run `page-spy-api` in the terminal to start the service. Watch the video to learn how to deploy PageSpy using Node: - - - -### Deploy Using Docker#docker - -```bash -docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest -``` - -Watch the video to learn how to deploy PageSpy using Docker: - - - -### Next Steps#next - -After deployment, you need to integrate the appropriate SDK into the client. - -The SDK's role is to collect runtime information from the client application and automatically send the collected data to the deployed PageSpy service, which then forwards it to the debugging endpoint. - - \ No newline at end of file diff --git a/src/pages/Docs/md/deploy.zh.mdx b/src/pages/Docs/md/deploy.zh.mdx deleted file mode 100644 index 0552c6e3..00000000 --- a/src/pages/Docs/md/deploy.zh.mdx +++ /dev/null @@ -1,41 +0,0 @@ -import { EmbedVideo } from '../components/EmbedVideo' -import ApiImg from '@/assets/image/screenshot/page-spy-api.png' -import SDKImg from '@/assets/image/screenshot/page-spy-sdks.png' - - - -用于连接客户端和调试端、并转发两端之间消息的服务是 PageSpy 的核心能力之一。 - -为了数据安全和方便使用,PageSpy 提供完整的、开箱即用的多种部署方案,各位开发者可以根据自己的情况选择任意一种部署方式。 - -### 使用 Node 部署#node - -```bash -yarn global add @huolala-tech/page-spy-api@latest - -# 如果你使用 npm - -npm install -g @huolala-tech/page-spy-api@latest -``` - -安装完成之后,在终端中执行 `page-spy-api` 启动服务,查看视频学习使用 Node 部署 PageSpy: - - - -### 使用 Docker 部署#docker - -```bash -docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest -``` - -查看视频学习使用 Docker 部署 PageSpy: - - - -### 接下来#next - -部署完成后,需要在客户端引入对应的 SDK。 - -SDK 的功能是负责收集客户端程序的运行时信息,并自动将收集的信息发送到上面部署的 PageSpy 服务、再由其转发到调试端。 - - \ No newline at end of file diff --git a/src/pages/Docs/md/faq.en.mdx b/src/pages/Docs/md/faq.en.mdx index 9cb45c71..f3bcf600 100644 --- a/src/pages/Docs/md/faq.en.mdx +++ b/src/pages/Docs/md/faq.en.mdx @@ -1,5 +1,3 @@ - - import moduleImg from '@/assets/image/screenshot/module.png'; import dynamicInjectImg from '@/assets/image/screenshot/dynamic-inject.png'; import pnpmInstallImg from '@/assets/image/screenshot/pnpm-install.png'; @@ -20,8 +18,8 @@ Dependency and interaction diagram between PageSpy modules: ```js window.$pageSpy = new PageSpy({ // ... other configuration parameters - autoRender: false -}) + autoRender: false, +}); ``` ### Instantiation Parameters and Their Purposes?#init-params @@ -77,7 +75,7 @@ server { if ($scheme != https) { rewrite ^(.*)$ https://$host$1 permanent; } - + ssl_certificate /etc/letsencrypt/live/pagespy.jikejishu.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/pagespy.jikejishu.com/privkey.pem; @@ -134,12 +132,11 @@ After adjusting the configuration, restart nginx to access via the subpath. Duri ```js window.$pageSpy = new PageSpy({ // For example api: "example.com/pagespy" - api: "/", + api: '/', // For example clientOrigin: "https://example.com/pagespy" - clientOrigin: ":///" - -}) + clientOrigin: ':///', +}); ``` ### How Can the Debug Terminal Be Protected with Some Authentication Mechanism to Allow Access Only to Authenticated Developers? #basic-auth @@ -182,7 +179,7 @@ You can protect the server by setting an IP whitelist in nginx or using HTTP Aut proxy_set_header Connection "upgrade"; } - location ~ /(api|page-spy) { + location ~ /(api|page-spy|plugin) { proxy_pass http://127.0.0.1:6752; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; @@ -218,21 +215,21 @@ Refer to the following content: // @grant none // ==/UserScript== -(function() { - 'use strict'; +(function () { + 'use strict'; - var script1 = document.createElement('script'); - script1.setAttribute('crossorigin', 'anonymous'); - // Replace the SDK URL with the actual project URL - script1.src = 'https://pagespy.jikejishu.com/page-spy/index.min.js'; + var script1 = document.createElement('script'); + script1.setAttribute('crossorigin', 'anonymous'); + // Replace the SDK URL with the actual project URL + script1.src = 'https://pagespy.jikejishu.com/page-spy/index.min.js'; - var script2 = document.createElement('script'); - script2.textContent = 'window.$pageSpy = new PageSpy();'; + var script2 = document.createElement('script'); + script2.textContent = 'window.$pageSpy = new PageSpy();'; - document.head.prepend(script1); - script1.onload = () => { - document.head.appendChild(script2); - } + document.head.prepend(script1); + script1.onload = () => { + document.head.appendChild(script2); + }; })(); ``` @@ -302,8 +299,25 @@ When you execute page-spy-api via the NPM package deployment method in the comma "maxRoomNumber": 500, // Maximum allowed number of rooms "corsConfig": { "allowOrigins": ["https://test.huolala.com"], // Default configuration allows all domains for cross-origin requests - "allowHeaders": ["Origin", "Authorization", "Content-Length", "X-Request-Id", "Content-Type", "Referer", "User-Agent", "Host"], - "allowMethods": ["HEAD", "POST", "GET", "OPTIONS", "PUT", "DELETE", "UPDATE"], + "allowHeaders": [ + "Origin", + "Authorization", + "Content-Length", + "X-Request-Id", + "Content-Type", + "Referer", + "User-Agent", + "Host" + ], + "allowMethods": [ + "HEAD", + "POST", + "GET", + "OPTIONS", + "PUT", + "DELETE", + "UPDATE" + ], "exposeHeaders": ["X-Request-Id"] } } @@ -384,4 +398,4 @@ Due to historical reasons, Alipay Mini Program restricts access to global object ### Why are uploaded file logs missing? #offline-log - Uploaded file logs are by default saved for up to the latest 10 GB and 30 days, customizable via configuration modification. -- Uploaded logs are saved in the log directory under the runtime directory. In Docker runtime, if Docker is destroyed, logs will also be lost. Use directory mapping `-v ./log:/app/log -v ./data:/app/data` for persistence. \ No newline at end of file +- Uploaded logs are saved in the log directory under the runtime directory. In Docker runtime, if Docker is destroyed, logs will also be lost. Use directory mapping `-v ./log:/app/log -v ./data:/app/data` for persistence. diff --git a/src/pages/Docs/md/faq.zh.mdx b/src/pages/Docs/md/faq.zh.mdx index c4b7ebb8..94a6968a 100644 --- a/src/pages/Docs/md/faq.zh.mdx +++ b/src/pages/Docs/md/faq.zh.mdx @@ -1,5 +1,3 @@ - - import moduleImg from '@/assets/image/screenshot/module.png'; import dynamicInjectImg from '@/assets/image/screenshot/dynamic-inject.png'; import pnpmInstallImg from '@/assets/image/screenshot/pnpm-install.png'; @@ -15,14 +13,13 @@ PageSpy 模块间的依赖关系和交互示意图: - 浏览器 SDK 的兼容性目标设置的是 [`["chrome > 75","safari > 12", "> 0.1%", "not dead","not op_mini all"]`](https://github.com/HuolalaTech/page-spy/blob/main/packages/page-spy-browser/package.json#L66-L72),其他 SDK 可以前往各自的仓库查看; - 调试端主要是开发者使用,对于浏览器的新特性使用我们保持开放的态度。所以建议使用最新版本的浏览器,设置的兼容性目标是 [`["last 2 chrome version", "last 2 firefox version", "last 2 safari version"]`](https://github.com/HuolalaTech/page-spy-web/blob/main/package.json#L92-L96)。 - ### 如何隐藏 SDK 渲染的图标?#hide-logo ```js window.$pageSpy = new PageSpy({ // ... 其他配置参数 - autoRender: false -}) + autoRender: false, +}); ``` ### 实例化都可以传哪些参数,它们的作用分别是什么?#init-params @@ -78,7 +75,7 @@ server { if ($scheme != https) { rewrite ^(.*)$ https://$host$1 permanent; } - + ssl_certificate /etc/letsencrypt/live/pagespy.jikejishu.com/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/pagespy.jikejishu.com/privkey.pem; @@ -135,12 +132,11 @@ server { ```js window.$pageSpy = new PageSpy({ // 例如 api: "example.com/pagespy" - api: "/", + api: '/', // 例如 clientOrigin: "https://example.com/pagespy" - clientOrigin: ":///" - -}) + clientOrigin: ':///', +}); ``` ### 调试端如何加一些安全认证的保护,开发者通过认证才可以访问?#basic-auth @@ -184,7 +180,7 @@ window.$pageSpy = new PageSpy({ proxy_set_header Connection "upgrade"; } - location ~ /(api|page-spy) { + location ~ /(api|page-spy|plugin) { proxy_pass http://127.0.0.1:6752; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; @@ -199,7 +195,7 @@ window.$pageSpy = new PageSpy({ PageSpy 为大家准备了浏览器插件,插件提供了以下特性: -- 自动注入最新版本的 SDK; +- 自动注入最新版本的  SDK; - 自动完成实例化操作; - 提供注入的域名配置规则; @@ -220,21 +216,21 @@ PageSpy 为大家准备了浏览器插件,插件提供了以下特性: // @grant none // ==/UserScript== -(function() { - 'use strict'; +(function () { + 'use strict'; - var script1 = document.createElement('script'); - script1.setAttribute('crossorigin', 'anonymous'); - // 实际项目中请替换 SDK 的地址连接 - script1.src = 'https://pagespy.jikejishu.com/page-spy/index.min.js'; + var script1 = document.createElement('script'); + script1.setAttribute('crossorigin', 'anonymous'); + // 实际项目中请替换 SDK 的地址连接 + script1.src = 'https://pagespy.jikejishu.com/page-spy/index.min.js'; - var script2 = document.createElement('script'); - script2.textContent = 'window.$pageSpy = new PageSpy();'; + var script2 = document.createElement('script'); + script2.textContent = 'window.$pageSpy = new PageSpy();'; - document.head.prepend(script1); - script1.onload = () => { - document.head.appendChild(script2); - } + document.head.prepend(script1); + script1.onload = () => { + document.head.appendChild(script2); + }; })(); ``` @@ -305,8 +301,25 @@ SDK 可以对页面进行 “截图” 并发送到调试端,但由于: "maxRoomNumber": 500, //最大允许房间数量 "corsConfig": { "allowOrigins": ["https://test.huolala.com"], // 默认配置允许所有域名跨域 - "allowHeaders": ["Origin", "Authorization", "Content-Length", "X-Request-Id", "Content-Type", "Referer", "User-Agent", "Host"], - "allowMethods": ["HEAD", "POST", "GET", "OPTIONS", "PUT", "DELETE", "UPDATE"], + "allowHeaders": [ + "Origin", + "Authorization", + "Content-Length", + "X-Request-Id", + "Content-Type", + "Referer", + "User-Agent", + "Host" + ], + "allowMethods": [ + "HEAD", + "POST", + "GET", + "OPTIONS", + "PUT", + "DELETE", + "UPDATE" + ], "exposeHeaders": ["X-Request-Id"] } } @@ -387,5 +400,4 @@ SDK 可以对页面进行 “截图” 并发送到调试端,但由于: ### 为什么上传的文件日志不见了?#offline-log - 上传的文件日志默认最多保存最新的 10 G,以及 30 天,可以通过修改配置来自定义。 -- 上传日志保存在运行目录的 log 目录下,docker 运行时候,如果 docker 被销毁日志也会丢失,可以用目录映射 `-v ./log:/app/log -v ./data:/app/data` 来持久话。 - +- 上传日志保存在运行目录的 log 目录下,docker 运行时候,如果 docker 被销毁日志也会丢失,可以用目录映射 `-v ./log:/app/log -v ./data:/app/data` 来持久化。