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
+ 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 + +