王者榮耀全棧項目部署到阿里云服務器筆記
原創Charles_GX 最后發布于2020-03-27 01:27:00 閱讀數 177 ?收藏
展開
王者榮耀全棧項目部署到阿里云服務器筆記
學習的項目來自b站的良心up主全棧之巔
第一次寫博客 這里主要總結一下 這兩天部署項目遇到的一些問題(踩得一些坑)

項目簡介
主要有三部分 （admin后臺管理端，web前端展示，以及server服務端）

進行生產環境的編譯
1.手動分別在admin和web文件夾下添加添加環境變量文件 .env.development，添加 VUE_APP_API_URL = http://localhost:3000/admin/api**

2.對axios默認的baseURL進行更改

3.在server的main.js，中添加

app.use('/admin', express.static(__dirname + '/admin')) //靜態文件
1

4.在admin和web中，分別創建vue.config.js配置文件，進行配置

因為默認訪問 /直接跳轉到web前端頁 所以設置路徑會有所不同 web端的vue.config.js如下

5.在admin和web文件夾下運行指令npm run build此時會在server文件夾下生成一個admin和web文件夾
此時server文件夾下的admin和web都是打包好以后的文件
6.在server文件夾下運行指令npm run serve 頁面效果如下

去阿里云購買服務器和域名
1.這里選擇的是便宜的域名 .xyz結尾
阿里云官網
域名的話 境內需要備案境外不用備案相對方便(因為后面需要對http進行https的加密)
2.購買ecs服務器 選擇的是ubantu18.04的操作系統
ecs服務器地址
這里購買好ecs服務器以后需要把公網ip記錄一下 后面會用的到
3.對域名進行解析

一定要選擇記錄類型為A的
通過 gitbash here 執行一下 ssh root@{你的主機名}

也可以在阿里云ecs服務器選擇遠程連接

nginx的安裝與配置
在ubantu上安裝nginx

- apt update
?- ?apt install nginx -y
1
2
nginx安裝好以后可以通過cd var/www里面查看到nginx的一些配置文件

這個如果沒有顯示默認配置頁面 需要去阿里云的安全組規則里添加 80端口

主要需要用到nginx的反向代理 nginx配置文件推薦去一個網站 鏈接
選擇 nodejs 然后輸入自己的域名或者是ip地址

5. MongoDB數據庫的安裝和配置
apt install mongodb-server -y

這里一定要選擇ubantu18的版本 之前因為16版本后面mongorestore恢復數據庫的時候報錯

下載nodejs apt install nodejs 這里剛下載下來的node是八點幾的版本
可以再下載一個npm工具apt install npm下載了npm以后 輸入 npm -v可以查看npm的版本
npm config set registry https://registry.npm.taobao.org
1
將npm的鏡像設置為淘寶鏡像

git 安裝、配置ssh-key
pt install -y git

ssh-keygen

cat /root/.ssh/id_rsa.pub，獲取到的ssh-key，要保存下來

后面需要在github或則碼云等網站上 部署公鑰 用于服務器clone項目

Node.js 安裝、配置淘寶鏡像
apt install -y nodejs
apt install -y npm
npm config set registry https://registry.npm.taobao.org
npm i -g nrm
npm i -g n
n use latest
退出重新連接exit，ssh root@{主機名}
拉取代碼，安裝pm2并啟動項目
向github或者gitee提交代碼
把ssh-keygen，添加到倉庫的公鑰，拉取克隆代碼

在根目錄下創建一個data文件夾

通過git clone從遠程git倉庫中拉取代碼 前面已經上傳到了遠程倉庫
git clone https://gitee.com/orange199853/node-vue-moba
1
進入到 node-vue-moba文件夾下 通過 npm i安裝項目所需要的配置文件
安裝PM2
npm i -g pm2
通過PM2啟動服務
pm2 start index.js
如果修改過一些數據之類的需要手動reload一下 不像nodemon可以自動監聽變化
pm2 reload
pm2 start index.js -f可以強制加載服務

