mall商城之前端服务打包-5

一、mall前端部署

1）安装npm命令

wget -c  https://nodejs.org/dist/v12.14.0/node-v12.14.0-linux-x64.tar.xz
tar xvf node-v12.14.0-linux-x64.tar.xz -C  /usr/local/

ln -s /usr/local/node-v12.14.0-linux-x64/bin/node /usr/local/bin/node
ln -s /usr/local/node-v12.14.0-linux-x64/bin/npm /usr/local/bin/npm

#由于官方镜像比较慢，直接执行以下命令，将镜像地址改为淘宝的npm镜像地址
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm -v

#全局更新
npm install npm -g

2）下载前段源码

源码地址：https://github.com/macrozheng/mall-admin-web/archive/refs/heads/master.zip

wget -c https://github.com/macrozheng/mall-admin-web/archive/refs/heads/master.zip
unzip  mall-admin-web-master.zip -d /opt

3）修改prod.env.js配置

注意：如果不改则是使用线上作者提供的API地址。
未搭建mall后台的需要使用线上api进行访问，线上API地址：https://admin-api.macrozheng.com

#修改为自己后台API地址
[root@localhost config]# cat  /opt/mall-admin-web-master/config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"https://admin-api.macrozheng.com"'
}

通过k8s查看后端地址

[root@k8s-master-01 k8s]#  kubectl get svc -n ms |grep 8201
mall-gateway-service   NodePort    10.106.107.178   <none>        8201:30201/TCP   11m

注意：docker-compose部署mall-swarm的API地址是：

后端API地址是：http://192.168.4.119:8201/mall-admin

注意：k8s部署mall-swarm的API地址是：

后端API地址是：http://node节点IP:30201/mall-admin

[root@localhost opt]# sed -i 's#https://admin-api.macrozheng.com#http://192.168.4.115:30201/mall-admin#g' /opt/mall-admin-web-master/config/prod.env.js

[root@localhost ~]# cat  /opt/mall-admin-web-master/config/prod.env.js
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://192.168.4.115:30201/mall-admin"'

4）构建打包代码

cd /opt/mall-admin-web-master
#清除缓存
npm cache clean --force
npm install
npm run build

#安装详情
[root@localhost mall-admin-web]# npm install

up to date, audited 1275 packages in 47s

1 package is looking for funding
  run `npm fund` for details

123 vulnerabilities (5 low, 70 moderate, 39 high, 9 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

#构建详情
[root@localhost mall-admin-web-master]# npm run build
.......
                               static/tinymce4.7.5/tinymce.min.js     834 kB          [emitted]  [big]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

#打包后的代码
[root@localhost mall-admin-web-master]# ll /opt/mall-admin-web-master/dist/
总用量 4
-rw-r--r-- 1 root root 1159 4月  30 22:44 index.html
drwxr-xr-x 7 root root   71 4月  30 22:44 static

5）修改Nginx发布代码

#找到Nginx的发布目录
[root@localhost mall-admin-web-master]# ls /mydata/nginx/html/
[root@localhost mall-admin-web-master]# mv dist html

#将打包好前端文件放nginx目录下
[root@localhost mall-admin-web]# rm -rf /mydata/nginx/html/
[root@localhost mall-admin-web]# mv /opt/mall-admin-web-master/html/  /mydata/nginx/

[root@localhost mall-admin-web]# ls /mydata/nginx/html/
index.html  static

#重启
docker restart nginx

访问：http://192.168.4.119

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rTS9t1HL-1681214515531)(http://m.qpic.cn/psc?/V53GU2po3e4Vc929i8d01BP45G32VjvB/ruAMsa53pVQWN7FLK88i5kD3tGoiX64SCzyQEi7siYA78sMR.rmTH3OwdnCGG0LEDeC6m1NrCuETtSE4QLRlEuKL1aZmvHsqxYDmucH9Y!/b&bo=PgJUAT4CVAEDFzI!&rf=viewer_4&t=5)]

进行登录操作

账户：admin
密码：macro123

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xj6RGqSF-1681214515532)(http://m.qpic.cn/psc?/V53GU2po3e4Vc929i8d01BP45G32VjvB/ruAMsa53pVQWN7FLK88i5kD3tGoiX64SCzyQEi7siYBRIfXL0ppLlCEWWHban1AY3fKbn8j29jRwANgwStn2cdJS0rZ74BXAlQ01LyLf6o0!/b&bo=PgKaAT4CmgEDFzI!&rf=viewer_4&t=5)]

修改为自己后端API地址时登录如下图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-18kfFwnL-1681214515532)(http://m.qpic.cn/psc?/V53GU2po3e4Vc929i8d01BP45G32VjvB/ruAMsa53pVQWN7FLK88i5kqiZYg4WnGVQmRyTyuhttNqittRJ2h3bk0NZH1hSa9vT*8R8XkCNZFaYZhC3iz9Qb4Dfw5apAaiFjazZr45M!/b&bo=PgI5AT4COQEDFzI!&rf=viewer_4&t=5)]