2021-03-26

从0到1搭建一个个人小站(小白版)

工欲善其事 必先利其器

我们先来梳理一下,简单的建站需要准备什么。

  • 一台服务器。
  • 一个自己的域名。
  • 代码和时间。这里我们选择的技术栈是Vue + node.js + nginx + mongoDB。(为什么选择这些?因为只会这些o(╥﹏╥)o)

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

个人推荐轻量应用服务器,首次购买或学生认证一年只需百元左右。linux命令不熟悉的小伙伴们直接买windows版本就可以啦。具体的登录方式服务商也会有详细文档,就不一一赘述啦。
image.png

域名备案加解析 官方文档很清晰

百度一下域名注册,普通域名每年几元到几十元不等。购买域名后,我们还需要备案和DNS解析。

  • 备案:网络安全监管要求,需要上传个人证件等认证信息以及网站基本信息,待审核通过后方可使用。备案的具体要求以及流程在域名注册服务商官网都会有详细的文档,备案过程中也会有信息确认的电话沟通,所以这一步还是比较简单的。
  • DNS解析:这里的解析是去域名控制中心手动配置,将服务器的ip地址和域名"绑定"起来。
    image.png

本地代码码飞起 多打断点多调试

不对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     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

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

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

最后求赞~谢谢!









原文转载:http://www.shaoqun.com/a/645727.html

跨境电商:https://www.ikjzd.com/

kk馆:https://www.ikjzd.com/w/1713

卖家精灵:https://www.ikjzd.com/w/532


工欲善其事必先利其器我们先来梳理一下,简单的建站需要准备什么。一台服务器。一个自己的域名。代码和时间。这里我们选择的技术栈是Vue+node.js+nginx+mongoDB。(为什么选择这些?因为只会这些o(╥﹏╥)o)阿里腾讯都可以首次购买俱便宜个人推荐轻量应用服务器,首次购买或学生认证一年只需百元左右。linux命令不熟悉的小伙伴们直接买windows版本就可以啦。具体的登录方式服务商也会有
etsy:https://www.ikjzd.com/w/169.html
vincent:https://www.ikjzd.com/w/1642
俄罗斯灰色清关:https://www.ikjzd.com/w/1409
2025年,美国将或需要10亿平方英尺的仓库空间!:https://www.ikjzd.com/home/125619
如何在Facebook创建广告:https://www.kjyunke.com/courses/259
被跟卖,恶意篡改竞争!船长BI教你亚马逊Listing该怎么维护:https://www.ikjzd.com/home/131941

No comments:

Post a Comment