工欲善其事 必先利其器
咱们先来梳理一下，简略的建站须要筹备什么。
- 一台服务器。
- 一个本人的域名。
- 代码和工夫。这里咱们抉择的技术栈是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
最初快去地址栏输出本人的域名测试下吧~
欢送大佬们斧正有余、探讨。
最初求赞~谢谢！
发表回复