【博客發佈】Ubuntu+Vue+Node+Express+Mysql+Nginx搭建博客上線踩坑現場

時間  2019-11-24
標籤 博客發佈 ubuntu+vue+node+express+mysql+nginx ubuntu vue node express mysql nginx 搭建 博客 上線 現場 欄目 Ubuntu 简体版
原文   原文鏈接

心心念唸的手敲博客網站終於開發完畢，剩下的就是項目上線了，雖然說以前作項目的時候多多少少接觸過一點項目的線上發佈，也接觸過Linux環境,可是實打實的從零開始上線項目，實屬第一次，好在最終也是發佈成功，在此特別記錄一下，該次發佈項目，菜雞所踩的那些坑。html

1.上線前期準備

段落引用在上線前，咱們須要對上線到服務器所需的東西作一個整理，由於博主採用的前端是Vue，後臺是node.js，數據庫採用的Mysql，因此通過整理後，前期須要作的準備以下:前端

1.雲服務器一臺，本身用硬件搭服務器成本過高，還不穩定，最難解決的是沒有公網IP和內網穿透，因此放棄
2.已經備案完畢的域名一個
3.Linux系統，這裏採用的是阿里雲自帶的Ubuntu16.0
4.安裝node.js環境和npm包管理器
5.安裝Mysql數據庫
6.安裝Nginx
複製代碼

2.服務器基本配置

博主在這裏採用的是阿里雲的學生機，不是給阿里雲打廣告，確實還挺划算的，學生優惠一個月不到十塊錢，開個花唄分期買一年分12個月還款，約等於白拿，不過買了沒很久博主就後悔了，由於雙十一的時候更便宜，購買成功以後會預裝好系統，因此省掉了裝系統這一步，要是想學習Linux系統的安裝，能夠下一個Vmware隨便折騰，並且雲服務器還有一個好處就是就算折騰崩掉了，直接在控制檯恢復硬盤便可，又恢復到了最初的樣子從頭折騰，博主在上線期間就恢復了好幾回。服務器購買以後就不表明就能夠直接使用了，咱們還須要對其進行一些簡單的配置。vue

2.1.開放服務器端口

衆所周知，不少服務都會佔用對應的網絡端口，好比mysql默認佔用3306端口，而在咱們的服務器上也是如此，若是沒有開放這些端口的訪問，就會形成服務沒法正常運行或者沒法遠程訪問的狀況，下面一一記錄須要開放的端口。node

首先在購買服務器時，默認開啓338九、-1/-一、22/22端口，22端口主要用於遠程登陸服務器進行操做，必需要開啓。 而後登陸阿里雲控制檯，選擇所購買的服務器，進入到安全組中進行其餘端口的配置，注意是配置入方向的端口，主要須要打開的端口以下:mysql

1.3000端口:node.js服務監聽端口
2.3306端口:Mysql服務監聽端口
3.80端口:Nginx服務默認監聽端口
複製代碼

配置圖
下面附上端口配置圖(以3000端口爲例):
配置示例
其中，受權對象0.0.0.0/0的意思是放行一切對象對此端口的訪問

2.2.修改ubuntu16.0下載源

由於ubuntu默認的軟件下載源在美國，因此下載會很是的慢，通常會採用更改下載源的方法解決這個問題，雖然阿里雲的服務器的默認下載源是阿里源，可是有時候也會出現下載失敗找不到包的問題，因此博主把下載源修改到了清華大學源。修改下載源很是簡單，修改/etc/apt/source.list文件就能夠了。nginx

1.進入/etc/apt文件夾sql

cd /etc/apt
複製代碼

2.在vim下修改source.list文件數據庫

sudo vim sources.list
複製代碼

3.註釋掉sources.list裏面的其餘內容 npm

註釋
4.添加新的下載源 

1.先按`i`進入編輯模式
2.粘貼清華大學源到文件中:
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial main restricted
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates main restricted
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial universe
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates universe
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-updates multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-backports main restricted universe multiverse
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security main restricted
deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security universe deb http://mirrors.tuna.tsinghua.edu.cn/ubuntu/ xenial-security multiverse
3.按`Esc`退出編輯模式
4.輸入`:wq`保存退出
複製代碼

5.更新aptubuntu

sudo apt-get update
複製代碼

2.3.安裝node.js環境

1.安裝node.js環境

sudo apt-get install nodejs
sudo apt install nodejs-legacy
sudo apt install npm
複製代碼

2.爲npm包管理器更換淘寶鏡像

