六、阿里云ECS服务器+项目部署

1、准备一台云服务器 - 阿里云ECS云服务器

六、阿里云ECS服务器+项目部署_第1张图片
六、阿里云ECS服务器+项目部署_第2张图片
六、阿里云ECS服务器+项目部署_第3张图片
六、阿里云ECS服务器+项目部署_第4张图片
如果你是学生,如果你是学生,如果你是学生,重要的事情说三遍,你可以购买学生机,更便宜,点击链接购买学生机
六、阿里云ECS服务器+项目部署_第5张图片
六、阿里云ECS服务器+项目部署_第6张图片

2、登陆查看云服务器

六、阿里云ECS服务器+项目部署_第7张图片

六、阿里云ECS服务器+项目部署_第8张图片

六、阿里云ECS服务器+项目部署_第9张图片

3、重做服务器系统 --- 并不是必须

六、阿里云ECS服务器+项目部署_第10张图片

关闭服务器 ---- 关闭电脑

六、阿里云ECS服务器+项目部署_第11张图片
六、阿里云ECS服务器+项目部署_第12张图片

第一可以更换操作系统

六、阿里云ECS服务器+项目部署_第13张图片

第二可以重新初始化磁盘(跟第一选一个)
六、阿里云ECS服务器+项目部署_第14张图片
六、阿里云ECS服务器+项目部署_第15张图片
六、阿里云ECS服务器+项目部署_第16张图片
六、阿里云ECS服务器+项目部署_第17张图片
六、阿里云ECS服务器+项目部署_第18张图片

4、准备连接服务器的工具

点击finalshell下载

5、连接服务器

六、阿里云ECS服务器+项目部署_第19张图片

选择SSH连接

六、阿里云ECS服务器+项目部署_第20张图片
六、阿里云ECS服务器+项目部署_第21张图片
六、阿里云ECS服务器+项目部署_第22张图片
六、阿里云ECS服务器+项目部署_第23张图片

6、nginx介绍

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。
负载均衡、反向代理

7、安装nginx

yum install -y nginx

设置开机启动

systemctl start nginx.service
systemctl enable nginx.service

浏览器打开此地址查看效果

六、阿里云ECS服务器+项目部署_第24张图片

六、阿里云ECS服务器+项目部署_第25张图片

nginx默认使用端口 80, ecs实例没有开启端口80,默认只有 22 和 3389
六、阿里云ECS服务器+项目部署_第26张图片
六、阿里云ECS服务器+项目部署_第27张图片

六、阿里云ECS服务器+项目部署_第28张图片
六、阿里云ECS服务器+项目部署_第29张图片
六、阿里云ECS服务器+项目部署_第30张图片

此时浏览器再次访问,表明当前服务器中nginx安装配置完成
六、阿里云ECS服务器+项目部署_第31张图片

8、部署自己的Vue项目

8.1 打包自己的项目

六、阿里云ECS服务器+项目部署_第32张图片

六、阿里云ECS服务器+项目部署_第33张图片

六、阿里云ECS服务器+项目部署_第34张图片
六、阿里云ECS服务器+项目部署_第35张图片

cnpm run build

六、阿里云ECS服务器+项目部署_第36张图片

 

8.2 上传自己的vue项目

进入 nginx 代码的存放文件

六、阿里云ECS服务器+项目部署_第37张图片

将打包的dist文件夹拖入该文件夹内

六、阿里云ECS服务器+项目部署_第38张图片
六、阿里云ECS服务器+项目部署_第39张图片

