前言:本人前端小白,大四毕业生,最近在准备找工作中,1月份的时候对着教学视频写了一个vue项目吧,最近两天把他整理好,买了服务器,准备把他放到服务器上去,然后简历上就能写个项目链接了。从购买服务器到上线成功捣鼓了两天,中途不停的冒出各种小错误,百度搜索各种帖子找不到我想要的答案,头都大了,不过功夫不负有心人,还好我捣鼓出来了,于是我准备认真写下这篇总结。嘻嘻嘻~
我购买的是阿里云的云服务器ESC CentOS 7.3 64位
一、实现远程ssh连接
我选择的远程连接工具是FinalShell
密码为你设置的实例密码
连接上FTP成功显示
二·、安装系统环境
1、安装Node
按下面代码一条条来
// 下载Node.js安装包。
wget https://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.xz
// 解压文件
tar xvf node-v6.9.5-linux-x64.tar.xz
// 创建软链接,就可以在任意目录下直接使用node和npm命令
ln -s /root/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v6.9.5-linux-x64/bin/npm /usr/local/bin/npm
// 测试是否安装成功,
node -v
npm -v
对于创建软链接个人感觉有点像Windows安装程序配置全局环境变量的意思
安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//创建软链接
ln -s /root/node-v6.9.5-linux-x64/bin/cnpm /usr/local/bin/cnpm
2、安装解压工具
yum install -y unzip zip
3、安装pm2
npm install pm2 -g
// 创建软链接
ln -s /root/node-v6.9.5-linux-x64/bin/pm2 /usr/local/bin/pm2
4、安装vue脚手架vue-cli
cnpm install -g vue-cli
// 创建软链接
ln -s /root/node-v6.9.5-linux-x64/bin/vue /usr/local/bin/vue
5、安装mysql(这一块没写好,安装忘记怎么详细安装了)
// 下载mysql安装包
wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz
// 解压
tar xzvf mysql-5.7.24-linux-glibc2.12-x86_64.tar.gz
// 将解压出来的文件夹移动到/usr/local/下
mv mysql-5.7.24-linux-glibc2.12-x86_64 /usr/local/
// 把这很长的文件夹名修改为mysql
mv mysql-5.7.24-linux-glibc2.12-x86_64 mysql
// 初始化密码
// 根据初始化密码登录mysql修改密码
// 修改mysql密码
// 用mysql初始化密码 mysql -u root -p 进入后
set password for mydb@localhost = password('rootyh');
CREATE USER 'mydb'@'localhost' IDENTIFIED BY 'rootyh';
// 即可使用 mysql -u mydb -p 密码rootyh登录了
// 赋予mydb用户所有权限
GRANT ALL ON *.* TO 'mydb'@'localhost';
// 在用户中创建数据库并导入数据库
create database mydb default charset=utf8;
use mydb;
source /var/www/DB/mydb.sql;
三、准备目录放项目
运用finalShell工具新建一个文件夹准备放项目(文件夹位置和名称随意)
由于我的项目时前后端分离的项目我在www文件夹下创建了两个文件夹,vue_dist 和 vue_server (vue_dist放前端项目,vue_server放后台)
1.vue_dist文件夹内容如下
// 进入vue_dist目录中,输入下面命令初始化项目
cnpm init -y
由于本人后台node项目用到express第三方包且开启了gzip配置,需要安装下他们两
cnpm install express -S
cnpm install compression -S
配置到环境后将本地项目build后的dist文件夹打包通过finalShell传到此文件夹中并解压,此处一定注意:项目打包前
就是这个坑坑的我好苦,一直是前台能打开,却不能连上后台数据!
创建app.js文件写入
const express = require('express')
const compression = require('compression')
const app = express()
// 使用中间件compression一定要写到 静态资源托管之前
app.use(compression())
// 静态资源托管
app.use(express.static('./dist'))
app.listen(80, () => {
console.log('server is running')
})
用pm2启动
pm2 start app.js --name vue_dist
2、vue_server 文件夹直接放后台node项目
并用pm2 启动
pm2 start app.js --name vue_server
四、回到阿里云安全组开放后端项目中用到的接口
那一切就搞定了嘻嘻嘻~
今天好累,暂且先写这么多吧,改天再来补一补,美化一下