从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

最后快去地址栏输入本身的域名测试下吧~

欢迎大佬们指正不足、讨论。

最后求赞~谢谢！