(保姆級教程)如何部署博客到服務器上

前端：vue 全家桶
後端：koa2
數據庫：mongodb
運行環境：node.js
CDN：七牛雲
服務器：(騰訊雲)Ubuntu 18 + nginx

購買雲服務器和域名

騰訊雲、阿里雲等均可以購買服務器和域名，網上有不少教程，在這裏就很少說了，學生通常都有優惠哦。(如下主要是騰訊雲的操做步驟)

買完後，能夠在站內信裏查看服務器的用戶名和密碼，若是以爲密碼太複雜還能夠重置。

1.配置安全組 ：

安全組至關於一個虛擬的防火牆，在安全組內能夠放行系統相應的端口號以及 IP 訪問的權限。

配置文檔能夠看這裏: 建立安全組. 添加安全組規則.

PS：若是用到 mongodb，須要把安全組中的 27017 的 Mongodb 數據庫端口打開

2.域名解析(須要時間生效) :
在個人域名中點擊解析，而後選擇添加記錄

主機記錄	記錄類型	線路類型	記錄值	MX 優先級	TTL
填寫域名的前綴，例如 「www」	選擇 「A」	選擇 「默認」 類型	請輸入您的主機 IP 地址（公網 IP）	不須要填寫	默認爲 600 秒

3.域名備案：根據你購買的域名提供的備案服務，一步一步提交信息就好
PS：雲備案-->管局備案-->公安局備案，完成三個流程須要20天以上。

操做服務器

首先須要登陸你的服務器，語法以下：

ssh 用戶名@IP地址 -p 端口號

也能夠不添加-p 端口號
固然，若是不想用命令行，推薦兩個圖形化工具：
xshell 6能夠鏈接遠程服務器，xftp 6能夠在本地和遠程之間互相傳輸文件(也能夠用來鏈接虛擬機)
關於安裝能夠看這裏（免費版）會把下載連接經過郵箱發送給你

在服務器上安裝mongodb數據庫

如下是在Ubuntu安裝mongodb4.2版本的步驟

每一個系統的安裝步驟都不同，若是以前有安裝過其餘軟件包，須要先 卸載乾淨，否則可能會起衝突，致使安裝不成功

官方文檔在這裏，能夠瀏覽一下

步驟1：導入MongoDB 的公鑰

wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -

步驟2：爲MongoDB建立一個list文件

路徑：/etc/apt/sources.list.d/mongodb-org-4.2.list

Ubuntu 18.04 (Bionic):

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

Ubuntu 16.04 (Xenial):

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list

步驟3：更新本地資源包數據

sudo apt-get update

步驟4：安裝最新穩定版本MongoDB

sudo apt-get install -y mongodb-org

默認路徑爲：

1. MongoDB存儲的data數據路徑爲：/var/lib/mongodb
2. MongoDB的log日誌文件存放的路徑：/var/log/mongodb

也能夠建立/etc/mongodb.conf，修改data和log的文件路徑:
sudo vim /etc/mongodb.conf(按i插入代碼，按esc :wq保存退出)具體vim操做請看 這裏

mongodb.conf 的內容以下：

dbpath=/var/lib/mongodb/data/db //data數據庫的路徑，根據你本身的路徑配置
logpath=/var/lib/mongodb/log/mongodb.log  //log日誌的路徑，根據你本身的路徑配置
logappend=true
port=27017                                //默認監聽的端口號 27017
fork=true
noauth=true
bind_ip = 0.0.0.0

配置完，須要從新加載一下配置文件，直接運行 mongo 會出錯。
mongod -f /etc/mongodb.conf

安裝完成後：

啓動 mongod服務：(通常啓動在27017端口)

sudo service mongod start

經過systemctl status驗證MongoDB已成功啓動：
sudo systemctl status mongod

開機自啓動mongod服務：

sudo systemctl enable mongod.service

如下兩個命令也能夠檢查MongoDB是否已經啓動：
netstat -anptu |grep 27017
ps -ef|mongodb
中止MongoDB:
sudo systemctl stop mongod
從新啓動MongoDB：
sudo systemctl restart mongod

進入mongodb shell：

mongo

若是命令行最左面變成'>'說明成功進入，接下來就能夠操做數據庫了
建立用戶：

use admin
db.createUser({user:"root", pwd:"root123", roles:[{role:"root", db:"admin"}]})

ps：用戶名和密碼可隨意定,表示在admin數據庫中建立一個用戶，權限爲root
輸入exit退出MongoDB shell。

啓用mongodb身份驗證
mongodb默認是沒有用戶名和密碼的，能夠經過--auth來開啓安全性的檢查
vim /etc/mongodb.conf (添加一下配置)：

auth = true

而後須要從新啓動MongoDB：
service mongod restart

本地鏈接遠程服務器上的mongodb：
須要本地也安裝了mongodb

mongo 212.64.90.170:27017
>use admin
>db.auth("root","root123")
>1

出現1說明登陸成功

後端鏈接服務器上的數據庫：

