3.mall4pc-bbc项目搭建.md 4.7 KB

mall4pc-bbc:pc代表pc端

1. 安装nodejs + 淘宝npm镜像

nodejs版本请选择为 12-16 偶数版本

如果不了解怎么安装nodejs的,可以参考 菜鸟教程的nodejs相关

将npm的镜像源更改为淘宝的镜像源,回车(千万不要用cnpm,否则会出现不可预知的后果):

npm config set registry https://registry.npmmirror.com

2. 安装依赖

使用vs code打开vue项目,进入到该项目的根目录(根目录有package.json 的文件)

使用npm安装依赖,使用命令行输入,回车:

npm i

3.修改配置文件,连接后台

在本文件所在的目录下有个yami-shop/nginx/conf.d 文件夹,里面有nginx的一些配置信息

修改 /plugins/config.js 连接后台。

  • pathmall4pc-bbc 这个项目连接的是api.jar提供的接口
  • imUrl、wsImUrl : 当然他们还需要与用户进行客服消息通讯,所以也要连接im.jar提供的接口和websocket
  • picDomain : 当然他们还要访问七牛云 or 阿里云的图片,也是需要对应的域名地址
  • h5Path:pc端有h5的二维码,提供用户手机浏览网页
  • merchantPlatformUrl : 商家管理后台地址

    // 配置文件
    let path, imPath, imWsPath, merchantPlatformUrl, h5Path
    
    // 图片域名
    const picDomain = "https://img.mall4j.com/";
    
    //  ==============生产环境===============
    if (process.env.NODE_ENV === 'production') {
    path = 'https://b2b2c-api.mall4j.com'
    // 客服api
    imPath = 'https://b2b2c-im.mall4j.com'
    // 客服ws
    imWsPath = 'wss://b2b2c-im.mall4j.com'
    // H5域名,用于生成二维码。移动端扫码后跳转的地址
    h5Path = 'https://h5.mall4j.com'
    // 商家管理后台地址
    merchantPlatformUrl = 'https://b2b2c-multishop.mall4j.com'
    }
    ...
    

h5路径作用如下:

h5qrcode

4.打包,上传到服务器

  1. 使用 npm run build 命令对项目进行打包
  2. 将步骤1中生成的两个文件+ 两个文件夹,压缩

    .nuxt
    static
    nuxt.config.js
    package.json
    
  3. 上传到服务器nginx指定好的目录,解压

5.在服务端启动

5.1不使用docker进行部署,使用pm2启动

当不使用docker部署的时候,安装nodejs + 淘宝npm镜像 + 安装依赖的操作!!!

  1. 进入到服务器 package.json 所在目录,执行npm install -g pm2

安装信息如下(最后几行)

All packages installed (248 packages installed from npm registry, used 5s(network 5s), speed 1.21MB/s, json 212(466.54kB), tarball 5.6MB)
[pm2@4.4.0] link /opt/nodejs/bin/pm2@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2
[pm2@4.4.0] link /opt/nodejs/bin/pm2-dev@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2-dev
[pm2@4.4.0] link /opt/nodejs/bin/pm2-docker@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2-docker
[pm2@4.4.0] link /opt/nodejs/bin/pm2-runtime@ -> /opt/nodejs/lib/node_modules/pm2/bin/pm2-runtime

建立pm2软链接

ln -s /opt/nodejs/lib/node_modules/pm2/bin/pm2 /usr/local/bin/pm2

使用PM2启动项目

pm2 start npm --name "mall4j-pc" -- run start

以下是PM2的常用命令

pm2 list # 查看当前正在运行的进程
pm2 start all  # 启动所有应用
pm2 restart all  # 重启所有应用
pm2 stop all # 停止所有的应用程序
pm2 delete all # 关闭并删除所有应用
pm2 logs # 控制台显示所有日志

pm2 start 0  # 启动 id为 0的指定应用程序
pm2 restart 0  # 重启 id为 0的指定应用程序
pm2 stop 0 # 停止 id为 0的指定应用程序
pm2 delete 0 # 删除 id为 0的指定应用程序

pm2 logs 0 # 控制台显示编号为0的日志
pm2 show 0  # 查看执行编号为0的进程
pm2 monit mall4j-pc # 监控名称为mall4j-pc的进程

5.2使用docker进行部署

将打包好的两个文件+ 两个文件夹,分别放到/yami-shop/yami-shop-pc下,等待docker-compose 启动

6. nginx配置

nginx配置可以参考 本文件所在的目录下有个yami-shop/nginx/conf.d 文件夹,有1个配置文件,内有详细的配置文件 ,可以参考:

b2b2c-pc.conf

    location / {
        # 3333端口是pc启动的端口,因为pc是服务端渲染的,要启动起来,也要占用端口
        # 这里因为是在docker,所以这个mall4j-pc访问的是docker内部网络,非docker部署也可以用ip http://${ip}:3333;
        # 这里采用mall4j-pc是因为docker内网,如果使用docker的话,应该是127.0.0.1或者是xxx.xxx.xxx.xxx的内网(推荐)/公网ip
        proxy_pass http://mall4j-pc:3333;
        proxy_set_header Host $host:$server_port;
    }