「前端進階」vue+koa2+mongodb+oss阿里雲部署本身的網站

時間 2019-12-08

標籤前端進階 vue+koa2+mongodb+oss vue koa mongodb oss 阿里部署本身網站欄目 MongoDB 简体版

原文原文鏈接

線上

線上地址：itcphp

項目地址：GITHUBhtml

因爲使用Element框架實現前端，並無作移動端適配，因此建議PC端觀看。前端

建議參考本文最後教程，將項目克隆到本地啓動（不須要任何雲系列產品便可本地啓動），配合該篇文章進行閱讀vue

效果圖

註冊

登錄

首頁

編輯

背景

最近想學習下koa框架，因而便從網上找了一些資料，在大體瞭解了koa框架的基本用法後，想要本身作點什麼東西出來。node

在掘金平臺找到一篇文章，是一個前端用vue，後端用koa，數據庫用mongodb實現的簡單留言功能。看似簡單，在閱讀完代碼後，發現有不少東西，以前仍是沒有接觸過的。好比說後臺生成驗證碼、token、密碼加密等mysql

因而我也仿着實現了一個簡單的註冊登錄模塊，麻雀雖小，五臟俱全。基本上整個先後端交互的細節都有涉獵，同時也將本身的做品上傳至雲server，是很是適合新手學習和了解整個先後端交互的一套技術體系。webpack

這裏假如你把整個項目弄明白了，那麼你將會有如下收穫：ios

能夠部署本身的服務，讓別人經過網址訪問你的網站
知道整個先後端交互的一套流程
前端常常拿到的token是如何生成的
會考慮如何去逐步從各方面優化你的應用
會知道原來前端真的只是冰山一角，對前端有了從新的認知
擁有了想要成爲全棧工程師的夢想

主要包含如下模塊

註冊
登錄
首頁
編輯頁

細節包含

CURD增刪改查
前端校驗
上傳用戶頭像
雲oss上傳圖片
token鑑權
模糊搜索
排序
分頁
xss內容過濾
請求／響應攔截
...

主要技術棧

前端

vue vue-cli3 webpack4 axios vue-router vuexnginx

後臺

koa-generator koa2 ali-oss gd-bmp jsonwebtoken koa/multergit

數據庫

mongodb

server相關

nginx pm2 雲server 域名 oss對象存儲

簡單畫了個流程圖

前言

本篇文章，主要圍繞整個開發和部署過程當中的一些疑難點展開，具體的代碼邏輯，我的建議，仍是把代碼拉下來跑起來，深度閱讀幾遍來的實在。

我認爲這裏面最值得學習的應是思路，不要在乎一些細節，好比：

我用的數據庫是mongodb，由於以前瞭解過，以爲合適本身，容易上手，若是你喜歡mysql，你大能夠本身替換
我用的前端框架是element，若是你感到身體不適，習慣於用Ant Design又或是手寫樣式，你大能夠本身折騰
...

變通，乃開發者應具有的不二神器。

固然，想要通讀完代碼或者是本身動手實現一個輪子，你須要具有如下基本知識

Vue（vue-cli、vuex、vue-router、element、Axios...）
Koa（路由、中間件...）
Mongodb（數據庫增刪改查...）
ES6語法（promise、async、await...）
...

具有了以上知識點，你能作到的，僅是在本地實現本身的輪子。若是想要最終部署在網上，讓你們能夠看到你的做品，參與進來，你可能還須要準備如下乾糧

域名
server
OSS對象存儲
nginx基本操做要領
pm2基本操做要領
...

下面主要從前端、後端、數據庫、線上部署四個方面作一些闡述

前端

使用vue-cli3腳手架生成前端骨架，後端骨架使用koa-generator生成

這裏我爲了節省開發成本，用了element框架，考慮到性能問題，我使用了element提供的按需引入方式，引入須要的組件。

爲了可以在用戶登錄後，以及整個流程中方便獲取用戶的相關信息，使用vuex全局註冊單例對象store。

方便實現請求後臺功能，以及請求攔截、響應攔截，使用Axios提供的實例方法

...

交互細節

