当前位置:
首页 > 网站开发 > JavaScript教程 >
-
从0到1搭建一个个人小站(小白版)
工欲善其事 必先利其器
我们先来梳理一下,简单的建站需要准备什么。
- 一台服务器。
- 一个自己的域名。
- 代码和时间。这里我们选择的技术栈是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.cnblogs.com/kepler24/p/14581588.html
最新更新
springboot~某个接口模拟登录并同步给feig
Java反射中与自动装箱有关的坑及其解决方
java 基础语法学习
面试被问Java序列化和反序列化为什么要实
你还在用命令看日志?快用 Kibana 吧,一
【JAVA并发第一篇】Java的进程与线程
【JAVA并发第四篇】线程安全
初窥MyBatis-普通的CRUD操作
mybatis(1)
HTTP常用请求头大揭秘
MongoDB常用命令(2)
MongoDB基本介绍与安装(1)
SQLServer触发器调用JavaWeb接口
SQL Server索引的原理深入解析
SqlServer2016模糊匹配的三种方式及效率问题
SQL中Truncate的用法
sqlserver 多表关联时在where语句中慎用tri
链接服务器读取Mysql---出现消息 7347,级别
SQL Server解惑——为什么你拼接的SQL语句换
MySQL视图了解一下
es6 快速入门 系列 —— 类 (class)
前端 Validform.js属性,用法及Ajax提交简介
前端甘特图dhtmx-gantt
Typescript开发学习总结(附大量代码)
koa2+mock实现一个数据服务器
JavaScript 面向对象编程思想的理解
js原型和原型链
有关Js 创建对象的几种方式
Js 原型链
js中的隐式转换