一、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)]