7.0前端开发环境搭建文档

下载源码

# 克隆项目
mkdir /opt/server && cd /opt/server
git clone https://gitee.com/enation/ui.git

安装基础环境

基础环境包括nodejs、pm2、nginx\ 注意：这个命令会禁用centos7的防火墙，如果不需要禁用防火墙，请编辑deploy.sh中第66行相关代码再运行。

cd /opt/server/ui
bash ./deploy.sh base

拷贝公共文件到各个项目根目录下

执行此命令，会把ui下的ui-domain、ui-components、ui-utils文件夹拷贝到各个项目的根目录下\ 通常修改项目API和域名地址，只需要修改ui-domain/api.js、ui-domain/domain.js中的内容，再执行拷贝命令即可。

cd /opt/server/ui
bash ./deploy.sh copy

使用脚本自动部署

此部署脚本仅限于限CentOS7系统，其它请使用手动部署。手动部署教程在最后

cd /opt/server/ui
bash ./deploy.sh

配置启动nginx

cd /usr/local/nginx/conf/
# 编辑nginx配置
vi nginx.conf # 参照下面的配置
# 启动nginx
cd /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

具体nginx配置请参照nginx.md

deploy.sh脚本命令

命令示例：bash ./deploy.sh git-pull

手动部署

• 安装nodejs

    # 进入/usr/local/目录
    cd /usr/local/
  
    # 获取源码
    wget https://npm.taobao.org/mirrors/node/v8.11.0/node-v8.11.0-linux-x64.tar.gz
  
    # 解压源码
    tar -zxvf node-v8.11.0-linux-x64.tar.gz
  
    # 重命名
    mv node-v8.11.0-linux-x64 node
  
    # 编辑profile
    vi /etc/profile
  
    # 在底部加入
    export NODE_HOME=/usr/local/node
    export PATH=$NODE_HOME/bin:$PATH
  
    # 执行命令使更改生效
    source /etc/profile
  

• 安装pm2

    yarn add pm2 -g
  

• 如果提示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
    sudo ln -s /usr/local/node/bin/pm2 /usr/bin/pm2
    sudo ln -s /usr/local/node/bin/pm2 /usr/lib/pm2
  

• 部署买家PC端

    # 进入买家PC端项目目录
    cd /opt/server/ui/buyer/pc
  
    # 安装项目依赖
    sudo yarn install
  
    # build项目
    sudo yarn run build
  
    # 使用pm2后台启动
    pm2 start npm --name "buyer-pc" -- run start
  

• 部署买家WAP端

    # 进入买家WAP端项目目录
    cd /opt/server/ui/buyer/wap
  
    # 安装项目依赖
    sudo yarn install
  
    # build项目
    sudo yarn run build
  
    # 使用pm2后台启动
    pm2 start npm --name "buyer-wap" -- run start
  

• 部署后台管理

    # 进入后台管理项目目录
    cd /opt/server/ui/manager-admin
  
    # 安装项目依赖
    sudo yarn install
  
    # build项目
    sudo yarn run build:prod
  

• 部署商家中心

    # 进入后台管理项目目录
    cd /opt/server/ui/manager-seller
  
    # 安装项目依赖
    sudo npm install
  
    # build项目
    sudo npm run build:prod
  

• 商家中心和后台管理在build好之后

  商家中心和后台管理在build好后，会以静态文件的形式存放在根目录下的dist目录下。\ 这个时候我们用nginx去反向代理，就可以访问了。\ 举个荔枝：

  server {
      listen       80;
      server_name  admin.xxxx.com;
  
      location / {
          root   /ui/manager-admin/dist;
          try_files $uri $uri/ /index.html $uri/ =404;
          index  index.html index.htm;
      }
  }
  

手动适配API环境

如果需要手动适配API环境，需要修改5个地方。

dev表示API为开发环境，pro表示API为生产环境。与前端无关

• 配置文件

    # 修改api_model为dev或pro
    ui/ui-domain/index.js
  

• 买家PC端

    # 修改api_model为dev或pro
    ui/buyer/pc/ui-domain/index.js
  

• 买家WAP端

    # 修改api_model为dev或pro
    ui/buyer/wap/ui-domain/index.js
  

• 商家中心

    # 修改api_model，为dev或pro
    ui/manager-seller/ui-domain/index.js
  

• 后台管理

    # 修改api_model，为dev或pro
    ui/manager-admin/ui-domain/index.js
  

  建议使用脚本修改，更加方便。

  # 在ui目录下：
  bash ./deploy.sh api_dev
  # 或
  bash ./deploy.sh api_pro