文章目录
宝塔的创建和使用
文章目录
- 系列文章目录
- 前言
- 一、申请阿里云服务器和宝塔安装
- 二、使用步骤
- 1.前端react项目打包上传宝塔
- 2.后端node.js文件打包上传宝塔
- 总结
前言
学完尚硅谷课题，宋晓飞全栈项目，基于react和mongoDB数据，以及nodee.js文件创建的项目。
整个部署时间约10min（顺利情况下）
一、如何申请阿里云服务器和获取宝塔？
以下是B站视频的Vue项目上传，这里讲了详细获取阿里云服务器和宝塔的创建。
上述视频重点：开放阿里云的端口号。申请完阿里云服务器和宝塔之后，如下：
记得在软件商店下载pm2管理器和mongdb数据库！！！
二、使用步骤
1.上传后端server.js文件
观看B站视频，按照同样的步骤上传服务器文件，即server.js文件，下面说一下不同的地方和注意的事项，首先我们是node写的后端服务器，和Vue的不一样，只需要在server.js文件，修改一下需要监听的端口8889（因为我在阿里云和宝塔开放的是8889，你可以开放其他端口如8887等）
注意①：后端server.js文件需要监听8889端口，所以在安全里面开放8889端口（阿里云和宝塔都要开）；
注意②：后端server.js代码需要设置跨域，放在server.js文件代码前面，如下：
确保跨域时可以访问到服务器的数据，加入代码：
本人使用的node里面的express启动的后端服务器，其他的后端服务器可以参照如下链接：
https://www.afengblog.com/detailed-introduction-and-usage-of-access-control-allow-origin.html
// 确保跨域
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});全部的server.js代码如下：
/*
应用的启动模块
1. 通过express启动服务器
2. 通过mongoose连接数据库
说明: 只有当连接上数据库后才去启动服务器
3. 使用中间件
*/
const mongoose = require('mongoose')
const express = require('express')
const app = express() // 产生应用对象
// 确保跨域
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});
// 声明使用静态中间件
app.use(express.static('public'))
// 声明使用解析post请求的中间件
app.use(express.urlencoded({extended: true})) // 请求体参数是: name=tom&pwd=123
app.use(express.json()) // 请求体参数是json结构: {name: tom, pwd: 123}
// 声明使用解析cookie数据的中间件
const cookieParser = require('cookie-parser')
app.use(cookieParser())
// 声明使用路由器中间件
const indexRouter = require('./routers')
app.use('/', indexRouter) //
const fs = require('fs')
// 必须在路由器中间之后声明使用
/*app.use((req, res) => {
fs.readFile(__dirname + '/public/index.html', (err, data)=>{
if(err){
console.log(err)
res.send('后台错误')
} else {
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8',
});
res.end(data)
}
})
})*/
// 通过mongoose连接数据库
mongoose.connect('mongodb://localhost/server_db2', {useNewUrlParser: true})
.then(() => {
console.log('连接数据库成功!!!')
// 只有当连接上数据库后才去启动服务器
})
.catch(error => {
console.error('连接数据库失败', error)
})
app.listen('8889', () => {
console.log('服务器启动成功, 请访问: http://localhost:5000')
console.log('服务器启动成功, 请访问: http://10.22.2.53:5000')
})通过postman测试云端服务器是否启动成功，
若请求数据响应成功，则表示服务器启动成功。接下来进入前端react项目的上传。
2.上传前端项目react文件
参照 一、如何申请阿里云服务器和获取宝塔？的B站视频，上传前端文件build文件，有小伙伴用dist也可以使用dist上传，这里和B站up不一样的地方是，我打包后生产的文件是build而不是dist,但是原理都是一样的，按照B站里面上传前端项目的操作上传打包后的dist文件，下面需要修改的前端配置细节如下：
注意①：因为服务器在阿里云启动了，所以前端之前使用的请求服务器地址不是本机localhost：5000服务器；
注意②：修改代理，在package.son文件下，添加语句"proxy": "http://114.55.60.96:8889"
const BASE = 'http://localhost:5000'必须修改为我们在阿里云启动的服务器
const BASE = 'http://你的阿里云公网ip:8889'具体如下图：
同时需要在package.json文件添加服务器的代理，这样别人在登录自己的网页，就能通过代理把请求发送到服务器，服务器就能返回到他们的网页中
"proxy": "http://你的阿里公网ip:8889",具体如下图：
修改前端请求服务器路径之后，打包npm run build成文件，然后按照B站的视频将打包的文件上传到http文件下（自己按照B站视频在宝塔里面创建http等文件）
3.连接MongoDB数据库
这里和MySQL数据库的创建不一样，如果是MySQL数据库，还请需要自己研究，以下介绍连接MongoDB的数据库，需要下载MongoDB的软件（可以网上下载），来测试是否连接上数据成功。
首先，在宝塔里面需要对数据配置，把bindip监听端口改为0.0.0.0，确保可以连接到本地的MongoDB软件来上传数据库，如下图：
配置文件也要改为0.0.0.0如下图所示
其次，建立数据库server_db2,导入数据（自己电脑的预先保存的json数据），之后打开mongoDB软件，连接云数据库（就是自己创建的数据库server_db2）,测试是否连接到数据如图：
连接成功后，表示本机的数据库和云服务器的数据库相互连通，可以在本机的mongoDB软件上传数据库，如下图：
表示和阿里云的服务器数据库相互连通，可以在本机mongoDB软件进行数据的上传
总结
注意事项如下：
①后端服务器需要修改为自己服务器开放的监听端口号8889（我开放的是8889）；且需要在server.js文件里面，设置跨域的问题，必须加上如下代码，否则login时会报错跨域的问题：
// 确保跨域
app.use(function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
});②前端的请求路径修改为自己公网服务器的ip地址，且请求路径为完整的路径，如下图
③：package.json文件需要设置代理为
"proxy": "http://自己的ip:8889",④：mongo数据库修改配置文件为0.0.0.0：
如果还有别的网址登录出现错误，需要在网站设置为配置文件。