路由跳轉根據頁面是否須要權限以及是否已登錄作判斷
路由帶有redirect重定向字段時，用戶登錄後，自動跳轉到以前的頁面
登錄、註冊頁面對用戶輸入內容作校驗，好比用戶名、密碼的格式、長度等（考慮到後期數據庫能力）
上傳圖片大小、個數、格式作限制，將圖片上傳至雲對象存儲oss（若是本地啓動的話，不須要雲對象存儲便可）
登錄用戶僅能夠操做本身以前發過的帖子，其餘用戶的內容，僅具備查看權限
根據訪問每條記錄的詳情次數，生成每條記錄的熱門程度，方便用戶篩選
用戶登錄後，將用戶的token存在前端(store、localStorage)，每次調用後臺接口，都會通過token驗證這一層，若是token已過時，須要引導用戶重定向到登錄頁，這裏token存儲一份在localStorage下，目的是爲了用戶關閉頁面後，再次訪問時，若是token沒有過時，直接能夠進入對應的頁面
頁面涉及到操做後臺數據的，好比點擊按鈕執行對應請求，阻止按鈕重複點擊動做
對於一些不會變更的庫文件，好比vue、vue-router、vuex、axios等，經過webpack的externals配置項，能夠在生產環境配合使用穩定的cdn提供服務，便於利用緩存機制，提高性能和交互體驗
...

備註：這裏關於圖片上傳，我最先的實現方式是將圖片存儲在nginxserver上，而後將地址返回給前端，後來考慮到server性能問題，改用ali-oss上傳圖片，能夠更好的利用緩存機制，提升用戶體驗

後端

後臺框架使用既成的koa框架實現。這裏我想說下，去年用express框架寫過一個express+mongodb+vue實現增刪改查-全棧之路，此次使用koa後，我的感受在使用上並無特別大的差別，大體就是一些api變化了，精簡了整個框架，同時基於async/await語法糖能夠更好地開發中間件。對於這些後臺框架，若是你不是有志於成爲領域佼佼者，我以爲，做爲前端，知道它是幹嗎的，以及怎麼用的，就能夠了。

交互細節

經過mongoose中間件對象模型工具實現數據庫鏈接，以及Schema建立
驗證碼經過gd-bmp實現，再用jsonwebtoken(jwt)根據必定規則，生成token後，一併存儲在數據庫中，用戶登錄或者註冊時，先判斷驗證碼是否存在數據庫中，再進行其餘動做
封裝check_token中間件，每次收到前端請求時，判斷請求頭裏面的token是否過時，進而執行後續動做
使用@koa/multer實現前端上傳圖片，存儲到server文件夾下，再用ali-oss上傳圖片到雲端
...

備註：後臺知識於前端而言，比較生澀隱晦，建議本身遇到不了解的，自行前往瞭解

數據庫

數據庫的話，這裏我用的是Mongodb，推薦使用homebrew一鍵安裝，同時爲了方便後續操做和查看數據庫，建議下載一個Robo 3T GUI圖形工具。剩下的我以爲須要瞭解的就是Mongodb的數據庫增刪改查API

重點

到這裏，本地開發基本沒有問題了。換句話說，你能夠在本地訪問你的前端服務，調用後臺接口，進行本地數據庫的增刪改查了。

可是我想你既然讀到了這裏，確定是不知足於僅在本身的機器上折騰，你更加感興趣的是如何將本身的項目部署在server上，讓其餘小夥伴也能夠看到你的做品。更多細節請參考雲server部署web項目全過程

接下來爲了防止你們頭皮發麻，我會用最樸素的言語，爲你揭開神祕的面紗

準備工做

server

你想讓人家看到你的做品，那你是否是須要準備本身的一臺server，因此你須要先去雲端買個server，至於server的標準，決定於你錢包裏的毛爺爺

買了server以後，最直觀的感覺是，你只是拿到了一串數字（ip地址）

// 雲serverip地址
123.56.119.218
複製代碼

域名

別人訪問你的server，也只能經過ip地址訪問，你毫不甘心於此，數字誰能記住？因而乎，你還須要去雲端上面買個域名，再經過域名解析，將你的域名指向你的ip地址，這樣，別人就能夠更從容的記住你的站點

