vue+node+mysql项目部署上线阿里云服务器centos--最简单的方法让项目跑起来

前言:本人前端小白,大四毕业生,最近在准备找工作中,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

四、回到阿里云安全组开放后端项目中用到的接口
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
那一切就搞定了嘻嘻嘻~

今天好累,暂且先写这么多吧,改天再来补一补,美化一下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值