工欲善其事 必先利其器
我們先來梳理一下，簡單的建站需要準備什么，
- 一臺服務器，
- 一個自己的域名，
- 代碼和時間，這里我們選擇的技術堆疊是Vue + node.js + nginx + mongoDB，（為什么選擇這些？因為只會這些o(╥﹏╥)o）
阿里騰訊都可以 首次購買俱便宜
個人推薦輕量應用服務器，首次購買或學生認證一年只需百元左右，linux命令不熟悉的小伙伴們直接買windows版本就可以啦，具體的登錄方式服務商也會有詳細檔案，就不一一贅述啦，
域名備案加決議 官方檔案很清晰
百度一下域名注冊，普通域名每年幾元到幾十元不等，購買域名后，我們還需要備案和DNS決議，
- 備案：網路安全監管要求，需要上傳個人證件等認證資訊以及網站基本資訊，待審核通過后方可使用，備案的具體要求以及流程在域名注冊服務商官網都會有詳細的檔案，備案程序中也會有資訊確認的電話溝通，所以這一步還是比較簡單的，
- DNS決議：這里的決議是去域名控制中心手動配置，將服務器的ip地址和域名“系結”起來，
本地代碼碼飛起 多打斷點多除錯
不對node、MongoDB的基礎用法多做闡釋，這些每塊都可以拿出來單獨學習，這里重點是說整站本地開發時，前后端、資料庫之間是如何進行鏈接配合作業的，
1、服務端
服務端采用基于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
2、前端
前端開發的吃飯本領，npm run就完事啦，
3、資料庫
資料庫使用MongoDB，具體用法如下，
- 下載安裝MongoDB，
- 啟動資料庫，
mongod --dbpath c:\mongo(位置)
4、前端?服務端
上文介紹服務端時提到，服務啟動使用了自定義的埠，而前端專案開發時為解決跨域問題，會設定代理，這里將代理的埠設定成一致的即可，
proxy:{
"/":{
target:"http://127.0.0.1:9527",
changeOrigin:true,
}
}
5、服務端?資料庫
- 下載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雞克斯一鍵啟
1、服務器環境配置
- 安裝node.js，官網安裝穩定版本即可，
- 安裝nginx，官網安裝穩定版本即可，
- 安裝MongoDB，官網安裝個人版即可，
- 建議安裝輕量級文本編輯器，如notepad++，
2、本地打包
- Vue專案npm run build后復制dist檔案至服務器nginx檔案夾，
- 上傳服務端server檔案至服務器，
3、服務開啟
- server開啟方式同本地開發相同，命令符node server即可，
- 資料庫開啟方式同本地開發相同，mongod --dbpath 路徑，
- 前端資源等待nginx代理即可，
4、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;
}
}
5、nginx啟動
cmd nginx -s reload
最后快去地址欄輸入自己的域名測驗下吧~
歡迎大佬們指正不足、討論，
最后求贊~謝謝！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270867.html
標籤：JavaScript