mongodb://用戶名:密碼@ip:27017/數據庫?authSource=admin

如：mongodb://root:root123@localhost:27017/blog?authSource=admin

若是鏈接失敗，能夠用telnet測試：
telnet ip 27017

telnet鏈接不成功可能的緣由有

1.服務器防火牆沒有開放27017或22端口
登陸服務器，防火牆開放端口命令：

sudo ufw allow 27017

查看本地的端口開啓狀況：

sudo ufw status

而後防火牆須要重啓：

sudo ufw reload

2.bind_ip沒修改成0.0.0.0
mongodb的配置文件中默認爲127.0.0.1，默認只有本機能夠鏈接。此時，須要將bind_ip配置爲0.0.0.0，表示接受任何IP的鏈接。
打開/etc/mongodb.conf配置文件，修改bind_ip 爲 0.0.0.0，保存。
3.修改後沒有重啓mongod服務

ps：telnet鏈接成功後crtl+] 而後輸入quit退出

鏈接成功以後就能夠遠程操做數據庫了。

推薦兩個圖形化工具：
navicat for mongodb安裝連接和 mongodb compass安裝和使用連接

貼一個compass的鏈接：（經過ssh鏈接到服務器而後再鏈接服務器上的數據庫）
<imgsrc="https://img-blog.csdnimg.cn/20200424171044297.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTA4ODMy,size_16,color_FFFFFF,t_70"style="width: 100%;">
<imgsrc="https://img-blog.csdnimg.cn/20200424171047145.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTA4ODMy,size_16,color_FFFFFF,t_70"style="width: 100%;">

配置nginx

安裝在服務器上：

sudo apt-get install nginx

過程會讓選一個Y贊成佔用內存。
nginx -v查看是否安裝成功
默認路徑爲：

1. 全部的配置文件都在/etc/nginx下
2. 程序文件在/usr/sbin/nginx
3. 日誌放在了/var/log/nginx中
4. 並已經在/etc/init.d/下建立了啓動腳本nginx

在etc/nginx/nginx.conf中添加配置：

http {
...
server {
    listen 80; //前端運行在80端口
    server_name 域名;  //指向域名，能夠用域名來訪問項目
    root /home/my-project/;   //你的前端項目所在位置
    index index.html;
    location /api {
      proxy_pass http://ip:port;  //跨域，表示前端全部/api/xxx的請求都將發送給後端服務運行地址，本例中ip爲localhost，port爲後端啓動所在的端口
    }
    try_files $uri $uri/ @router;
    location @router{
      rewrite ^.*$ /index.html last;
    }
    gzip on;       //開啓gzip壓縮文件來提升頁面加載速度
    gzip_buffers 32 4k;
    gzip_comp_level 6;
    gzip_min_length 200;
    gzip_types text/css text/xml application/javascript;
    gzip_vary on;
}
...
}

其中，下面這段代碼的做用：
vue-router的mode爲history時，設置的路徑不是真實存在的路徑。進入到內頁後，再刷新瀏覽器，發現會404。因此爲了刷新後還能夠找到對應的路徑，避免404。

try_files $uri $uri/ @router;
location @router{
  rewrite ^.*$ /index.html last;
}

若是前端有多個項目能夠配置多個server，具體能夠看這篇

開啓nginx:

service nginx start

注意：改變nginx.conf後必定要重啓nginx:

sudo nginx -s reload

用ps -ef列出進程列表，而後經過grep過濾
ps -ef | grep nginx 就能夠看到Nginx進程是否存在了
關閉nginx: nginx -s stop

前端打包部署

本地項目npm run build 後 把dist中的文件發送到服務器/home/my-project下。
注意：不要外面的dist文件夾

ps：傳輸失敗的緣由多是普通用戶對這個文件夾權限不夠，xshell鏈接服務器，修改權限：
chmod 755 文件夾目錄

後端部署

安裝node和npm
把後端整個項目除node_modules外都傳輸到服務器/home下，cd進入項目所在路徑
npm install 安裝全部須要的依賴
npm start 試一下能不能運行成功
退出服務器後node進程就自動關了，項目也就自動關閉了因此咱們須要 pm2 來守護進程。

全局安裝pm2:

npm install -g pm2

安裝完成後切換到你項目所在路徑

pm2 start ./bin/www --watch

--watch參數，意味着當你的koa2應用代碼發生變化時，pm2會幫你重啓服務。
中止指令：

pm2 stop ./bin/www

監視每一個node進程的CPU和內存的使用狀況：

pm2 monit

還能夠經過下面這種方式殺死進程：

netstat -tpln  
kill xxx

結束對應的進程，kill後面寫的是進程號PID.

至此，我的博客搭建完成，瀏覽器中輸入你的域名就能夠看到你的博客了。

打個小廣告個人博客 Woc12138（持續更新中）
先後端代碼 Github

寫這篇文主要目的是記錄和分享，爲了本身之後再回顧，也爲了讓跟我同樣的小白們少踩一些坑~

若有錯誤，歡迎指正。