美文网首页
web从0到1快速搭建自己的网站(小白版)

web从0到1快速搭建自己的网站(小白版)

作者: 程序员阿野 | 来源:发表于2021-03-30 09:34 被阅读0次

    工欲善其事 必先利其器

    我们先来梳理一下,简单的建站需要准备什么。
    1、一台服务器。
    2、一个自己的域名。
    3、代码和时间。这里我们选择的技术栈是Vue+node.js+nginx+mongoDB。(为什么选择这些?因为只会这些)

    阿里腾讯都可以 首次购买俱便宜

    个人推荐轻量应用服务器,首次购买或学生认证一年只需百元左右。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); 
    
       } 
    
    })
    

    至此本地可开始开发,待业务完成后便可上传至服务器(上线)。

    打包配置无一失 nginx一键启

    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里进行配置。

    5、nginx启动

    cmd nginx -s reload
    

    最后
    欢迎大佬们指正不足、讨论。阅读后记得帮点赞收藏,谢谢!!

    相关文章

      网友评论

          本文标题:web从0到1快速搭建自己的网站(小白版)

          本文链接:https://www.haomeiwen.com/subject/chewhltx.html