Vue---阿里云服务器部署项目
1、准备一台云服务器 - 阿里云ECS云服务器
2、登陆查看云服务器
3、重做服务器系统 --- 并不是必须
关闭服务器 ---- 关闭电脑
4、准备连接服务器的工具
finalshell
5、连接服务器
选择SSH连接
6、nginx介绍
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。
负载均衡、反向代理
7、安装nginx
yum install -y nginx
设置开机启动
systemctl start nginx.service
systemctl enable nginx.service
浏览器打开此地址查看效果
nginx默认使用端口 80, ecs实例没有开启端口80,默认只有 22 和 3389
此时浏览器再次访问,表明当前服务器中nginx安装配置完成
8、部署自己的Vue项目
8.1 打包自己的项目
cnpm run build
8.2 上传自己的vue项目
进入 nginx 代码的存放文件
将打包的dist文件夹拖入该文件夹内
发现本地的接口全部都访问不到,是因为在开发时使用的是 代理服务器,项目上线时,反向代理就失效(vue.config.js中的devServer配置失效),可以使用nginx实现项目上线的反向代理---------接口上线
9、ECS服务器安装node
使用nvm安装多版本的node
NVM(Node Version Manager)是Node.js的版本管理软件,使您可以轻松在Node.js各个版本间进行切换。适用于长期做 node 开发的人员或有快速更新node版本、快速切换node版本的场景。
使用git将源码克隆到本地的~/.nvm目录下,并检查最新版本。
yum install git
git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout
git describe --abbrev=0 --tags
激活NVM。
echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile
列出Node.js的所有版本。
nvm list-remote
安装多个Node.js版本。
nvm install v8.12.0
nvm install v10.15.0
运行nvm ls查看已安装的Node.js版本,出现当前使用版本为 10.15.0
nvm ls
测试node版本
node -v
如果要切换版本(如果打开服务器,node和npm指令不可用,需要先切换版本)
nvm use 8.12.0
本地创建一个express项目
express myapp --view=ejs
进入服务器的相关目录,上传项目
cd /usr/local/src
cd serverapp
npm i
npm run start
一定要记得配置3000端口(参照第7步的nginx 的 80端口的配置)
http://47.92.152.70:3000/
如果想要删除文件
rm -rf 文件名
10、导出本地数据库中的数据备用
数据库文件
找到 mongodb的目录的 bin目录,shift + 右键 打开命令行窗口
mongoexport -h localhost:27017 -d dbname -c collectionname -o url
11、ecs服务器安装mongodb
进入文件夹/usr/local,下载mongodb源代码:
cd /usr/local
下载文件
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.9.tgz
解压文件
tar zxvf mongodb-linux-x86_64-4.0.9.tgz
删除下载的安装包
rm -rf mongodb-linux-x86_64-4.0.9.tgz
重命名文件夹为mongodb
mv mongodb-linux-x86_64-4.0.9 mongodb
在var文件夹里建立mongodb文件夹,并分别建立文件夹data用于存放数据,logs用于存放日志
cd /var
mkdir mongodb
cd mongodb
mkdir data logs
设置mongodb开机启动
cd /etc/rc.d
vi rc.local
将mongodb启动命令追加到本文件中,让mongodb开机自启动:
/usr/local/mongodb/bin/mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
也可以通过finalshell工具打开该文件,修改保存上传
启动mongodb
cd /usr/local/mongodb/bin
./mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork
测试mongodb
cd /usr/local/mongodb/bin
./mongo
12、导入数据库数据
12.1 将本地导出的数据上传到 远程服务器
cd /usr/local
mkdir data
cd data
12.2 从服务器导入 数据库的数据
服务器上json文件的路径
- /usr/local/data/addresses.json
- /usr/local/data/banners.json
- /usr/local/data/carts.json
- /usr/local/data/comments.json
- /usr/local/data/orders.json
- /usr/local/data/pros.json
- /usr/local/data/users.json
cd /usr/local/mongodb/bin
./mongoimport --db dbname --collection collectionname --file url
测试数据库
./mongo
13、上传后台的node代码
cd /usr/local/src
mkdir myapp
上传代码
npm i
npm run start
浏览器测试
此时如果关闭了服务器,接口也将不可以访问
14、安装node的启动命令pm2
npm i pm2 -g
cd /usr/local/src/myapp
启动服务器
pm2 start ./bin/www --name=1908shop
关闭服务器,浏览器访问即可
如果想要关闭此服务
pm2 stop all
此时浏览器访问,接口不可用
pm2 start ./bin/www --name=1908shop
15、去掉服务器的3000端口号
通过nginx的反向代理实现
找到nginx的配置文件
cd /etc/nginx
vi nginx.conf (还可用可视化)
配置更改、重启nginx
/sbin/nginx -s reload
16、将vue项目打包的dist文件夹上传至自己的项目的public文件夹
浏览器访问 http://47.92.152.70/ 即可
17、手机测试代码
打开网址 https://cli.im/,输入自己的服务器地址,生成二维码,手机扫码测试