Vue-----nginx反向代理

1、nginx介绍

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

2、安装nginx

yum install -y nginx

设置开机启动

systemctl start nginx.service
systemctl enable nginx.service

nginx默认使用端口 80， ecs实例没有开启端口80，默认只有 22 和 3389
点击

浏览器访问自己的 公网IP 地址 就可以看到如下画面

3、部署自己的web应用

将自己的vue项目 运行如下命令打包

cnpm / npm run build

cd /usr/share/nginx/html

直接公网IP访问项目，发现项目缺失css文件以及js文件
因为运行打包项目默认打包的是绝对地址

html文件就可以看做是绝对地址，dist目录是相对地址

no1： 解决办法
将dist目录下的东西除了index.html代码之外，全部上传到html文件中 --- 意味着绝对地址处有这些文件
当访问 http://ip/dist 时，就可以看到项目了

no2:解决办法
默认打包的项目时绝对地址，将打包的地址改为相对地址
vue.config.js


删除原先的 html/dist
重新上传

no3：--- 将dist目录设置为跟目录
在服务器运行

cd /etc/nginx
vi nginx.conf
修改代码如下 fn + i 可编辑

esc
:wq!

重新启动nginx服务器

/sbin/nginx -s reload

4、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版本，当前使用的版本为v7.4.0。返回结果如下所示。

nvm ls

测试node版本

node -v

如果要切换版本

nvm use 8.12.0

本地创建一个express项目

express myapp --view=ejs
cd /usr/local/src

cd myapp
npm i
npm run start
一定要记得配置3000端口
http://47.103.82.2:3000

如果想要删除文件

rm -rf 文件名

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

导出数据
mongoexport -h localhost:27017 -d 数据库名称 -c 数据库集合 -o 数据库地址
mongoexport -h localhost:27017 -d sh1904 -c users -o d:/data/users.json

6、ECS安装mongodb

紧供参考

在终端输入命令等待安装:

cd /usr/local
wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.2.tgz
tar -zxvf mongodb-linux-x86_64-3.6.2.tgz
mkdir mongodb
cd /usr/local/mongodb
mkdir data
mkdir data/db
mkdir data/logs
cd /usr/local/mongodb-linux-x86_64-3.6.2/bin
./mongod --dbpath=/usr/local/mongodb/data/db --logpath=/usr/local/mongodb/data/logs/mongodb.log --fork

安装

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

cd /usr/lcoal
下载文件
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

启动mongodb

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

7、导入数据

将本地导出的三个文件上传到服务器，上传到 /usr/local/src/myapp/data

cd /usr/local/src/myapp
mkdir data

远程数据库导入数据

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

创建数据库以及集合

use sh1904
db.createCollection('users')
mongoimport --db 数据库名称 --collection 集合名称 --file 文件地址
./mongoimport --db sh1904 --collection users --file /usr/local/src/myapp/data/users.json

测试导入的数据

cd /usr/local/mongodb/bin
./mongo
use sh1904
db.users.find()

8、安装pm2模块 开启express项目的长连接

npm i pm2 -g
cd /usr/local/src/myapp
开启项目
pm2 start ./bin/www --name=1904

关闭项目

pm2 stop all
浏览器运行 http://47.103.82.2:3000/api/users 查看效果

9、去掉第8步的3000端口

借助nginx

cd /etc/nginx
vi nginx.conf

重新启动nginx服务器

/sbin/nginx -s reload

此时访问 http://47.103.82.2/api/users 查看效果

10、去掉IP地址，使用域名

域名 --- 解析 --- 添加记录 --- 确定

11、使用自己的node服务器来上线前端的代码

把自己的dist目录上传到 public 静态资源文件中

打包项目需要注意
修改路由模式为hash
配置引入文件的方式为相对路径

---------------------------------------------------------------------------------------------文章来自吴大勋（大勋说）---------------------------------------------------------------------------------------------