sudo npm config set registry https://registry.npm.taobao.org
sudo npm config list
複製代碼

3.全局安裝n管理器(用於管理node.js版本)

sudo npm install n -g
複製代碼

4.安裝最新的node.js版本

sudo n stable
sudo node -v
複製代碼

2.4.安裝Mysql

1.首先執行如下命令:

sudo apt-get install mysql-server(會出現界面讓你輸入root的密碼)
sudo apt install mysql-cilent
sudo apt install libmysqlcilent-dev
複製代碼

2.測試是否安裝成功

sudo netstat-tap | grep mysql
複製代碼

出現如下界面，即爲安裝成功

Mysql安裝
3.訪問 Mysql服務 

mysql -uroot -ppassword
複製代碼

4.設置mysql遠程訪問

cd /etc/mysql/mysql.conf.d
sudo vim mysqld.cnf
註釋掉bind-address=127.0.0.1一行便可
複製代碼

mysql遠程訪問
5.保存退出，用 3進入 mysql訪問執行受權命令 

grant all on *.* to root@'%' identified by 'password' with grant option
flush privileges
複製代碼

6.用exit退出mysql服務，重啓mysql服務

service mysql restart
複製代碼

7.而後能夠經過可視化軟件鏈接雲服務器的Mysql了

遠程連接

2.5.安裝nginx

在這裏博主採用的是簡單的安裝辦法，沒有采用源碼安裝的辦法，圖一個方便

1.運行安裝命令

sudo apt-get install nginx
複製代碼

Ubuntn安裝以後，nginx的文件結構大體以下所示:

  • 配置文件:/usr/sbin/nginx
  • 日誌文件:/var/log/nginx
  • 默認啓動腳本:/etc/init.d/nginx.conf
  • 默認虛擬主機:/var/www/nginx-defalut

2.啓動默認nginx

sudo /etc/init.d/nginx start
複製代碼

而後訪問localhost或者服務器ip，出現nginx歡迎頁即爲安裝成功

2.6.安裝pm2

pm2是基於node開發的一個進程管理器，適用於後臺常駐腳本管理

npm install pm2 -g
複製代碼

2.7.安裝rz/sz

安裝用以上傳本地文件到服務器

sudo apt-get install lrzsz
複製代碼

2.8.安裝unzip

安裝zip解壓軟件

sudo apt-get install unzip
複製代碼

至此，咱們的服務器基本配置就算搞定了，而後就是項目的正式上線了

3.前端項目打包上傳

1.新建前端項目目錄

mkdir /data/my_blog/front-end
複製代碼

2.打包本地vue項目

進入本地vue項目根目錄，執行:
npm run build
而後將進入dist文件夾，壓縮所有內容爲zip格式
複製代碼

3.進入服務器的前端項目目錄，上傳項目

cd /data/my_blog/front-end
rz
選擇剛剛的壓縮包，上傳完畢後執行解壓
unzip dist.zip
此時可使用ll命令查看當前目錄的文件
複製代碼

4.本地數據庫的遷移

該項的主要目的是在服務器上建立一個與本地徹底同樣的數據庫

1.首先進入Navicat軟件，選中本地博客數據庫，導出格式爲sql文件 2.用該軟件鏈接遠程數據庫，建立一個同名數據庫create database blog 3.選中建立的數據庫，執行剛剛建立的sql文件，OK，搞定

5.後端項目的打包上傳

1.進入本地後端項目根目錄，打包除了依賴文件夾之外的文件，壓縮爲zip格式 2.建立服務器上的後端項目目錄

mkdir /data/my_blog/back-end
複製代碼

3.進入該目錄，上傳並解壓項目

cd /data/my_blog/back-end
rz
選擇壓縮文件
unzip name.zip
複製代碼

4.安裝項目的依賴

npm install
複製代碼

5.使用pm2運行node項目

pm2 start bin/www
在這裏必定要使用這種正確的方式，不要使用pm2 start app.js，否則沒法監聽到3000端口，不要問我爲何，我找這個bug找了半個小時，運行成功後會顯示`pm2`當前運行的服務狀況
複製代碼

pm2
6.解決後來測試出來的一個坑 node.js的 mysql插件，默認鏈接時間 time_out是八個小時，若是超過八個小時沒有和數據庫進行交互，那麼 node會自動斷開這個鏈接，而後報錯 PROTOCOL_ENQUEUE_AFTER_FATAL_ERROR，博主找這個問題找了半天，最開始是用的原始辦法，將 time_out的值改成了 30天，windows上最多改成 24天，後來找到了如下解決辦法，貼出來代碼以下： 

