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

最新推荐文章于 2023-04-15 21:41:59 发布

鱼缸盖被子了

最新推荐文章于 2023-04-15 21:41:59 发布

阅读量2.5k

点赞数 8

文章标签： node.js vue.js

本文链接：https://blog.csdn.net/yh8899abc/article/details/105201742

版权

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