UI手动部署

下载源码

mkdir /opt/server && cd /opt/server
git clone git项目地址 --branch 分支名

基础环境

安装Node.js

  # 安装nodejs
  cd /usr/local/
 wget https://cdn.npmmirror.com/binaries/node/v14.17.6/node-v14.17.6-linux-x64.tar.gz
  tar -zxvf node-v14.17.6-linux-x64.tar.gz
  rm -rf node-v14.17.6-linux-x64.tar.gz
  mv node-v14.17.6-linux-x64 node
  echo 'export NODE_HOME=/usr/local/node
  export PATH=$NODE_HOME/bin:$PATH'>>/etc/profile
  source /etc/profile

  # node npm 链接
  sudo ln -s /usr/local/node/bin/node /usr/bin/node
  sudo ln -s /usr/local/node/bin/node /usr/lib/node
  sudo ln -s /usr/local/node/bin/npm /usr/bin/npm
  

安装 yarn

  # 安装yarn
  npm install yarn -g --registry=https://registry.npmmirror.com

  # yarn 链接
  sudo ln -s /usr/local/node/bin/yarn /usr/bin/yarn
  sudo ln -s /usr/local/node/bin/yarn /usr/lib/yarn

安装 nginx

  # nginx安装
  yum install -y gcc gcc-c++
  yum install -y pcre pcre-devel
  yum install -y zlib zlib-devel
  yum install -y openssl openssl-devel

  cd /usr/local
  wget https://nginx.org/download/nginx-1.14.0.tar.gz
  tar -zxvf nginx-1.14.0.tar.gz
  cd nginx-1.14.0
  ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module
  make && make install
  cd ..
  rm -rf nginx-1.14.0.tar.gz
  rm -rf nginx-1.14.0
  
  ln -s /usr/local/nginx/sbin/* /usr/local/sbin
  

域名配置

域名规划

tip

在此之前需要规划您的域名

· 后端域名在 api.js 和 nginx 配置中指向 后端服务 api

· 前端域名在 domain.js 和 nginx 配置中指向 前端打包的 dist 文件夹

整体部署架构请参考这里，如部署 SSL 站点，请先申请证书

域名规划参照如下

后端	域名
基础api	https://api.domain.com

前端	域名
买家PC	https://buyer-pc.domain.com
买家H5	https://buyer-m.domain.com
卖家端	https://seller.domain.com
平台端	https://admin.domain.com
装修端	https://decor.domain.com

配置 api.js

修改文件：ui-domain/api.js

module.exports = {
 // 开发环境:
dev: {
    //生产环境下，无需配置
},
// 生产环境
pro: {
      // 与 "域名规划" 中的 后端域名 对应
      base  : env.API_BASE || 'https://api.domain.com',  //基础api,走统一网关
      buyer : env.API_BUYER || 'https://api.domain.com', //买家api,走统一网关
      seller: env.API_SELLER || 'https://api.domain.com', //卖家api,走统一网关
      admin : env.API_ADMIN || 'https://api.domain.com', //管理端api,走统一网关
      decor : env.API_DECOR || 'https://api.domain.com '   //装修端api,走统一网关
    }
  }
  

配置domain.js

tip

作用是 让各个端可以相互跳转

比如 由卖家端 点击查看商品详情 可以跳转至 PC端的商品详情页

修改文件：ui-domain/domain.js

module.exports = {
  // 开发环境
  dev: {
        //生产环境下，无需配置
  },
  // 生产环境
  pro: {
    // 与 "域名规划" 中的 前端域名 对应
    buyer_pc : env.DOMAIN_BUYER_PC || 'https://buyer.domain.com ', //买家pc端
    buyer_wap: env.DOMAIN_BUYER_WAP || 'https://m.domain.com ',  //买家h5端
    seller   : env.DOMAIN_SELLER || 'https://seller.domain.com', //卖家端
    admin    : env.DOMAIN_ADMIN || 'https://admin.domain.com ',  //平台端
    decor    : env.DOMAIN_DECOR || 'https://decor.domain.com '   //装修端
  }
}

配置 nginx

后端api server配置

#################################### api配置 START ########################################    
    #-------------- base api ---------------
    server {
        listen 443;
        server_name base-api.domain.com;
        location / {
          proxy_pass    http://localhost:7000;
          proxy_set_header Host                $host:$server_port;
          proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto   $scheme;
          proxy_set_header X-Forwarded-Port    $server_port;
          proxy_pass_header User-Agent;
        }
    }
    #---------------buyer api --------------
    server {
        listen 443;
        server_name buyer-api.domain.com;
        location / {
          proxy_pass    http://localhost:7002;
          proxy_set_header Host                $host:$server_port;
          proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto   $scheme;
          proxy_set_header X-Forwarded-Port    $server_port;
          proxy_pass_header User-Agent;
        }
    }
    #---------------seller api --------------
    server {
        listen 443;
        server_name seller-api.domain.com;
        location / {
          proxy_pass    http://localhost:7003;
          proxy_set_header Host                $host:$server_port;
          proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto   $scheme;
          proxy_set_header X-Forwarded-Port    $server_port;
          proxy_pass_header User-Agent;
        }
    }


    #---------------admin api --------------
    server {
        listen 443;
        server_name admin-api.domain.com;
        location / {
          proxy_pass    http://localhost:7004;
          proxy_set_header Host                $host:$server_port;
          proxy_set_header X-Forwarded-For     $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto   $scheme;
          proxy_set_header X-Forwarded-Port    $server_port;
          proxy_pass_header User-Agent;
        }
    }
#################################### api配置 END ########################################

前端ui server配置

注意：买家端 (buyer) 可能会涉及到 nuxt 方式启动，此时 nginx 配置文件中需要指向对应的 nuxt 服务

#################################### ui配置 START #######################################
    #--------------- 买家端 --------------
    server {
        listen 443;
        server_name buyer-pc.domain.com;
        location / {
            # 指向ui编译打包后的dist文件夹
            root /opt/server/ui/buyer/dist;
            try_files $uri $uri/ /index.html $uri/ =404;
            index  index.html index.htm;
            add_header X-Content-Type-Options  'nosniff';# 禁止嗅探文件类型
            add_header Content-Security-Policy "script-src 'self' 'unsafe-eval' 'unsafe-inline' oyxdwx.com:9443 *.aliyun.com g.alicdn.com *.alibaba.com *.aliapp.org *.qq.com api-md-722.javamall.com.cn:81";# 只允许同源下的js
            add_header X-XSS-Protection "1; mode=block";#开启XSS过滤器            
        }

    }
    #--------------- 卖家端 --------------
    server {
        listen 443;
        server_name admin.domain.com;
        location / {
            root /opt/server/ui/manager-seller/dist;
            try_files $uri $uri/ /index.html $uri/ =404;
            index  index.html index.htm;
            add_header X-Content-Type-Options  'nosniff';#禁止嗅探文件类型
            add_header Content-Security-Policy "script-src 'self' 'unsafe-eval' 'unsafe-inline' oyxdwx.com:9443 *.aliyun.com g.alicdn.com *.alibaba.com *.aliapp.org *.qq.com api-md-722.javamall.com.cn:81";#只允许同源下的js
            add_header X-XSS-Protection "1; mode=block";#开启XSS过滤器            
        }

    }
    #--------------- 管理端 --------------
    server {
        listen 443;
        server_name admin.domain.com;
        location / {
            root /opt/server/ui/manager-admin/dist;
            try_files $uri $uri/ /index.html $uri/ =404;
            index  index.html index.htm;
            add_header X-Content-Type-Options  'nosniff';#禁止嗅探文件类型
            add_header Content-Security-Policy "script-src 'self' 'unsafe-eval' 'unsafe-inline' oyxdwx.com:9443 *.aliyun.com g.alicdn.com *.alibaba.com *.aliapp.org *.qq.com api-md-722.javamall.com.cn:81";#只允许同源下的js
            add_header X-XSS-Protection "1; mode=block";#开启XSS过滤器            
        }
    }
#################################### ui配置 END ########################################

编译 UI

买家端

cd buyer
yarn --registry=https://registry.npmmirror.com
yarn run build:prod

卖家端

cd manager-seller
yarn --registry=https://registry.npmmirror.com
yarn run build:prod

平台端

cd manager-admin
yarn --registry=https://registry.npmmirror.com
yarn run build:prod

装修端

cd manager-decor
yarn --registry=https://registry.npmmirror.com
yarn run build:prod

启动 nginx

如果 nginx 已经启动，则重启 nginx

启动命令

nginx

或者

/usr/local/nginx/sbin/nginx

重启命令

nginx -s reload

或者

/usr/local/nginx/sbin/nginx -s reload

验证

访问相应的域名