從0到1搭建一個我的小站（小白版）

工欲善其事 必先利其器

咱們先來梳理一下，簡單的建站須要準備什麼。

• 一臺服務器。
• 一個本身的域名。
• 代碼和時間。這裏咱們選擇的技術棧是Vue + node.js + nginx + mongoDB。（爲何選擇這些？由於只會這些o(╥﹏╥)o）

阿里騰訊均可以 首次購買俱便宜

我的推薦輕量應用服務器，首次購買或學生認證一年只需百元左右。linux命令不熟悉的小夥伴們直接買windows版本就能夠啦。具體的登陸方式服務商也會有詳細文檔，就不一一贅述啦。

域名備案加解析 官方文檔很清晰

百度一下域名註冊，普通域名每一年幾元到幾十元不等。購買域名後，咱們還須要備案和DNS解析。

• 備案：網絡安全監管要求，須要上傳我的證件等認證信息以及網站基本信息，待審覈經過後方可以使用。備案的具體要求以及流程在域名註冊服務商官網都會有詳細的文檔，備案過程當中也會有信息確認的電話溝通，因此這一步仍是比較簡單的。
• DNS解析：這裏的解析是去域名控制中心手動配置，將服務器的ip地址和域名「綁定」起來。
  

本地代碼碼飛起 多打斷點多調試

不對node、MongoDB的基礎用法多作闡釋，這些每塊均可以拿出來單獨學習，這裏重點是說整站本地開發時，先後端、數據庫之間是如何進行連接配合工做的。

一、服務端

服務端採用基於node.js開發的express框架。具體步驟以下。

• 先新建一個文件夾，進入文件npm init初始化一份package.json。
• 下載express。npm install express --save-dev
• 新建server.js。注意此處端口可自定義，咱們暫且定義爲9527，後面會再提到。

const express = require('express')
const app = express()
app.listen(9527, () => {
    console.log("服務開啓成功"); 
})

• 開啓服務。cmd進去執行命令行node server

二、前端

前端開發的吃飯本領，npm run就完事啦。

三、數據庫

數據庫使用MongoDB，具體用法以下。

• 下載安裝MongoDB。
• 啓動數據庫。mongod --dbpath c:\mongo(位置)

四、前端⇌服務端

上文介紹服務端時提到，服務啓動使用了自定義的端口，而前端項目開發時爲解決跨域問題，會設置代理，這裏將代理的端口設置成一致的便可。

proxy:{
    "/":{
        target:"http://127.0.0.1:9527",
        changeOrigin:true,
    }
}

五、服務端⇌數據庫

• 下載mongodb包。npm i mongodb --save-s
• 引入。

const mongodb = require("mongodb");
const mongoClient = mongodb.MongoClient;

• 建立連接。

mongoClient.connect("mongodb://127.0.0.1:端口號",function(err,client){
    if(err){
        console.log("數據庫鏈接失敗");
    }else{
        console.log("數據庫鏈接成功");
        const db = client.db("數據庫名");
        cb(db);
    }
})

至此本地可開始開發，待業務完成後即可上傳至服務器（上線）。

打包配置無一失 n雞克斯一鍵啓

一、服務器環境配置

• 安裝node.js，官網安裝穩定版本便可。
• 安裝nginx，官網安裝穩定版本便可。
• 安裝MongoDB，官網安裝我的版便可。
• 建議安裝輕量級文本編輯器，如notepad++。

二、本地打包

• Vue項目npm run build後複製dist文件至服務器nginx文件夾。
• 上傳服務端server文件至服務器。

三、服務開啓

• server開啓方式同本地開發相同，命令符node server便可。
• 數據庫開啓方式同本地開發相同，mongod --dbpath 路徑。
• 前端資源等待nginx代理便可。

四、nginx配置

在nginx文件中nginx.conig裏進行配置。

server {
        listen       80;
        server_name  你的域名;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   前端根目錄指向dist包;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        #代理node服務
        location ^~/api/ {
            proxy_pass       http://127.0.0.1:21;
            proxy_set_header Host      $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    error_page   500 502 503 504  /50x.html;
	}
    }

五、nginx啓動

cmd nginx -s reload

最後快去地址欄輸入本身的域名測試下吧~

歡迎大佬們指正不足、討論。

最後求贊~謝謝！