From 00ba967685c2f4a237228f106b0725a5d71c6954 Mon Sep 17 00:00:00 2001 From: lapuda <577732344@qq.com> Date: Wed, 15 Jul 2026 08:46:40 +0800 Subject: [PATCH] Add utility functions for handling public URLs and update API base URL logic - Implement getProductionApiBaseUrl and normalizePublicUrl functions to manage API URLs based on the browser's origin. - Update API base URL in request configuration to use getProductionApiBaseUrl. - Enhance QR code handling in ParticipatingCompaniesTab and OutdoorFairList components to normalize URLs. - Create a deployment script for frontend builds and server uploads. - Add tests for the new URL utility functions. --- config/proxy.ts | 3 +- scripts/deploy-frontend.sh | 164 ++++++++++++++++++ src/app.tsx | 6 +- .../components/ParticipatingCompaniesTab.tsx | 7 +- src/pages/Jobfair/Outdoorfair/index.tsx | 7 +- src/utils/publicUrl.ts | 37 ++++ tests/utils/publicUrl.test.ts | 23 +++ 7 files changed, 241 insertions(+), 6 deletions(-) create mode 100755 scripts/deploy-frontend.sh create mode 100644 src/utils/publicUrl.ts create mode 100644 tests/utils/publicUrl.test.ts diff --git a/config/proxy.ts b/config/proxy.ts index e7ab963..1263c9a 100644 --- a/config/proxy.ts +++ b/config/proxy.ts @@ -17,8 +17,7 @@ export default { // localhost:8000/api/** -> https://preview.pro.ant.design/api/** '/api/': { // 要代理的地址 - target: localBackendUrl, - // target: 'http://39.98.44.136:6024/api/shihezi/', // 线上环境 + target: 'http://39.98.44.136:6024/api/shihezi/', // 线上环境 // target: 'http://wykj.cdwsx.com/api',// 后端 // target: 'http://ks.zhaopinzao8dian.com/api/ks', // 配置了这个可以从 http 代理到 https diff --git a/scripts/deploy-frontend.sh b/scripts/deploy-frontend.sh new file mode 100755 index 0000000..9adb625 --- /dev/null +++ b/scripts/deploy-frontend.sh @@ -0,0 +1,164 @@ +#!/usr/bin/env bash + +set -Eeuo pipefail + +ROOT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)" +BUILD_DIR="${BUILD_DIR:-${ROOT_DIR}/shihezi}" +DEPLOY_HOST="${DEPLOY_HOST:-39.98.44.136}" +DEPLOY_USER="${DEPLOY_USER:-root}" +DEPLOY_SSH_PORT="${DEPLOY_SSH_PORT:-22}" +DEPLOY_PATH="${DEPLOY_PATH:-/opt/service/project/shz-admin/dist}" +YARN_CMD="${YARN_CMD:-yarn}" + +SKIP_INSTALL=0 +DRY_RUN=0 + +info() { + printf '\033[1;32m%s\033[0m\n' "$*" +} + +error() { + printf '\033[1;31m%s\033[0m\n' "$*" >&2 +} + +die() { + error "$*" + exit 1 +} + +usage() { + cat <<'EOF' +用法： + ./scripts/deploy-frontend.sh + DEPLOY_USER=deploy DEPLOY_PATH=/var/www/shz-admin ./scripts/deploy-frontend.sh + +功能： + 1. 在本地安装依赖并执行 yarn build + 2. 使用 rsync 将本地构建产物上传到服务器 + 3. 校验服务器上的 index.html 是否存在 + +默认配置（均可通过环境变量覆盖）： + DEPLOY_USER SSH 用户名，默认 root + DEPLOY_PATH 服务器上的前端静态文件目录，默认 /opt/service/project/shz-admin/dist + DEPLOY_HOST SSH 主机，默认 39.98.44.136 + DEPLOY_SSH_PORT SSH 端口，默认 22 + BUILD_DIR 本地构建目录，默认 ./shihezi（由 config/config.ts 的 outputPath 决定） + YARN_CMD Yarn 命令，默认 yarn + +参数： + --skip-install 跳过本地依赖安装，直接构建 + --dry-run 只构建和检查，不连接服务器、不上传文件 + -h, --help 显示帮助 + +说明： + 脚本使用当前用户的 SSH key/agent，不在代码中保存密码。 + 如果服务器 SSH 端口不是 22，请设置 DEPLOY_SSH_PORT。 +EOF +} + +parse_args() { + while [[ $# -gt 0 ]]; do + case "$1" in + --skip-install) + SKIP_INSTALL=1 + ;; + --dry-run) + DRY_RUN=1 + ;; + -h|--help) + usage + exit 0 + ;; + *) + die "未知参数：$1（使用 --help 查看用法）" + ;; + esac + shift + done +} + +validate_config() { + [[ -n "$DEPLOY_USER" ]] || die "缺少 DEPLOY_USER，例如：DEPLOY_USER=root" + [[ -n "$DEPLOY_PATH" ]] || die "缺少 DEPLOY_PATH，例如：DEPLOY_PATH=/var/www/shz-admin" + [[ "$DEPLOY_SSH_PORT" =~ ^[0-9]+$ ]] || die "DEPLOY_SSH_PORT 必须是数字" + [[ "$DEPLOY_PATH" =~ ^/[A-Za-z0-9._/-]+$ ]] || die "DEPLOY_PATH 必须是安全的绝对路径：$DEPLOY_PATH" + + case "$DEPLOY_PATH" in + /|/opt|/opt/service|/var|/var/www|/usr|/usr/share|/usr/share/nginx|/usr/share/nginx/html) + die "拒绝使用过于宽泛的 DEPLOY_PATH：$DEPLOY_PATH" + ;; + esac +} + +install_dependencies() { + if [[ "$SKIP_INSTALL" == "1" ]]; then + info "跳过依赖安装" + return + fi + + if command -v "$YARN_CMD" >/dev/null 2>&1; then + info "安装前端依赖：$YARN_CMD install --frozen-lockfile" + "$YARN_CMD" install --frozen-lockfile + elif command -v npm >/dev/null 2>&1; then + info "未找到 Yarn，使用 npm 安装依赖" + if [[ -f package-lock.json ]]; then + npm ci + else + npm install --no-package-lock + fi + else + die "未找到 yarn 或 npm" + fi +} + +build_frontend() { + if command -v "$YARN_CMD" >/dev/null 2>&1; then + info "开始本地构建前端：$YARN_CMD build" + "$YARN_CMD" build + elif command -v npm >/dev/null 2>&1; then + info "未找到 Yarn，使用 npm run build 构建前端" + npm run build + else + die "未找到 yarn 或 npm" + fi + + [[ -f "${BUILD_DIR}/index.html" ]] || die "构建完成但未找到 ${BUILD_DIR}/index.html" + info "本地构建完成：${BUILD_DIR}" +} + +upload_frontend() { + local target="${DEPLOY_USER}@${DEPLOY_HOST}" + local ssh_command="ssh -p ${DEPLOY_SSH_PORT}" + + if [[ "$DRY_RUN" == "1" ]]; then + info "DRY RUN：不会连接服务器或上传文件" + info "目标：${target}:${DEPLOY_PATH}/" + return + fi + + command -v ssh >/dev/null 2>&1 || die "未找到 ssh 命令" + command -v rsync >/dev/null 2>&1 || die "未找到 rsync 命令" + + info "检查远程目录：${target}:${DEPLOY_PATH}/" + ssh -p "$DEPLOY_SSH_PORT" "$target" "mkdir -p '${DEPLOY_PATH}'" + + info "上传构建产物：${BUILD_DIR}/ -> ${target}:${DEPLOY_PATH}/" + rsync -az --delete --delay-updates \ + -e "$ssh_command" \ + "${BUILD_DIR}/" "${target}:${DEPLOY_PATH}/" + + info "校验远程 index.html" + ssh -p "$DEPLOY_SSH_PORT" "$target" "test -s '${DEPLOY_PATH}/index.html'" + info "前端上传完成：${target}:${DEPLOY_PATH}/" +} + +main() { + parse_args "$@" + cd "$ROOT_DIR" + validate_config + install_dependencies + build_frontend + upload_frontend +} + +main "$@" diff --git a/src/app.tsx b/src/app.tsx index 9f2487f..de3f0be 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -23,6 +23,7 @@ import { import { PageEnum } from './enums/pagesEnums'; import { stringify } from 'querystring'; import { message } from 'antd'; +import { getProductionApiBaseUrl } from './utils/publicUrl'; const isDev = process.env.NODE_ENV === 'development'; const loginOut = async () => { @@ -44,6 +45,8 @@ const loginOut = async () => { } }; + + /** * @see https://umijs.org/zh-CN/plugins/plugin-initial-state * */ @@ -268,7 +271,7 @@ export const request = { // baseURL: process.env.NODE_ENV === 'development' ? '' : 'http://ks.zhaopinzao8dian.com/api/ks', // baseURL: process.env.NODE_ENV === 'development' ? '' : 'http://36.105.163.21:30081/api/ks', // baseURL: process.env.NODE_ENV === 'development' ? '' : 'https://xjshzly.longbiosphere.com:30081/api/ks', - baseURL: process.env.NODE_ENV === 'development' ? '' : 'http://39.98.44.136:6024/api/shihezi/', + baseURL: process.env.NODE_ENV === 'development' ? '' : getProductionApiBaseUrl(), // baseURL: 'http://39.98.44.136:8080', requestInterceptors: [ (url: any, options: { headers: any }) => { @@ -321,4 +324,3 @@ export const request = { }, ], }; - diff --git a/src/pages/Jobfair/Outdoorfair/Detail/components/ParticipatingCompaniesTab.tsx b/src/pages/Jobfair/Outdoorfair/Detail/components/ParticipatingCompaniesTab.tsx index a7e15b5..2c21c64 100644 --- a/src/pages/Jobfair/Outdoorfair/Detail/components/ParticipatingCompaniesTab.tsx +++ b/src/pages/Jobfair/Outdoorfair/Detail/components/ParticipatingCompaniesTab.tsx @@ -4,6 +4,7 @@ import { PlusOutlined } from '@ant-design/icons'; import type { ActionType, ProColumns } from '@ant-design/pro-components'; import { ProTable } from '@ant-design/pro-components'; import { getDictValueEnum } from '@/services/system/dict'; +import { normalizePublicUrl } from '@/utils/publicUrl'; import { getParticipatingCompanyQrCode, getParticipatingCompanies, @@ -98,7 +99,11 @@ const ParticipatingCompaniesTab: React.FC = ({ fairId }) => { message.error(res.msg || '二维码内容获取失败'); return; } - setQrInfo(res.data); + setQrInfo({ + ...res.data, + h5Url: normalizePublicUrl(res.data.h5Url) || res.data.h5Url, + qrCodeContent: normalizePublicUrl(res.data.qrCodeContent) || res.data.qrCodeContent, + }); setQrCompanyName(record.companyName); setQrModalOpen(true); }; diff --git a/src/pages/Jobfair/Outdoorfair/index.tsx b/src/pages/Jobfair/Outdoorfair/index.tsx index dc97463..0eb5049 100644 --- a/src/pages/Jobfair/Outdoorfair/index.tsx +++ b/src/pages/Jobfair/Outdoorfair/index.tsx @@ -29,6 +29,7 @@ import type { import { getParticipatingJobs } from '@/services/jobportal/outdoorFairDetail'; import { getDictSelectOption, getDictValueEnum } from '@/services/system/dict'; import { getVenueInfoList } from '@/services/jobportal/venueInfo'; +import { normalizePublicUrl } from '@/utils/publicUrl'; import EditModal from './components/EditModal'; import JobEditModal from './Detail/components/JobEditModal'; @@ -175,7 +176,11 @@ const OutdoorFairList: React.FC = () => { const openQrCode = async (record: OutdoorFairItem) => { const res = await getMyOutdoorFairQrCode(record.id); if (res.code === 200) { - setQrInfo(res.data); + setQrInfo({ + ...res.data, + h5Url: normalizePublicUrl(res.data.h5Url) || res.data.h5Url, + qrCodeContent: normalizePublicUrl(res.data.qrCodeContent) || res.data.qrCodeContent, + }); setQrModalOpen(true); } else { message.error(res.msg || '二维码加载失败'); diff --git a/src/utils/publicUrl.ts b/src/utils/publicUrl.ts new file mode 100644 index 0000000..ada649a --- /dev/null +++ b/src/utils/publicUrl.ts @@ -0,0 +1,37 @@ +const INTERNAL_HOSTS = new Set(['127.0.0.1', 'localhost', '0.0.0.0', '::1']); + +function getBrowserOrigin() { + return typeof window === 'undefined' ? '' : window.location.origin; +} + +/** + * 生产环境 API 使用当前浏览器访问的 origin，避免把后端内网地址编译进前端产物。 + */ +export function getProductionApiBaseUrl(origin = getBrowserOrigin()) { + const normalizedOrigin = origin.replace(/\/+$/, ''); + return `${normalizedOrigin || ''}/api/shihezi/`; +} + +/** + * 后端可能因为反向代理配置返回内网 H5 地址，前端展示和打开二维码时使用当前公开 origin。 + */ +export function normalizePublicUrl(value?: string, currentOrigin = getBrowserOrigin()) { + if (!value || !currentOrigin || !/^https?:\/\//i.test(value)) { + return value; + } + + try { + const url = new URL(value); + const browserUrl = new URL(currentOrigin); + if ( + INTERNAL_HOSTS.has(url.hostname.toLowerCase()) && + !INTERNAL_HOSTS.has(browserUrl.hostname.toLowerCase()) + ) { + url.protocol = browserUrl.protocol; + url.host = browserUrl.host; + } + return url.toString(); + } catch { + return value; + } +} diff --git a/tests/utils/publicUrl.test.ts b/tests/utils/publicUrl.test.ts new file mode 100644 index 0000000..846cca0 --- /dev/null +++ b/tests/utils/publicUrl.test.ts @@ -0,0 +1,23 @@ +import { getProductionApiBaseUrl, normalizePublicUrl } from '@/utils/publicUrl'; + +describe('public URL helpers', () => { + it('builds the production API base URL from the browser origin', () => { + expect(getProductionApiBaseUrl('http://39.98.44.136:6024')).toBe( + 'http://39.98.44.136:6024/api/shihezi/', + ); + }); + + it('replaces an internal backend origin with the browser origin', () => { + expect( + normalizePublicUrl( + 'http://127.0.0.1:9091/h5/outdoor-fair/company.html?fairId=8&companyId=93007', + 'http://39.98.44.136:6024', + ), + ).toBe('http://39.98.44.136:6024/h5/outdoor-fair/company.html?fairId=8&companyId=93007'); + }); + + it('keeps an already public URL unchanged', () => { + const url = 'https://jobs.example.com/h5/outdoor-fair/company.html?fairId=8&companyId=93007'; + expect(normalizePublicUrl(url, 'http://39.98.44.136:6024')).toBe(url); + }); +});