Vue---阿里云服务器部署项目

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

2、登陆查看云服务器

e34e1c9d909f8f7264d45224b611a0e8.png

61952024f6f0a3180ac096da432bc850.png

8f06820ddb42820bc4b7287e18c319f4.png

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

973236a4e21dc904047f332d36bbb6de.png

关闭服务器 ---- 关闭电脑
36bd19cdee5562c8e8efbb6d191731eb.png
a5f5a98035158bc7926e838e72bfe0a6.png
560790f1944058e57646a962b4dbb690.png
3489187a7c49e6ff3ffa50d426bf1741.png
527f0d9178c585358341078a69e6d94b.png
ccaac996ba184e05144d25d3dbf83ae5.png
36b9b71fafa5e667667e94bb3f1f8556.png
945f5b7ccd1012a90f49c99e2a6a500d.png
ef9e283a0abe138bcb68b2ccc445ea8e.png
b7cfde7bc50acd4c012f28c7c84cb5e9.png

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

finalshell

5、连接服务器

c0a46fdabff65a8931a4a80d2dbfa4d7.png

选择SSH连接

fc8cc600169c6dd7cd34462b0be50fc2.png
e48abe2a381df5c3a7757a1793a053b1.png
bc64b14aa9eeec95fa22caf47980e5b3.png
c85885eb40565d7248e232e56a283b37.png

6、nginx介绍

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

7、安装nginx

yum install -y nginx

cfbbbf1900179d133fbe5139f31677e9.png

设置开机启动

systemctl start nginx.service
systemctl enable nginx.service

80383a4652ee37fb09df7c02100f2808.png

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

413dc240a1b8ae71dc8cb7aed24e4ffd.png

43a15d70250d9bd89b6674554b9a2ef4.png

nginx默认使用端口 80, ecs实例没有开启端口80,默认只有 22 和 3389
8e297ae95a32e6b10157c46dd709b4cc.png
def22def55ca26f6be06d144e58bfba3.png
b374865495f73536956f7f9bc2ff9beb.png
690caaa9074b94450d3422c2a3f9a1fa.png
c5b4020754fc0601be7126c0199488e3.png
bf0d72d7a2a4e519d087fbb6f7fafaf3.png

此时浏览器再次访问,表明当前服务器中nginx安装配置完成
c00db89b61385c07d0b02029be4b7cbb.png

8、部署自己的Vue项目

8.1 打包自己的项目

37c6a09f0845ba54edcff5db0b553b3c.png

3f29ecd53f51f7bd85bc0d06cadcd336.png
972b9d5bc7d2e4b9ab8013a353bdef93.png

cnpm run build

abc1e4bc5dd652625d4316d829b98836.png

8.2 上传自己的vue项目

进入 nginx 代码的存放文件

be64bc599b4add1bc0291f50abfa4554.png

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

6b68dc684ba04178176abd94577a3b3b.png
8547541741d575159c0550a8e9e93e25.png

