vue+nodejs+mongodb部署项目到阿里云
这是我毕设,想学下项目部署,然后搞了两天,终于成功了哈哈,这个部署过程参考链接如下,写的很好,我自己也做了一遍笔记,更详细介绍了过程,跟着步骤就行,我也是第一次部署哈哈。
参考链接: https://segmentfault.com/a/1190000022921908
1.项目环境如下:
- 部署时间: 2021年4月20号
- 本地环境: windows 10
- 服务器: 阿里云服务器 ECS 型, CentOS 8.0; 主要使用宝塔面板(这个是liunx可视化管理工具,很方便), 内含 SSH 终端, 没有使用 Xshell, Xftp
- 前端项目: Vue(v2.6) & Vue-Cli(v4.5)
- 后端项目: Node.js(v12.18.2,express框架)
- 数据库: MongoDB
2. 服务器准备与配置
1.购买服务器
服务器我用的是免费试用的,如果是学生,可以认证学生,购买学生优惠的,我也认证了,但是看到有免费试用,就白嫖一个月先哈哈哈哈,服务器自己练习用就买最便宜的就好,如果不懂得可以百度一下吧,我就不说了哈。
试用链接(好像首次使用才有):https://free.aliyun.com/?spm=5176.21103406.J_6174043250.2.58cd597cGSa6NA&accounttraceid=f7f0b408034941c0906a059f25d9b2acntvv
购买链接:https://www.aliyun.com/activity/new?spm=5176.12901015.1em2wirsb.d71.776e525cCmvyVF&scm=20140722.3873.4.3972
2.服务器设置
(1)登录阿里云,选择控制台->选择云服务 ESC ,就可以看到自己的服务器了(如果看不到实例, 要在页面左上角选择区域, 选择自己购买的区域 “华南1(深圳)” 就能看到了)
(2)点击实例,前往实例详情,进行 密码重置 和 配置安全组规则
说明: 重置密码是为了等下远程连接我们的服务器, 配置安全组规则 为了开发端口, 这样才能访问服务器
(3) 点击 重置密码, 输入新密码就好了,这里要记住用户名, 方便后面远程连接用到
(4)设置安全规则, 点击配置安全组规则 —> 点击设置规则, 然后添加 80 端口和 8888 端口(这个是宝塔面板默认的,先加上), 再加上自己NodeJS监听的端口就好了, 授权对象就 0.0.0.0/0 ,默认的
配置完重启实例,我记得我没有重启也可以,大家重启一下吧。
(5)远程连接
这里直接选择阿里云提供的远程连接, 在实例那里, 右边有个远程连接
1.阿里云自带的远程连接
2.Xshell等工具连接
3.fileZill连接可以发送文件// 这些工具也可以连接
选择workbench ->立即登录
连接需要 账号和密码,就是上面说的重置密码那里, 输入密码,连接成功就会进入linux 终端界面了
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
3.安装宝塔面板
(1)宝塔面板是一款提升运维效率的服务器管理软件。于我们而言,作用就是在Linux服务器上,可视化操作和管理网站。使用很方便,不需要自己一个个敲命令,喜欢敲命令操作的可以用命令操作哈
参考教程:https://zhuanlan.zhihu.com/p/149675843 (这个讲的很详细,针对centos)
https://www.bt.cn/bbs/thread-19376-1-1.html(其版本安装命令这里有)
1.宝塔默认端口8888 ,需要到服务器安全组添加(我们上面已经添加了,所以这里跳过)
2.centos 下载地址: yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh (在刚才连接成功的linux终端,复制命令进入执行,等待下载)
下载提示y/n , 直接y , 完成后会有用户名和密码 和访问链接
这是我的访问地址,用户名和密码记起来,然后复制链接在浏览器访问,就会进入登录宝塔界面了,如果下次重新登陆,忘记了密码,可以远程连接后, 输入命令 bt default ,就会出来宝塔访问链接和 用户名密码了
外网面板地址: http://47.106.247.172:8888/d8577725
内网面板地址: http://172.18.21.17:8888/d8577725
username: cajvpqx // 用户名和密码
password: 6c23ccd
(2)安装配置
刚进入会有推荐安装,不要选择极速安装,选择编译安装,我选择了LNMP , 安装了 nginx 和 pure-ftpd ,mysql, 因为安装有点慢,我没安装php, 现在也用不上
然后修改端口,宝塔默认端口 8888 , 为了防止被暴力破解, 我们改个端口 ,我改成了 8899
修改了端口,需要在安全组添加, 直接点击宝塔 安全 -> 输入放行端口 就好
4.安装项目需要的工具
-
pm2: 搜索安装 pm2(包含了node模块)
-
mongoDB: 搜索安装 mongoDB (搜索出来只有一个,直接安装就好)
此时,服务器基本已经好了,下面就是项目相关配置了。
3.项目配置
(1) Nginx配置
在软件商店下面有已经下载的软件,软件商店->选择已安装->选择nginx-> 设置->配置修改
安装下面配置自己的信息,这里配置是代理配置, 到时候前端 访问就会 代理成本地nodeJS的 接口
server
{
listen 80; //默认http 端口, 需要在安全组规则中开放此端口, 也可以自己设置个端口, (80 端口用于: ECS 实例作为网站或 Web 应用服务器)
server_name ********; //自己服务器公网 IP
index index.html index.htm index.php; // 默认index.html打开
root /www/wwwroot/dist; //项目所在文件夹,到时候前端打包为dist,所以我这里直接加上dist
// #error_page 404 /404.html;
include enable-php.conf;
location /api/ // 写正确 /api/ , /api开头接口会代理
{
proxy_pass http://127.0.0.1:8886/; //node 服务的域名与端口 ,代理的node接口地址, 我监听端口是 8886
}
error_page 404 /404.html;
location = /40x.html { // 错误网页配置
}
error_page 500 502 503 504 /50x.html;
location = /50x.html { // 错误网页配置
}
}
//在 wwwroot/dist下放入 index.html, 通过 ********公网ip(:80 端口可不输入) 即可访问到该页面
//启动 nginx, 这是常用命令, 我们需要用命令去启动,默认已经启动,我们这里也是界面化启动哈哈,了解一下命令就好
nginx -t 测试nginx语法是否有误
nginx 启动nginx
nginx -s reload 重启nginx,修改nginx.conf后记得重启
其他命令
ps -ef | grep nginx 显示nginx进程
nginx -s stop 停止nginx
nginx -v 查看nginx版本
(2)前端打包上线
- 打包
-
在 vue.config.js 中配置路径, 以免找不到资源
module.exports = { // 自动打开 outputDir: 'dist', // 打包文件夹 assetsDir: 'static', // 静态资源目录 publicPath: process.env.NODE_ENV === 'production' ? './' : '/', // 设置index.html文件路径,网上说要设置这个,但是我打包出来还是/开头 devServer: { // 开发阶段的代理 proxy: 'http://localhost:8886', // 我是全部代理了 port: '8088', open: true, overlay: { warnings: false, errors: true } },
-
在 router/index.js 中改 mode 为 “hash”, 如果是history,还需要结合后端配置,官网也有说,可以自己百度一下,我是hash
-
更改 axios baseURL, 例如 axios.defaults.baseURL = “http://localhost:8886”, 将其中的 localhost:8886 改为云服务器公网 IP, 并在后面加上 /api (与上面 Nginx 配置 location 处一致)
const service = axios.create({ baseURL: 'http://47.106.247.172:80/api/' // 配置代理了不用设置这个url了,端口默认80 //baseURl: process.env.NODE_ENV === 'production' ? 'http://47.106.247.172:80/api/': '' })
-
执行 npm run build 命令打包 , 打包出来的我们直接打开 dist文件下 index.html 是加载不到资源的,不用担心,部署在服务器就可以了
-
上传至服务器
- 在宝塔面板中, 点击: “文件” > 进入 /www/wwwroot /dist文件夹 > 将 dist 文件夹压缩后上传
- 在浏览器中访问公网 IP, 即可看到自己的前端页面,但是请求还不行哦,因为后端还没配置呢
- 在宝塔面板中, 点击: “文件” > 进入 /www/wwwroot /dist文件夹 > 将 dist 文件夹压缩后上传
(3) 后端Node项目上线
-
在宝塔面板中, 点击: “文件” > 进入 /www/wwwroot/dist 文件夹 > 新建文件夹 server > 将 node 文件上传至该文件夹
-
在宝塔面板中的 “安全” 界面下, 放行 node 服务端口, 如本项目使用的 8886
-
在宝塔面板中的 “软件商店” 界面下, 进行相关配置
- pm2 配置 => 点击: “设置” >
"Node 版本": 切换至本地开发时的版本 v12.18.2(在自己电脑 cdm 命令输入 node -v ,查看自己版本)
"模块管理": 安装使用的依赖 mongoose ,express等等第三方模块,会安装到/www/server/nvm/versions/node/v12.18.2/lib/node_modules/,
- pm2 配置 => 点击: “设置” >
- node 文件引入注意事项
- 如果使用了第三方模块, 文件中引入时不能直接写模块名称, 需要加上 /www/server/nvm/versions/node/v12.18.2/lib/node_modules/, 以 mongoose 为例, 就是 const mongoose = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/mongoose')
// 比如我的app.js
const { varifyToken, errorToken } = require('./utils/ejwt/checkToken');
const createToken = require('./utils/ejwt/token');
//连接数据库
require('./model/connect');
const express = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/express');
const app = express();
const bodyParser = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/body-parser');
const multer = require('/www/server/nvm/versions/node/v12.18.2/lib/node_modules/multer'); // 第三方引入
const fs = require('fs');
const path = require('path'); // 自带的直接引入
-
在 "项目列表"填写相关信息,我的启动是 app.js
启动文件: /www/wwwroot/dist/server/ app.js
这样node就可以了,已经自己启动了,但是我没看到那里可以查看启动状态,这个有点烦。
(4)数据库设置和导入
现在只剩数据库了,前面我们已经安装了MongoDB了,现在要导入数据
(1)在 宝塔 ’安全‘ 那里 ,放行数据库默认端口 27017
(2) 创建数据库和用户名密码权限 ,这个看自己需不需要,不设置也可以,因为我的本地开发就设置了用户名和密码,所以我这里也要添加数据库,并添加用户名和密码,和本地用户名密码一样哦。
show dbs // 显示所有的数据库
use admin // 切换到admin
db.createUser({user:'root',pwd:'root',roles:['userAdminAnyDatabase']}) // 管理员用户
db.auth('root','root') // 校验
// use 自己的数据库名称(这如果数据库存在就用存在的,不存在就好创建一个,我这里是创建我的数据库)
use ManageSystem
db.createUser({user:'root',pwd:'root',roles:['readWrite']}) // 添加用户名密码,我本地也是这个,不然连接不上node哦
如果设置了权限, 那么在宝塔面板中的 “软件商店” 界面下, 点击 MongoDB 的 “设置” > “配置文件” > 作出如下修改
security:
authorization: enabled
(3)Mongodb导入导出数据 (可以选择json或者csv文件格式,我选择json)
A.先导出自己数据库文档( 我这里是一个一个文档导出的,没看到一次性导出的命令…唉)
A1. 进入mongodb的bin目录,配置了环境变量可不用进
打开cmd(快捷键: win + r, 输入cmd),然后进入mongodb的bin目录,(或者在cmd中先切换至mongodb所在磁盘,通过cd D:\soft\worksort\MongoDB\bin 这种方式进入)
A2. 导出
命令格式: mongoexport -d 数据库名字 -c 集合名字 -o "要导出到哪里"
比如: 我要将我数据库test中的user表导出到 “C:\Users\ddi\Desktop\db\user.json”
mongoexport -d test-c user -o "C:\Users\ddi\Desktop\db\user.json"
//有用户名和密码的加上 : -u 用户名 -p 密码, 我用的是这个
mongoexport -u root -p root -d ManageSystem -c gmcs -o "C:\Users\21202\Desktop\mydb\gmcs.json"
导出类型默认json,可以指定为csv
mongoexport -u root -p root -d python -c car --file car --headerline --type csv -f field
B. 在本地导出了,然后在www/wwwroot/dist下创建一个文件(我创了mydb),用来放数据库文件
- 然后将数据库文件(json 或 csv 格式)上传至云服务器 /www/wwwrootdist/mydb 文件夹下
B1 导入
命令格式: mongoimport -d 数据库名字 -c 集合名字 --file “从哪里导入”
但是这里我们还要指定主机名和端口号, 还有,直接运行命令,不要先运行mongo再运行导入命令,我入坑过哈哈
//变成这样:mongoimport -h 主机名:端口 -u 用户名 -p 密码 -d 数据库名 -c 集合名 --file 文件地址(如: /www/wwwroot/reading/db/words.json)
比如: 我要将上面导出的user.json导入至我的数据库ManageSystem下面的users集合, file后面家双引号
mongoimport -h 127.0.0.1:27017 -u root -p root -d ManageSystem -c users --file “/www/wwwroot/mydb/user.json”
然后一个个导入数据库就好了
此时,项目已经部署完成了。可以正常访问了,这是我的毕设
我遇到的问题:
都配置好了,静态文件加载正常,接口访问404?
我是因为前端打包baseURL设置问题,现在的配置文件就是我成功时候的配置文件,大家如果也出现请求后端失败,去看看接口,有没有正常时http:公网ip/api 这样
总结: 这是我第一次部署,过程也遇到很多问题,项目也还没有进行优化等操作,只是部署项目运行起来了,成功了也很高兴,学到了很多,大家有问题可以评论交流。