// 小夥伴們經過訪問域名，進入你的網站，而不是使用一串數字訪問
www.xxx.com -> 123.56.119.218
複製代碼

備案

有了域名和server後，爲了證實你將來網站的合法性，你還須要去備案域名網站，週期大概20天左右。只有備案經過後，別人才能夠經過域名訪問你的網站，不然，只能經過ip地址進行訪問。

在等待域名備案成功的這段時間，你要作的事情還有很多，同時也註定着蛋疼（踩坑）

上傳文件至server

經過命令行ssh root@xxx 方式鏈接server，其中xxx爲你的serverip地址，進行相關依賴的安裝。這裏包括但不限於mongodb、nginx、pm二、node、git等，說白了，就是要在server環境上搭建相似於你的本地環境，在安裝的時候，最好注意下相關的版本，爲了不出現兼容問題，你能夠看下你本地的版本，對應下載便可。

這裏我不想作過多描述，由於本人搭建的時候，也是踩了好多坑，建議新人都踩一遍，遇到不會的，網上找教程，你遇到的坑，前人都趟過了。只有本身多踩坑，才能記憶深入。

當這些工做都準備完畢後，你須要一個工具，能夠將你本地的代碼，傳輸到server上，這裏推薦你們使用FileZilla，方便、快速。好比說我本地開發完後，執行npm run build後，生成的dist目錄內的文件和server文件夾，所有經過FileZilla上傳到/home目錄下的www文件夾下，www這個目錄是你本身建立的，你能夠任意取名字，可是這裏的路徑，跟後面須要配置的nginx靜態資源目錄路徑root有必定的關係。

server安裝PM2

到這裏，基本上全部的準備工做已經就緒，你只須要經過命令行進入server上存放後臺代碼的server文件夾，用pm2啓動後臺程序便可。關於pm2，你能夠閱讀PM2入門。

假如你的server文件夾放在/home/www下，你只須要執行如下幾步

1.cd /home/www/server
2.pm2 start bin/www --name xxx (這裏的xxx是你爲你啓動的服務起個名字)

關於pm2的相關命令，可使用pm2 examples查看示例
複製代碼

server安裝Nginx

首先，你要知道咱們的靜態資源和後臺服務代碼都存在nginxserver的一個目錄下

在經過域名解析後，當咱們經過域名訪問前端靜態資源時，會指向你以前在nginx.conf文件裏面的root目錄，同時會訪問你的默認首頁index.html

這時，前端已經就緒了，可是由於後臺程序是啓動在server的本地3000端口上，若是直接訪問，會存在跨域的問題，這個時候，nginx的主要做用之一反向代理就起做用了

// nginx.conf配置文件

server {
    listen 80; // 默認端口
    server_name 123.56.119.218; // 域名，當你訪問這個域名時，會直接去找/home/www目錄下的index.html文件
    root   /home/www; // 根目錄
    index  index.html index.htm index.php; // 默認首頁
    
    // 反向代理
    location /api/ { // 前端訪問api下的接口時，會代理到proxy_pass指向的地址
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:3000; // 反向代理，用戶訪問api接口時，指向本地服務3000端口
    }
}

複製代碼

提示： 每次修改完nginx.conf配置文件，都須要執行如下命令，從新啓動nginxserver

重啓nginxserver步驟

1.  cd /usr/local/nginx/sbin
2.  ./nginx -s reload
複製代碼

本地啓動

首先你本地要全局安裝了mongodb、node、npm、robo3T等相關工具，本地啓動mongodb

1.git clone https://github.com/weirui88888/itc.git 把項目克隆到本地

2.cnpm install // 項目根目錄安裝前端項目依賴

3.cnpm install // server目錄下安裝後端項目依賴

4.在根目錄下啓動前端程序

    npm run serve
    
5.在server目錄下啓動後端程序

    npm run start

6.訪問localhost:8080便可看到成果
複製代碼

若是開通了雲OSS對象存儲，想要將圖片上傳至雲對象存儲的話，請參考server/controller/record.js文件中的詳細註釋