/*數據庫配置文件*/ 
const mysql = require('mysql');

const mysqlConf = {
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'name',
    multipleStatements: true
}

// 用於保存數據庫鏈接實例
let dataBase = null;

// 設置計時器
let pingInterval;

// 若是數據鏈接出錯 從新鏈接

function handleError(err){
    logger.info(err.stack || err);
    connect();
}

// 創建數據庫的鏈接
function connect() {
    if(dataBase !== null){
        dataBase.destroy();
        dataBase = null;
    }
    dataBase = mysql.createConnection(mysqlConf);
    dataBase.connect((err) => {
        if (err) {
            logger.info("err conncetion to database",err);
            setTimeout(connect, 1500);
        }
    });
    dataBase.on("error",handleError);

    //每小時ping一次數據庫 保持數據庫鏈接狀態
    clearInterval(pingInterval);
    pingInterval = setInterval(() => {
        console.log('ping database');
        dataBase.ping((err) => {
            if(err){
                console.log('ping err' + JSON.stringify(err));
            }
        });
    }, 3600000);
}
// 調用鏈接函數
connect();

module.exports = dataBase;
複製代碼

6.nginx配置

1.修改nginx配置文件

cd /etc/nginx
vim nginx.conf
複製代碼

2.修改配置文件爲：(這裏貼出博主的配置文件，僅供參考)

在http中添加server
#server 配置
        server {
                listen          80 default_server;
                listen          [::]:80 default_server;
                server_name     blog.bestbven.top;
                root            /usr/share/nginx/html;



                # Load configuration files for the default server block.
                include /etc/nginx/default.d/*.conf;



                location / {
                        root /data/my_blog/front-end; #前端項目地址
                        index index.html; #默認尋找
                        try_files $uri $uri/ /index.html; #一個坑，後面講

                }

                location /api/{
                        proxy_pass  http://116.62.163.180:3000/; #監聽代理
                }
        }

複製代碼

3.保存對應的文件，重讀nginx配置

nginx -s reload
或者這個
nginx -c /etc/nginx/nginx.conf
這個時候，可能會出現80被端口占用的狀況，解決辦法以下:
報錯：nginx: [emerg] a duplicate default server for 0.0.0.0:80
這個時候刪掉/etc/nginx/sites-available/default文件，從新啓動服務便可
假若只報錯80端口被佔用，那麼:
netstat -tunlp
查看所有端口占用狀況
找到佔用80端口的進程，記住他的進程號，而後
kill -9 進程號
幹掉他，再重啓nginx便可
複製代碼

4.nginx的proxy_pass詳解 現，有題設要訪問http://192.168.1.1/api/getTest First：

location /api/ {
    proxy_pass http://127.0.0.1/;
}
URL：http://127.0.0.1/getTest
複製代碼

Second：

location /api/ {
    proxy_pass http://127.0.0.1;
}
URL：http://127.0.0.1/api/getTest
複製代碼

Third：

location /api/ {
    proxy_pass http://127.0.0.1/test/;
}
URL：http://127.0.0.1/test/getTest
複製代碼

Fourth：

location /api/ {
    proxy_pass http://127.0.0.1/test;
}
URL：http://127.0.0.1/testgetTest
複製代碼

博主當時3000端口老是沒法代理，被卡住了半天，最後google出了是proxy_pass配置出問題了 5.nginx代理的vue項目刷新後報錯404

vue單頁面的啓動頁面是index.html文件，路由實際是不存在的，因此會出現頁面刷新404問題，須要設置一下訪問vue頁面映射到index.html上。

1.打包靜態資源設置絕對路徑 config/index.js

Snipaste_20191112_221914.png
2. nginx映射配置 

見上面nginx配置說的坑的地方
複製代碼

7.域名解析

其實到這個地方，咱們的博客網站已是能夠訪問了，不過咱們採用的是服務器的IP地址進行訪問，因此咱們還差最後一步，就大功告成了

1.進入阿里雲域名控制檯
2.選擇已經備案完畢的域名，進行解析
3.添加記錄
4.記錄類型選擇A，由於咱們的域名要解析到一個IPV4地址
5.主機記錄博主輸入的`blog`，即將一級域名`bestbven.top`解析爲了二級域名`blog.bestbven.top`指向服務器IPV4地址
6.記錄值填寫服務器IPV4地址
7.點擊保存
複製代碼

OK，全部的發佈上線打工告成，能夠正常訪問了，博主花了整整八個小時時間，才從坑裏面勉強爬上岸，前路漫漫啊

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程