@mgcloud/overseas-web-monorepo

Nuxt: 4.1.2
TypeScript: 5.9.2
Jenkins: build

项目介绍

海外项目 C端版本 (PC/H5, Facebook, Tiktok, Google)

注：项目采用 monorepo 模式，构建使用 Turborepo, 包管理工具使用 pnpm

Features

✅ Demo
- Supports HTTPS domain for testing.
- Domain: https://overseas-demo.sykt520.com/
- Git: http://39.108.189.115:81/overseas/frontend/demo
- Jenkins: http://120.78.73.72:5186/job/overseas-demo-frontend-测试环境(mg-movie)/
✅ PC
✅ H5
✅ Facebook
✅ Tiktok
✅ Google

Prerequisites

Before you begin, ensure you have installed:

Node.js (v22.12.0)
pnpm (v9.9.0)

Development Setup

Install Dependencies

pnpm

bash

 pnpm install

Start Development Server

pnpm

bash

 pnpm run dev:h5          # H5 version
 pnpm run dev:pc          # PC version
 pnpm run dev:fb          # Facebook version
 pnpm run dev:tt          # Tiktok version
 pnpm run dev:gg          # Google version

Open http://localhost:4000 in your browser.

Build

Testing

Build the application for testing:

pnpm

bash

pnpm run generate:h5-test          # H5 version
pnpm run generate:pc-test          # PC version
pnpm run generate:fb-test          # Facebook version
pnpm run generate:tt-test          # Tiktok version
pnpm run generate:gg-test          # Google version

Production

Build the application for production:

pnpm

bash

pnpm run generate:h5          # H5 version
pnpm run generate:pc          # PC version
pnpm run generate:fb          # Facebook version
pnpm run generate:tt          # Tiktok version
pnpm run generate:gg          # Google version

需求地址

海外app文档汇总: https://zz79mzs94k.feishu.cn/docx/NjP6defFUoS2r2xVn5ocuETnnNh
V0.0.0: https://zz79mzs94k.feishu.cn/docx/QNb6da0QUof6HexzR2hcjgMNnEe
V0.0.1: https://zz79mzs94k.feishu.cn/docx/LgBwd22JQo9mwbxTKCUcZ9y2nBf
V1.0.0
- https://bajmxz0h6l.feishu.cn/docx/TLkldXnV7o0dxWx4A83cwRctn6p
- https://zz79mzs94k.feishu.cn/docx/PR2pd4bKno6BhoxtLRTc3G7cnQb
V1.0.1: 接口添加数据解密功能，请求头中添加 x-app-ver 字段
海外数据报表1.0（创建投放落地页+广告数据表）: https://www.tapd.cn/tapd_fe/67849798/story/detail/1167849798001002557?menu_workitem_type_id=0

环境变量配置

.env

text

google登录：
web端 -> clientId: 1091796489127-5hkgbfma806o98bp52tb299gqcnlruei.apps.googleusercontent.com
android端 -> clientId: 1091796489127-t4drm2cu8ke6n9j8ti904am31ro8n2ln.apps.googleusercontent.com

fb登录（试试是否可共用一个， 且需要测试fb登录的需个人账号注册为fb开发账号并加我好友，我分配应用权限才可测试）：
应用编号: 602147739014365
客户端口令: ce441129280df8ad8a8d7347a9c4bac6

analytics.google
minidrama: G-TPMF8EW06L
fb.minidrama: G-55DK4W82YN

nginx

PC+H5

Nginx dynamically serves PC or H5 content based on the user agent.

conf.nginx

shell

# 上游服务器配置
upstream test-overseas-web.minidrama123.com {
    server 172.25.133.73:8990;
}

map $http_user_agent $is_mobile {
    default 0;  # 默认非移动设备
    "~*(iphone|ipod|android|blackberry|windows\sphone|mobile|opera\smini)" 1;  # 匹配常见移动设备
}

