阿里雲centos部署vue+node(express)+mysql，超詳細

本人最近剛搞了個小小小網站，發布到了阿里雲，在百度查找了多方資料，然而很可惜，沒有一個可以讓我一路安裝的，總是半路卡住，找了半天資料，最后重置了系統三次，才部署好，有感而發，寫下這隨筆，希望能對后來人有幫助，今天是2020/3/23號，也許以后可能這教程會不太適用，但是近期應該不會有什么問題，順便給自己寫的網站打一波廣告，
請用手機打開，因為是移動端，如果是用電腦打開，就弄到移動端開發模式，再刷新一下網頁
http://123.57.90.190:3000/dist/index.html

雖然不知道什么時候網站會掛掉。。。。廢話不說了，下面開始進入正文。

目錄

• 一、購買阿里雲服務器
• 二、安裝開發環境
  • 2.1 安裝node
  • 2.2 安裝mysql
• 三、上傳項目文件
  • 3.1下載xftp6
  • 3.2 設置服務器密碼
  • 3.3 用xftp6連接服務器
  • 3.4 准備上傳的文件
    • 1. 導出數據庫文件
    • 2 打包vue項目
    • 3 修改后台相關文件
• 四、開放端口
• 五、導入數據庫文件
• 六、上線測試

一、購買阿里雲服務器

如果你是學生黨的話，是可以享受優惠的，可以在官網購買學生機，如果不是請自行購買，服務器的系統鏡像選擇centos 7，應用鏡像wordpress，當然這沒什么影響，可以重置的，主要是本人是這么購買的，其他系統怎么操作，不太了解。

如果是學生的話，在百度搜索阿里雲學生機

點進去，實名認證，學生認證，最后就可以優惠購買雲服務器了，本人購買的雲服務器是輕量應用服務器。

購買完成后是這樣的

進入詳情看到的是這樣的

二、安裝開發環境

本人沒有下載遠程連接工具，是用阿里雲提供的遠程連接

切換用戶

sudo su root

以后沒有特殊說明，默認都是在root用戶操作的

2.1 安裝node

參考本人之前的隨筆：https://www.cnblogs.com/tourey-fatty/p/12551540.html

2.2 安裝mysql

參考本人之前的隨筆：https://www.cnblogs.com/tourey-fatty/p/12551540.html

三、上傳項目文件

3.1下載xftp6

下載地址:https://www.netsarang.com/zh/xftp/

發現要收費，別着急，可以下載個人版本，那是免費的

點擊下載后會跳轉網頁，新的網頁旁邊有免費操作的方法

點擊進入免費授權頁面

填完表后，會給你的郵箱發鏈接，打開鏈接就可以下載了，安裝屬於傻瓜式安裝，直接一路點擊下一步(Next)即可。

3.2 設置服務器密碼

默認情況下是沒有密碼的，如果要用工具遠程連接，就要設置密碼

設置完成后，請記住這個密碼

3.3 用xftp6連接服務器

打開安裝好的xftp6

這個確定還是連接應該都是可以的

如果你已經連接過，並且關掉過會話，想要再連接，卻發現連接不了，說會話已經存在，沒關系

選擇文件，再選擇打開，里面就有已經連接的會話了

成功連接后是這樣的

左邊是自己的電腦，右邊是阿里雲的，傳輸文件只要把文件拖過去就行了。

3.4 准備上傳的文件

1. 導出數據庫文件

首先，我們有數據庫，需要把數據庫導出

這里我采用的workbench工具，幫我導出數據庫

點擊Data Export

然后選擇要導出的數據庫，點擊導出按鈕

Export to Self-Contained File文件導出后的路徑

2 打包vue項目

修改vue項目里的vue.config.js文件

修改vue中的路由文件，我不知道你們的路由文件叫什么，放在就是把路由的模式改成hash

最后，我的后台是用express做的，它有的public的文件夾

執行npm run build打包文件，會新增出一個dist目錄，把這整個目錄拷貝到public里

3 修改后台相關文件

檢查以下自己express項目里的app.js有沒有這段代碼，沒有就加上

修改express項目的配置文件，也不算配置文件，就是用來連接數據庫的那串代碼，我自己新建了個config.js文件

知道node連接數據庫方法的，應該知道我在說什么，尷尬。。。。。

如果你項目里有什么圖片連接啊，比如你需要從數據庫取出圖片的文件名，再拼接成http形式的鏈接，那么這個也要改

比如這樣htpp://公網ip:你www文件，監聽的端口，一般是3000/自己文件的目錄，因為靜態資源，比如圖片都是放在public文件的，比如我public文件下有個images文件夾，里面有個users文件夾，這個文件夾用來存儲用戶頭像的，那么我就要這么寫

const USER_IMAGE_PATH = 'http://公網ip:自己監聽的端口/images/users/'; // 最后這個斜杠一定要

//之后返回圖片鏈接，只要再這個常量后加上我數據庫獲取的文件名即可

修改package.json文件

如下代碼

