王者荣耀全栈项目部署到阿里云服务器笔记

学习的项目来自b站的良心up主全栈之巅

第一次写博客这里主要总结一下这两天部署项目遇到的一些问题(踩得一些坑)

项目简介

主要有三部分（admin后台管理端，web前端展示，以及server服务端）
在这里插入图片描述

进行生产环境的编译

1.手动分别在admin和web文件夹下添加添加环境变量文件 .env.development，添加 VUE_APP_API_URL = http://localhost:3000/admin/api**

在这里插入图片描述
2.对axios默认的baseURL进行更改

3.在server的main.js，中添加

app.use('/admin', express.static(__dirname + '/admin')) //静态文件

在这里插入图片描述
4.在admin和web中，分别创建vue.config.js配置文件，进行配置

因为默认访问 /直接跳转到web前端页所以设置路径会有所不同 web端的vue.config.js如下

5.在admin和web文件夹下运行指令npm run build此时会在server文件夹下生成一个admin和web文件夹
此时server文件夹下的admin和web都是打包好以后的文件
6.在server文件夹下运行指令npm run serve 页面效果如下
在这里插入图片描述

去阿里云购买服务器和域名

1.这里选择的是便宜的域名 .xyz结尾
阿里云官网
域名的话境内需要备案境外不用备案相对方便(因为后面需要对http进行https的加密)
2.购买ecs服务器选择的是ubantu18.04的操作系统
ecs服务器地址
这里购买好ecs服务器以后需要把公网ip记录一下后面会用的到
3.对域名进行解析
在这里插入图片描述
一定要选择记录类型为A的
通过 gitbash here 执行一下 ssh root@{你的主机名}

也可以在阿里云ecs服务器选择远程连接

nginx的安装与配置

在ubantu上安装nginx

- apt update
 -  apt install nginx -y

nginx安装好以后可以通过`cd var/www`里面查看到nginx的一些配置文件

这个如果没有显示默认配置页面需要去阿里云的安全组规则里添加 80端口

主要需要用到nginx的反向代理 nginx配置文件推荐去一个网站链接
选择 nodejs 然后输入自己的域名或者是ip地址

在这里插入图片描述

5. MongoDB数据库的安装和配置

apt install mongodb-server -y

这里一定要选择ubantu18的版本之前因为16版本后面mongorestore恢复数据库的时候报错

下载nodejs `apt install nodejs` 这里刚下载下来的node是八点几的版本
可以再下载一个npm工具`apt install npm`下载了npm以后输入 `npm -v`可以查看npm的版本

npm config set registry https://registry.npm.taobao.org

将npm的镜像设置为淘宝镜像

扫描二维码关注公众号，回复： 10241033 查看本文章

git 安装、配置ssh-key

pt install -y git
ssh-keygen

cat /root/.ssh/id_rsa.pub，获取到的ssh-key，要保存下来

后面需要在github或则码云等网站上部署公钥用于服务器clone项目

Node.js 安装、配置淘宝镜像

apt install -y nodejs
apt install -y npm
npm config set registry https://registry.npm.taobao.org
npm i -g nrm
npm i -g n
n use latest
退出重新连接exit，ssh root@{主机名}

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

向github或者gitee提交代码
把ssh-keygen，添加到仓库的公钥，拉取克隆代码

在根目录下创建一个data文件夹

通过git clone从远程git仓库中拉取代码前面已经上传到了远程仓库

git clone https://gitee.com/orange199853/node-vue-moba

进入到 node-vue-moba文件夹下通过 npm i安装项目所需要的配置文件
安装PM2
npm i -g pm2
通过PM2启动服务
pm2 start index.js
如果修改过一些数据之类的需要手动reload一下不像nodemon可以自动监听变化
pm2 reload
pm2 start index.js -f可以强制加载服务
在这里插入图片描述

配置 Nginx 的反向代理

在vscode中搜索remote-ssh插件并安装
在这里插入图片描述
下载下来以后需要进行配置点击小窗口进入

Hostname 输入ip地址或者域名
点击链接后会提示输入密码
tips:这里可能会遇到的一个报错

提示连接错误的话可能是服务器的公钥进行过更改
ssh连接提示“REMOTE HOST IDENTIFICATION HAS CHANGED! ”解决办法:
在这里插入图片描述
ssh会把你每个你访问过计算机的公钥(public key)都记录在~/.ssh/known_hosts。当下次访问相同计算机时，OpenSSH会核对公钥。如果公钥不同，OpenSSH会发出警告，避免你受到DNS Hijack之类的***。

既然找到原因了，那就好解决了，直接编辑~/.ssh/known_hosts，将需要连接的那个IP相关rsa信息删除即可。，再次成功的话，它会将内容继续写入到 ~/.ssh/known_hosts中。

输入密码，连接
进入==/etc/nginx/==
去nginx配置网站
选择nodejs，进入server，填入自己域名，https不启用，最后下载。

在这里插入图片描述

把nginxconfig.io文件夹复制过去，把available里面的文件复制过去，把enabled里面的文件复制过去

重载nginx的配置文件，service nginx reload

重启服务器pm2 start server/index.js

迁移本地数据到服务器 (mongodump)

导出数据库，mongodump -d node-vue-moba
把dump文件夹整个复制过去
进入到root文件夹下

mongorestore，恢复数据库这里需要注意如果是用的16.04版本的ubantu可能会出现报错

把操作系统更新到18版本即可解决
恢复成功
此时将PM2重启一下
-
后台就有数据了

后台的图片链接还是localhost:3000，需要修改上传图片的接口

然后将代码重新提交 push到git码云上
然后在服务器上重新拉区

重启服务器，pm2 reload index
通过ssh登录数据库，修改图片链接

添加https证书

申请免费的ssl证书
https://letsencrypt.org/
在这里插入图片描述
选择cerbot

这里选择 Nginx 和ubantu 18.04版本
安装方式

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update

sudo apt-get install certbot python-certbot-nginx

sudo certbot --nginx

sudo certbot certonly --nginx

通过cerbot添加了ssl证书后
此时的网址前面已经有了https 更加安全

阿里云oss文件存储

去阿里云申请一个oss云存储
同时创建一个bucket

同时下载一个 Multer Storage for AliYun OSS

npm install --save multer-aliyun-oss

const MAO = require('multer-aliyun-oss');
 
const upload = multer({
    storage: MAO({
        config: {
            region: '<region>', // 地域名字 
            accessKeyId: '<accessKeyId>', //key
            accessKeySecret: '<accessKeySecret>', // 密码
            bucket: '<bucket>' // bucket名称
        }
    })
});