发现本地的接口全部都访问不到,是因为在开发时使用的是 代理服务器,项目上线时,反向代理就失效(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
03a13259a25ae1353998f2dc2ea448f4.png

git clone https://github.com/cnpm/nvm.git ~/.nvm && cd ~/.nvm && git checkout git describe --abbrev=0 --tags
bb1498f0fdc4d2c0d96d74e57a522640.png

激活NVM。

echo ". ~/.nvm/nvm.sh" >> /etc/profile
source /etc/profile
2b7acecd071ec3232989f37a16e2d1c7.png

列出Node.js的所有版本。

nvm list-remote

ae5b967e767cc3943c178481587b572f.png

da4efca82cab7075888ef3542bca3ee1.png

安装多个Node.js版本。

nvm install v8.12.0

7d014203166c698545ad982f2861b14f.png

nvm install v10.15.0

8524912ebca50b24918a1fb3add173e5.png

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

nvm ls

f706a4439dcecd4c085e7d8cad6e9807.png

测试node版本

node -v

51499360b3376cf2542e0b76d9b8a075.png

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

nvm use 8.12.0

cf691c3b5a5a0a282618b666c43326ce.png

本地创建一个express项目

express myapp --view=ejs

a663817e42e525d9f9e7d31a97d09655.png

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

cd /usr/local/src
27f91bcd38f014c86e2ae52208d136a1.png
23728b1db67b15ab893d45f7489ad2d8.png

cd serverapp
npm i
npm run start

5de68912f17c9bc067ab834e2ae1e61f.png

一定要记得配置3000端口(参照第7步的nginx 的 80端口的配置)
http://47.92.152.70:3000/
cac43877e765878f70943a2ef32219ae.png

如果想要删除文件

rm -rf 文件名

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

数据库文件
7a4951d7c8b3b3210ab425060bf5b5e0.png

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

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

46653a64ed71719cefe6bed23010ed2c.png
3b3124f39a92a73944b33f6b0ab55e4f.png
ff58db5610115dc4df15a77174ce8039.png

11、ecs服务器安装mongodb

进入文件夹/usr/local,下载mongodb源代码:

cd /usr/local

6b78af80dc974fbc2b9b07b825e0c6a1.png

下载文件

wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.0.9.tgz

9cf659eec11f0e9643784d4e575490d6.png

解压文件

tar zxvf mongodb-linux-x86_64-4.0.9.tgz

e4fe03136e9023335bcdcb34040c568f.png

删除下载的安装包

rm -rf mongodb-linux-x86_64-4.0.9.tgz

f6e77926ddbd5053fcef12af6e54b885.png

重命名文件夹为mongodb

mv mongodb-linux-x86_64-4.0.9 mongodb

d8cedb42c8283826ae91974343d96d60.png

在var文件夹里建立mongodb文件夹,并分别建立文件夹data用于存放数据,logs用于存放日志

cd /var
mkdir mongodb
cd mongodb
mkdir data logs

3bf46e53bff3e163c2de1916dd544565.png

设置mongodb开机启动

cd /etc/rc.d
vi rc.local

f2cf2f80f88f28b85952e844440ed065.png

将mongodb启动命令追加到本文件中,让mongodb开机自启动:

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

4706d33c7e182ae2e33de48b6e35dd90.png

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

启动mongodb

cd /usr/local/mongodb/bin

9c46e307a599a9ae8160eabc6253b876.png

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

0eef2080c5cf1e679523a79ac0b0f018.png

测试mongodb

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

ed1679a19b89cc421da1f3dde384c193.png

12、导入数据库数据

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

cd /usr/local
mkdir data

619172ff2384f98e86ed7708da850c1a.png

cd data

39732fd2fefb2430ffc7e64aa8f9dee3.png

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

c7e2f35f2aa94d1a9a1f98a2732b1201.png

./mongoimport --db dbname --collection collectionname --file url

086f7a5fb719ed2f391688b453738ca6.png

测试数据库

./mongo

4e660210e60913124083b1e1bdfda4c1.png

13、上传后台的node代码

cd /usr/local/src
mkdir myapp

上传代码

664d04933ad633e744d04e1d287eecf6.png

npm i
npm run start
34eeba2bf237f430192e90b7d4a4e318.png

浏览器测试

3df9f54319c8d81841bd5ab3be218d9d.png

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

14、安装node的启动命令pm2

npm i pm2 -g

94c39c7b34f7ec98d7e75c094c5c7f6c.png

cd /usr/local/src/myapp

启动服务器

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

b1c8746fa31c25c4131358de51e27877.png

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

如果想要关闭此服务

pm2 stop all

d802164e510880ffdd299cf513a90164.png
此时浏览器访问,接口不可用

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

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

通过nginx的反向代理实现

找到nginx的配置文件

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

df5cead42473ac3e6666539a07e0766a.png

配置更改、重启nginx

/sbin/nginx -s reload

8d20273f897ae241a6361df1987c9eb7.png

f075be49d76400a68873270256e5ec11.png

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

cdfd2d5714ef8cfc58289d9580d1c948.png

浏览器访问 http://47.92.152.70/ 即可
2f817ab93ae9ca2a74b1f27565eb42b9.png

17、手机测试代码

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

18、使用域名代替 IP地址

02c92060a02e45c54e5f40710eb19991.png
ef2434e1c55adb1218cbc06b3abb5c0e.png
4c9de1499dc2d9d2d95d926fedddc7a8.png
0349d3b553c240b278c853c0e32412fe.png
45f8918da7fffc6c39d862223e6560f8.png

---------------------------------------------------------------------------------------------文章来自吴大勋(大勋说)---------------------------------------------------------------------------------------------
posted @ 2020-04-21 00:22  haccer  阅读(2688)  评论(1编辑  收藏  举报