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
配置引入文件的方式為相對路徑

---------------------------------------------------------------------------------------------文章來自吳大勛（ 大勛說）---------------------------------------------------------------------------------------------