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

王者荣耀全栈项目部署到阿里云服务器笔记
原创Charles_GX 最后发布于2020-03-27 01:27:00 阅读数 177  收藏
展开
王者荣耀全栈项目部署到阿里云服务器笔记
学习的项目来自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')) //静态文件
1

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
1
2
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
1
将npm的镜像设置为淘宝镜像

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
1
进入到 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
1
2
3
4
5
sudo apt-get install certbot python-certbot-nginx
1
sudo certbot --nginx
1
sudo certbot certonly --nginx
1
通过cerbot添加了ssl证书后
此时的网址 前面已经有了https 更加安全

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

同时下载一个 Multer Storage for AliYun OSS
npm install --save multer-aliyun-oss
1
const MAO = require('multer-aliyun-oss');
 
const upload = multer({
    storage: MAO({
        config: {
            region: '<region>', // 地域名字 
            accessKeyId: '<accessKeyId>', //key
            accessKeySecret: '<accessKeySecret>', // 密码
            bucket: '<bucket>' // bucket名称
        }
    })
});
1
2
3
4
5
6
7
8
9
10
11
12
创建一个bucket


创建一个accessKey
选择子用户


填写对应的即可
最后输入一张图片测试oss是否设置成功


注意每次进行代码的更改后都需要先push到远程的git仓库然后服务器再去pull拉代码
————————————————
版权声明:本文为CSDN博主「Charles_GX」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Charles_GX/article/details/105132719

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

AI周红伟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值