准备项目
- vue 项目
- koa 项目
购买服务器以及服务器设置
- 镜像设置
我购买的是腾讯云服务器,采用的是node.js镜像,省的我自己安装环境了。
- 重置密码, 后面所有的服务器命令操作均在vnc登录后的web页面中执行。
项目设置
- vue项目
增加 vue.config.js文件, 随后进行npm run build打包
module.exports = {
/* 部署应用包的基本URL */
publicPath: "./",
/* 生产环境构建文件的目录 defalut: dist */
outputDir: "dist",
/* 放置生成的静态文件目录(js css img) */
assetsDir: "static",
/* 指定生成的index.html 输出路径 相对 default: index.html */
indexPath: "index.html",
/* 指定生成文件名中包含hash default: true */
filenameHashing: true,
/* 是否保存时 lint 代码 */
lintOnSave: process.env.NODE_ENV === "production",
/* 是否使用编译器 default: false */
runtimeCompiler: false,
/* 默认babel-loader会忽略node_modules中的文件,你想显示的话在这个选项中列出来 */
// transpileDependencies: [],
/* 生产环境的source map */
productionSourceMap: false,
// crossorigin: "",
integrity: false,
configureWebpack: {
resolve: {
alias: {
'assets': '@/assets',
'components': '@/components',
'views': '@/views',
}
}
},
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
}
}
- koa项目
在koa项目根目录下新建文件夹plank-web(自定义名称),将vue项目打包的dist文件夹中的文件复制进此文件夹。
koa项目 app.js中增加以下代码,目的是替换掉原koa 的web页面。
const app = new Koa() // 应该已经有了
app.use(require('koa-static')(__dirname + '/plank-web')) // plank-web为自定义文件夹名
koa项目中bin/www文件中更改端口号3000 为3001,因为node服务占据了3000端口,如果要继续使用3000端口,需要先kill掉进程,太麻烦,于是我直接改为了3001端口.(记得vue项目调用api时也更改为3001端口)
var port = normalizePort(process.env.PORT || '3001'); // 默认为3000
服务器配置mysql
// 检测是否已安装mysql
rpm -qa | grep mysql
// 安装mysql和mysql-server
yum install -y mysql
yum install -y mysql-server
// 启动mysql
service mysqld start
// 查看mysql启动状态
service mysqld status
// 设置mysql密码 可能需要输入原密码 默认密码为空
mysqladmin -u 用户名 password 密码
如:mysqladmin -u root password 123456
// 修改mysql密码 需要输入原密码 默认密码为空
mysqladmin -u 用户名 -p password 新密码
如:mysqladmin -u root -p password 123456
// 创建数据库以及执行sql文件
- mysql -u root -p
- 输入密码
- use mysql // 使用数据库mysql
- create database 数据库名 如: create database abc
- use abc // 使用数据库mysql
- source 文件地址 // 执行sql文件 sql文件使用xftp上传至服务器
koa与vue项目部署服务器
- 下载xftp
- 通过xftp将koa项目根目录下所有文件上传至服务器任意文件夹下,其中包括已经在根目录下的vue的打包文件
- 通过上文说的VNC登录进入刚刚上传的koa项目根目录
- 执行npm install
- npm start 即开始运行项目。此时登录 ip:3001即可见页面。
配置pm2
采用npm start运行的项目,控制台一关闭便停止了,可以采用pm2长期运行项目
- npm install -g pm2
- 到koa根目录下 执行 pm2 start bin/www
项目成功运行。
pm2其他常用指令
- pm2 stop 应用名(即 上图中的name列的文字,如上图中为 pm2 stop www) // 停止应用
- pm2 start 应用名 // 启动应用
- pm2 delete 应用名 // 删除应用
- pm2 list // 查看应用列表
nginx配置
由于vue中我使用的后端地址为直接写入,即不通过devServer,故也不需要nginx进行代理,于是未进行nginx配置。
上传服务器打包前,将localhost改为ip即可,当然直接使用localhost可能也是行的,我没尝试。