# 服务器配置
server {
    listen       80;
    listen       443 ssl http2;
    server_name  test-overseas-web.minidrama123.com;


    charset utf-8;
    access_log  /etc/nginx/logs/test-overseas-web.minidrama123.com.log  main;
    #ico

    ssl_certificate  /etc/nginx/ssl/minidrama123.com.pem;
    ssl_certificate_key /etc/nginx/ssl/minidrama123.com.key;
    ssl_session_timeout  5m;    #缓存有效期
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;    #加密算法
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;    #安全链接可选的加密协议
    ssl_prefer_server_ciphers on;   #使用服务器端的首选算

    # 根据设备类型设置不同的根目录
    set $root_path /etc/nginx/html/overseas-pc-frontend;
    
    if ($is_mobile) {
        set $root_path /etc/nginx/html/overseas-mobile-frontend;
    }

    root $root_path;

    # 主路由处理
    location / {
        index index.html;
        try_files $uri $uri/ /index.html last;

        # 开启 gzip
        gzip on;
        gzip_min_length 1k;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/json;
        
        # 添加安全头
        add_header X-Frame-Options "SAMEORIGIN" always;
        add_header X-XSS-Protection "1; mode=block" always;
        add_header X-Content-Type-Options "nosniff" always;
        add_header Referrer-Policy "no-referrer-when-downgrade" always;
        add_header Content-Security-Policy "default-src * data: 'unsafe-eval' 'unsafe-inline'" always;
    }

    # 静态资源处理
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 30d;
        add_header Cache-Control "public, no-transform";
        try_files $uri =404;
    }

    location /api/ {
        index  index.html index.htm;
        proxy_pass   http://test-overseas-web.minidrama123.com/;
        # proxy_redirect              off;
        # proxy_set_header            Host $host:$server_port;
        # proxy_set_header            X-real-ip $clientRealIp;
        # proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    # 错误页面处理
    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

Jenkins job

PC + H5

shell.jenkins

bash

#!/bin/bash
export NODEJS22_17_HOME=/opt/nodejs/node-v22.17.1
export PATH=$NODEJS22_17_HOME/bin:$PATH

if [ -z "$project" ]; then
    echo "Error: Project type not specified"
    echo "Usage: $0 project=[H5|PC]"
    exit 1
fi

pnpm install --no-frozen-lockfile

if [ "$project" = "H5" ]; then
    echo "Deploying H5 (mobile) version..."
    # test: pnpm run generate:h5-test
    # prod: pnpm run generate:h5
    pnpm run generate:h5-test || exit 1
    rm -rf /etc/nginx/html/overseas-mobile-frontend/*
    cp -r apps/web-h5/dist/* /etc/nginx/html/overseas-mobile-frontend/
elif [ "$project" = "PC" ]; then
    echo "Deploying PC version..."
    # test: pnpm run generate:pc-test
    # prod: pnpm run generate:pc
    pnpm run generate:pc-test || exit 1
    rm -rf /etc/nginx/html/overseas-pc-frontend/*
    cp -r apps/web-pc/dist/* /etc/nginx/html/overseas-pc-frontend/
else
    echo "Error: Invalid project type. Must be either 'H5' or 'PC'"
    exit 1
fi

nginx -t && nginx -s reload

echo "Deployment completed successfully for $project version"

fb

shell.jenkins

bash

#!/bin/bash
export NODEJS22_17_HOME=/opt/nodejs/node-v22.17.1
export PATH=$NODEJS22_17_HOME/bin:$PATH

# pnpm install
pnpm install --no-frozen-lockfile
pnpm run generate:fb-test || exit 1

rm -rf /etc/nginx/html/overseas-fb-frontend/*
cp -r apps/landing-facebook/dist/*  /etc/nginx/html/overseas-fb-frontend/

nginx -t && nginx -s reload

tt

shell.jenkins

bash

#!/bin/bash
export NODEJS22_17_HOME=/opt/nodejs/node-v22.17.1
export PATH=$NODEJS22_17_HOME/bin:$PATH

pnpm install --no-frozen-lockfile
pnpm run generate:tt-test || exit 1


rm -rf /etc/nginx/html/overseas-tt-frontend/*
cp -r apps/landing-tiktok/dist/*  /etc/nginx/html/overseas-tt-frontend/

nginx -t && nginx -s reload

gg

shell.jenkins

bash

#!/bin/bash
export NODEJS22_17_HOME=/opt/nodejs/node-v22.17.1
export PATH=$NODEJS22_17_HOME/bin:$PATH

pnpm install --no-frozen-lockfile
pnpm run generate:gg-test || exit 1


rm -rf /etc/nginx/html/overseas-gg-frontend/*
cp -r apps/landing-google/dist/*  /etc/nginx/html/overseas-gg-frontend/

nginx -t && nginx -s reload

APP

overseas

@mgcloud/overseas-web-monorepo

项目介绍

Features

Links

Resources

Jenkins Jobs

Analytics & Monitoring

Prerequisites

Development Setup

Build

Testing

Production

需求地址

环境变量配置

nginx

PC+H5

Jenkins job

PC + H5

fb

tt

gg

@mgcloud/overseas-web-monorepo ​

项目介绍 ​

Features ​

Links ​

Resources ​

Jenkins Jobs ​

Analytics & Monitoring ​

Prerequisites ​

Development Setup ​

Build ​

Testing ​

Production ​

需求地址 ​

环境变量配置 ​

nginx ​

PC+H5 ​

Jenkins job ​

PC + H5 ​

fb ​

tt ​

gg ​

@mgcloud/overseas-web-monorepo

项目介绍

Features

Links

Resources

Jenkins Jobs

Analytics & Monitoring

Prerequisites

Development Setup

Build

Testing

Production

需求地址

环境变量配置

nginx

PC+H5

Jenkins job

PC + H5

fb

tt

gg