【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（4.1-4.10）

【全栈之巅】Node.js + Vue.js 全栈开发王者荣耀手机端官网和管理后台学习笔记（4.1-4.10）

本项目是 学习Bilibili 全栈之巅 视频教程相关源码和体会
https://gitee.com/blaunicorn/node-vue-wangzherongyao
持续更新中…

4.1 生产环境编译

把admin和web都编译到server的某个文件里，让他们能被server访问到

npm run build // 直接编译
npm install -g serve // npm下本机启动serve的全局
serve dist 启动模拟服务器
process.env.VUE_APP_API_URL // 必须VUE_APP开头 再加变量名

    // 4.1 admin\src\http.js 替换变量
    baseURL: process.env.VUE_APP_API_URL || '/admin/api'
    // baseURL: 'http://localhost:3000/web/api'

// admin\.env.development
VUE_APP_API_URL=http://localhost:3000/web/api

 // admin\vue.config.js
 module.exports = {

    publicPath: process.env.NODE_ENV === 'production' ? '/admin/' : './',
    // 输出到指定文件夹
    // __dirname 指vue.config.js的当前文件夹，后面用..回退到server文件夹
    outputDir: __dirname + '/../server/wwwroot/admin',
    assetsDir: 'static'
}

//4.1 静态文件托管admin的打包文件, 访问路径为localhost:3000/admin   静态文件路径为/wwwroot/admin
app.use('/admin', express.static(__dirname + '/wwwroot/admin'))
// 4.1 静态文件托管web的打包文件, 访问路径为localhost:3000/   静态文件路径为/wwwroot/web
app.use('/', express.static(__dirname + '/wwwroot/web'))

web端类似调整

4.2购买域名和服务器

// 远程登录 用户名 @分隔符 ip地址
ssh [email protected]
ls // 查看文件列表
pwd  // 看当前所在目录
cd /  // 进入/目录,根路径
cd /etc  //进入etc目录
cd ~ //进入自己个人文件夹

4.3 域名解析

例子如下：
想实现功能： 主机域名 test.topfullstack.com 指向 公网ip 47.52.220.250

记录类型，一般 选择 A
主机记录： test .topfullstack.com
记录值： 47.52.220.250 // 公网ip
实际上 域名就是ip的别名

4.4 Nginx安装和配置

apt 或 yum
apt show nginx 查看是否有nginx
apt update 全部更新下软件包
apt install nginx -y
安装完后，rpm -qa | grep nginx 查看
启动nginx：systemctl start nginx
加入开机启动：systemctl enable nginx
查看nginx的状态：systemctl status nginx
/usr/share/nginx/html html目录
/etc/nginx/nginx.conf 配置文件，可用vim配置

4.5 安装MongoDB数据库

apt install -y mongodb-server
centos 安装
vim /etc/yum.repos.d/mongodb-org-4.0.repo

配置mongo的yum源

[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc

yum install mongodb-org
安装mongo

已安装:
mongodb-org.x86_64 0:4.0.6-1.el7
作为依赖被安装:
mongodb-org-mongos.x86_64 0:4.0.6-1.el7
mongodb-org-server.x86_64 0:4.0.6-1.el7
mongodb-org-shell.x86_64 0:4.0.6-1.el7
mongodb-org-tools.x86_64 0:4.0.6-1.el7

rm -rf /etc/yum.repos.d/mongodb-org-4.0.repo
安装完成后删除

vim /etc/mongod.conf

开启远程访问
把第30行bindIp: 127.0.0.1改为
bindIp: 0.0.0.0

firewall-cmd --zone=public --add-port=27017/tcp --permanent
firewall-cmd --reload
开放MongoDB默认的27017端口

systemctl enable mongod
加入开机启动
systemctl start mongod
启动
mongo
进入mongo命令行
show dbs 显示数据库
exit 退出命令行
另:
mongo的账号密码不是全局的
而是每个库都要单独设置

4.6 安装git 方便同步代码

apt install -y git // 安装git

ssh-keygen 一路回车，生成秘钥,复制下来，放在github的setting里
Your identification has been saved in /root/.ssh/id_rsa.
Your public key has been saved in /root/.ssh/id_rsa.pub.

cat /root/.ssh/id_rsa.pub 查看 公钥 复制到github里
ps 一定要把key添加到项目里部署公钥里，只允许部署，而不是个人设置里。

4.7 nodejs npm 安装配置

apt install -y npm

npm config set registry https://registry.npm.taobao.org //使用taobao镜像
如果需要恢复成原来的官方地址只需要执行如下命令
npm config set registry https://registry.npmjs.org

如果nodejs 版本较低，可以用下面命令升级
n stable

4.8 git拉取代码，安装pm2并启动项目

原始方法 ftp
新方法 git
mkdir /data 服务器上在根目录建立data文件夹
cd /data 进入文件夹
ll 或ls 浏览文件夹下文件
git clone [email protected]:blaunicorn/node-vue-wangzherongyao.git git克隆 即可根据公钥下载项目
cd node-vue-wangzherongyao
cd server
npm i
npm i -g pm2 pm2包可以后台运行nodejs
pm2 start index.js 启动进程
pm2 list 查看进程
pm2 logs index 查看logs是什么
pm2 start index.js —name app_name
pm2 save 会将当前pm2所运行的应用保存在/root/.pm2/dump.pm2下运行pm2-root服务脚本，并且到/root/.pm2/dump.pm2下读取应用并启动。
pm2 startup 即在/etc/init.d/目录下生成pm2-root的启动脚本，且自动将pm2-root设为服务。
curl http://localhost:3000 查看页面
curl http://localhost:3000/admin/ 查看后端页面

4.9 配置Nginx反向代理
Remote - SSH vscode安装ssh管理器
ms-vscode-remote.remote-ssh
https://www.digitalocean.com 模块化配置Nginx
将配置好的文件拷贝到/etc/ngxin/文件夹下或者 配置

reverse proxy

location / {
    proxy_pass http://127.0.0.1:3000;
    include    nginxconfig.io/proxy.conf;
}

service nginx reload 重载文件
访问 ip 或域名 可打开首页

4.10 迁移本地MongoDB数据库到服务器

mongodump -d node-vue-moba
生成dump文件夹
mongoDb 4.4 把 工具类都分类去了，所以需要下载，覆盖到bin目录才能使用mongodump
https://fastdl.mongodb.org/tools/db/mongodb-database-tools-windows-x86_64-100.3.1.zip
另外，要在windows 系统变量里添加 mongoDb的bin执行文件夹，才能使用mongodb命令行

在vscode 里 复制 dump文件夹 在vscode ssh页面粘贴 （注意，都要在vscode里)
mongorestore 在终端在服务器上恢复数据

git pull origin master 服务器 拉取代码
pm2 reload index
如果 代码修改了，pm2不会像node一样自动刷新，需要 pm2 reload index 重新加载 index为启动的name

修改数据库数据 需下载 Robo 3T(MongoDB可视化工具)
创建新的联接
ssh 联接远端服务器
修改 items集合中的图片的地址为 远端服务器
db.getCollection(‘items’).find({}).map(doc=> {
doc.icon = doc.icon ? doc.icon.replace(‘localhost:3000’,‘39.97.105.248’) : null
db.items.save(doc)
return doc
})

修改 ads集合中的广告位图片的地址为 远端服务器
db.getCollection(‘ads’).find({}).map(doc => {
doc.items.map(item => {
item.image = item.image ? item.image.replace(‘localhost:3000’,‘39.97.105.248’):null
return item })
db.ads.save(doc)
return doc
})