配置 Nginx 的反向代理
在vscode中搜索remote-ssh插件并安裝

下載下來以后需要進行配置 點擊小窗口進入

Hostname 輸入ip地址或者域名
點擊鏈接后會提示輸入密碼
tips:這里可能會遇到的一個報錯

提示連接錯誤的話 可能是 服務器的公鑰進行過更改
ssh連接提示“REMOTE HOST IDENTIFICATION HAS CHANGED! ”解決辦法:

ssh會把你每個你訪問過計算機的公鑰(public key)都記錄在~/.ssh/known_hosts。當下次訪問相同計算機時，OpenSSH會核對公鑰。如果公鑰不同，OpenSSH會發出警告，避免你受到DNS Hijack之類的***。

既然找到原因了，那就好解決了，直接編輯~/.ssh/known_hosts，將需要連接的那個IP相關rsa信息刪除即可。，再次成功的話，它會將內容繼續寫入到 ~/.ssh/known_hosts中。

輸入密碼，連接

進入==/etc/nginx/==

去nginx配置網站
選擇nodejs，進入server，填入自己域名，https不啟用，最后下載。

把nginxconfig.io文件夾復制過去，把available里面的文件復制過去，把enabled里面的文件復制過去

重載nginx的配置文件，service nginx reload

重啟服務器pm2 start server/index.js

遷移本地數據到服務器 (mongodump)
導出數據庫，mongodump -d node-vue-moba

把dump文件夾整個復制過去

進入到root文件夾下

mongorestore，恢復數據庫 這里需要注意 如果是用的16.04版本的ubantu可能會出現報錯

把操作系統更新到18版本即可解決
恢復成功

此時將PM2重啟一下
-
后臺就有數據了

后臺的圖片鏈接還是localhost:3000，需要修改上傳圖片的接口

然后將代碼重新提交 push到git碼云上
然后在服務器上重新拉區

重啟服務器，pm2 reload index
通過ssh登錄數據庫，修改圖片鏈接

添加https證書
申請免費的ssl證書
https://letsencrypt.org/

選擇cerbot

這里選擇 Nginx 和ubantu 18.04版本
安裝方式

sudo apt-get update
sudo apt-get install software-properties-common
sudo add-apt-repository universe
sudo add-apt-repository ppa:certbot/certbot
sudo apt-get update
1
2
3
4
5
sudo apt-get install certbot python-certbot-nginx
1
sudo certbot --nginx
1
sudo certbot certonly --nginx
1
通過cerbot添加了ssl證書后
此時的網址 前面已經有了https 更加安全

阿里云oss文件存儲
去阿里云申請一個oss云存儲
同時創建一個bucket

同時下載一個 Multer Storage for AliYun OSS
npm install --save multer-aliyun-oss
1
const MAO = require('multer-aliyun-oss');
?
const upload = multer({
? ? storage: MAO({
? ? ? ? config: {
? ? ? ? ? ? region: '<region>', // 地域名字?
? ? ? ? ? ? accessKeyId: '<accessKeyId>', //key
? ? ? ? ? ? accessKeySecret: '<accessKeySecret>', // 密碼
? ? ? ? ? ? bucket: '<bucket>' // bucket名稱
? ? ? ? }
? ? })
});
1
2
3
4
5
6
7
8
9
10
11
12
創建一個bucket

創建一個accessKey
選擇子用戶

填寫對應的即可
最后輸入一張圖片測試oss是否設置成功

注意每次進行代碼的更改后都需要先push到遠程的git倉庫然后服務器再去pull拉代碼
————————————————
版權聲明：本文為CSDN博主「Charles_GX」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Charles_GX/article/details/105132719

總結

以上是生活随笔為你收集整理的王者荣耀全栈项目部署到阿里云服务器笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。