"scripts": {
    "start": "node ./bin/www",
    "dev": "cross-env NODE_ENV=dev nodemon ./bin/www",
    "prd": "cross-env NODE_ENV=production pm2 start bin/www"
  }

主要是這句"prd": "cross-env NODE_ENV=production pm2 start bin/www"，要注意后面不要寫成./bin/www

最后在自己桌面新建一個文件夾，比如叫test，把后台項目除了node_modules文件夾之外，其他都拷貝過去

之后傳輸文件到阿里雲服務器的home文件夾下，這個目錄是用來存放用戶自己文件的，點擊進入home文件夾，再把test文件夾拖過去，這樣就開始傳輸了。

四、開放端口

我們要在防火牆開通端口，如圖所示

我們要添加兩條規則，一個是3306，也就是數據庫的端口，如果你的不是3306，就監聽你自己的端口

還有一個端口是你express監聽的端口，默認是3000，這兩個按照自己的實際情況處理

五、導入數據庫文件

遠程連接服務器導入數據庫

步驟

mysql -u root -p
之后輸入密碼

進入mysql后，創建數據庫，分號不能省
create database 數據庫名; //這個要和你node文件里要連接的數據庫名一樣
use 數據庫名;
set names utf8;
source 你自己數據庫文件所在的路徑;

比如我自己的是
source /home/jiaoliupingtai/sql/comment.sql;

成功后，show databases;
看看有沒有顯示自己的導入的數據庫

如果有顯示自己的數據庫
輸入use 自己的數據庫名;
查詢語句
看看能不能查詢信息;

六、上線測試

全局安裝pm2

npm install pm2 -g

然后說下linux的一些基本的必要命令，但畢竟不是專門說linux，只是因為之后，必須要用到，所以才在這專門說下

ls ----- 輸出當前文件夾的文件夾和文件
pwd ------- 當前文件所在的目錄地址
cd 路徑  ----跟window的cd一樣了
rm 文件名  ---這是刪除
vim 文件名.后綴名  ---- 編輯文件   按esc再按:wq ---- 保存並退出

好了，這些在這里夠用了

pm2安裝好后

我們進入express項目所在的文件夾

怎么進入，有個笨方法，先用ls確認文件下的文件有哪些，再用cd進入文件夾，如此反復直到目的文件夾

如果ls輸出的類似如下信息，那么這個就是目的文件夾了

之后執行命令

npm run prd

如果輸出如下信息，那么pm2就是執行成功了

但是如果你用http://公網ip:端口/dist/index.html訪問其實是訪問不了的，如果你直接把vue打包出的dist文件夾直接放到express的public文件夾里，那么路徑的規則就是這樣。

之所以沒有成功是因為數據庫連接的問題，哦，對了，如果你安裝的是8.0以上的版本還要改加密權限，不過如果按照上面安裝mysql的教程就不用改加密權限

執行命令

查看錯誤日志

pm2 log www


這個www就是上圖的name那個，如果你顯示的是別的，那就把www換成你顯示的那個

如果錯誤信息如下圖所示，那么恭喜你們，這個坑我已經幫你們填好了

像這種類似root@這個其實是host名我不知道大家這名是不是一樣的，不過如果是這種，那么按如下方法是可以解決的

這個錯誤是因為node連接數據庫時的host配置沒寫，因為那時我們其實不知道host會是什么，至少我不知道，我試過用內網和公網都錯了，好在最終還是解決了這個問題

我們要登錄mysql

mysql -u root -p
輸入密碼
use mysql;
select host, User from user where user='root';

之后你會看到類似這樣的信息
+-------------------------+------+
| host                    | User |
+-------------------------+------+
| %                       | root |
| 127.0.0.1               | root |
| ::1                     | root |
| iz2********5m8hvqpin6z | root |
| localhost               | root |
+-------------------------+------+
看看自己查詢到的host信息，有沒有和之前報錯的那個'root'@'host名'一樣的
如果沒有看到，emmmmmmm，真抱歉，我也不知道怎么回事。
如果有，那么把這個記起來，之后要用到


接下來統一改密碼
update user set password=PASSWORD("你的密碼") where User = 'root';
flush privileges;
quit;

之后找到你node連接數據庫的那段代碼的文件

然后一路ls和cd到你那個文件所在的文件夾，哎，不懂linux只能用這種笨方法了，總之就是修改文件了。

然后vim 你的文件，

做出如下修改

MYSQL_CONF = {
        host: 'iz2********5m8hvqpin6z', //這個就是之前讓你們記的host名
        user: 'root',
        password: '密碼',
        port: '端口',// 端口號
        database: "數據庫名"
    }

然后退出並保存

最后執行命令，重啟pm2

pm2 restart www

成功重啟后，就可以在任何地方任何時間訪問自己的網址了，當然前提那地方有網的情況下

訪問規則:http://公網ip:端口/自己文件所在的路徑，如果你是把vue打包好的dist直接放在public里

那就是這樣http://公網ip:端口/dist/index.html

如果數據庫有返回數據給前台頁面顯示，然后有些地方出錯了，那么應該不是我這的問題，大概是代碼的問題。

完結，撒花！