发现本地的接口全部都访问不到,是因为在开发时使用的是 代理服务器,项目上线时,反向代理就失效(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
六、阿里云ECS服务器+项目部署_第40张图片

git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev=0 --tags
六、阿里云ECS服务器+项目部署_第41张图片

激活NVM。

echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile
六、阿里云ECS服务器+项目部署_第42张图片

列出Node.js的所有版本。

nvm list-remote

六、阿里云ECS服务器+项目部署_第43张图片

六、阿里云ECS服务器+项目部署_第44张图片

安装多个Node.js版本。

nvm install v8.12.0

六、阿里云ECS服务器+项目部署_第45张图片

nvm install v10.15.0

六、阿里云ECS服务器+项目部署_第46张图片

运行nvm ls查看已安装的Node.js版本,出现当前使用版本为 10.15.0

nvm ls

测试node版本

node -v

如果要切换版本(如果打开服务器,node和npm指令不可用,需要先切换版本)

nvm use 8.12.0

六、阿里云ECS服务器+项目部署_第47张图片

本地创建一个express项目

express myapp --view=ejs

六、阿里云ECS服务器+项目部署_第48张图片

进入服务器的相关目录,上传项目

cd /usr/local/src
六、阿里云ECS服务器+项目部署_第49张图片
六、阿里云ECS服务器+项目部署_第50张图片

cd serverapp
npm i
npm run start

六、阿里云ECS服务器+项目部署_第51张图片

一定要记得配置3000端口(参照第7步的nginx 的 80端口的配置)
http://47.92.152.70:3000/
六、阿里云ECS服务器+项目部署_第52张图片

如果想要删除文件

rm -rf 文件名

10、导出本地数据库中的数据备用

数据库文件
六、阿里云ECS服务器+项目部署_第53张图片

找到 mongodb的目录的 bin目录,shift + 右键 打开命令行窗口

mongoexport -h localhost:27017 -d dbname -c collectionname -o url

六、阿里云ECS服务器+项目部署_第54张图片
六、阿里云ECS服务器+项目部署_第55张图片
六、阿里云ECS服务器+项目部署_第56张图片

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

六、阿里云ECS服务器+项目部署_第57张图片

删除下载的安装包

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

六、阿里云ECS服务器+项目部署_第58张图片

设置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

六、阿里云ECS服务器+项目部署_第59张图片

也可以通过finalshell工具打开该文件,修改保存上传

启动mongodb

cd /usr/local/mongodb/bin

六、阿里云ECS服务器+项目部署_第60张图片

./mongod --dbpath=/var/mongodb/data --logpath /var/mongodb/logs/log.log -fork

六、阿里云ECS服务器+项目部署_第61张图片

测试mongodb

cd /usr/local/mongodb/bin
./mongo

六、阿里云ECS服务器+项目部署_第62张图片

12、导入数据库数据

12.1 将本地导出的数据上传到 远程服务器

cd /usr/local
mkdir data

六、阿里云ECS服务器+项目部署_第63张图片

cd data

六、阿里云ECS服务器+项目部署_第64张图片

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

六、阿里云ECS服务器+项目部署_第65张图片

测试数据库

./mongo

六、阿里云ECS服务器+项目部署_第66张图片

13、上传后台的node代码

cd /usr/local/src
mkdir myapp

上传代码

六、阿里云ECS服务器+项目部署_第67张图片

npm i
npm run start
六、阿里云ECS服务器+项目部署_第68张图片

双击打开package.json,修改接口文档的生成地址

六、阿里云ECS服务器+项目部署_第69张图片

六、阿里云ECS服务器+项目部署_第70张图片

重新远程生成接口文档

> npm install apidoc --global

六、阿里云ECS服务器+项目部署_第71张图片

> apidoc -i api/ -o public/apidoc

> npm run start

浏览器测试

 

六、阿里云ECS服务器+项目部署_第72张图片

此时如果关闭了服务器,接口也将不可以访问

14、安装node的启动命令pm2

npm i pm2 -g

六、阿里云ECS服务器+项目部署_第73张图片

cd /usr/local/src/myapp

启动服务器

pm2 start ./bin/www --name=1908shop

六、阿里云ECS服务器+项目部署_第74张图片

关闭服务器,浏览器访问即可

如果报错如下

六、阿里云ECS服务器+项目部署_第75张图片

> nvm use 8.12.0

六、阿里云ECS服务器+项目部署_第76张图片

如果想要关闭此服务

pm2 stop all

六、阿里云ECS服务器+项目部署_第77张图片
此时浏览器访问,接口不可用

pm2 start ./bin/www --name=1908shop

15、去掉服务器的3000端口号

通过nginx的反向代理实现

找到nginx的配置文件

cd /etc/nginx
vi nginx.conf (还可用可视化)

六、阿里云ECS服务器+项目部署_第78张图片

配置更改、重启nginx

/sbin/nginx -s reload

六、阿里云ECS服务器+项目部署_第79张图片

16、将vue项目打包的dist文件夹上传至自己的项目的public文件夹

六、阿里云ECS服务器+项目部署_第80张图片

浏览器访问 http://47.92.152.70/ 即可
六、阿里云ECS服务器+项目部署_第81张图片

17、手机测试代码

打开网址 https://cli.im/,输入自己的服务器地址,生成二维码,手机扫码测试

18、使用域名代替 IP地址

六、阿里云ECS服务器+项目部署_第82张图片

六、阿里云ECS服务器+项目部署_第83张图片
六、阿里云ECS服务器+项目部署_第84张图片
六、阿里云ECS服务器+项目部署_第85张图片

你可能感兴趣的:(node,前端,服务器,服务器,nginx,vue,生产环境,express)