手把手教你koa2 + nextjs搭建自己的博客(带源码)

·  阅读 2221
手把手教你koa2 + nextjs搭建自己的博客(带源码)

自从自己有服务器以来,一直想做一个自己的博客;奈何自己对已有的hexo,vuepress之流不太感冒。翻阅多篇文章终于在去年完成,本文会完整讲述一个小白从0搭建一个博客的完整流程。时间仓促,源码还未做优化,不会意思绝对到位了。

这是我的博客地址 www.xz1024.top/

我的后台管理系统admin.xz1024.top/

源码

看到的老铁希望去 留言板 刷个留言支持下,当然如果真帮到了您,也可以给博主刷5毛钱赞助哦 打赏页

技术栈讲述

  • 前端 nextjs 、antd、axios写一个server.js用pm2启动
  • 后台管理系统 react 、antd、axios直接部署在nginx上
  • 服务端 koa2、mysql、redis、pm2

首先你的懂服务器

因为之前买的阿里云的到期了,所以我买的 腾讯云 选择centOS和ubuntu都行的,买完后去控制台设置下用户名密码就可以。

接下来就是 linux安装node、pm2、nginx、mysql教程

nextjs

这个直接去中文官网 把文档看一遍就可以了没什么难度,主要是部署的问题,需要自己写一个启动脚本,server.js 这样更灵活一些 ,可以看我源码 server.js

koa2 和 mysql

讲到这里才是重点,在此之前的内容都是我们经常接触的,所以我也没有过多叙述。 直接操作mysql太难了,所以我选择了sequelize 直接写js的方法就能操作数据库,官网文档说的很清楚了,我不在多讲。

下面直接说koa2,洋葱模型一定要明白,建议大家多搜几篇文章了解下洋葱模型,关于写接口,记住两点,请求和响应都在ctx上,只要写给ctx.body赋值,接口就自动返回了,就这么easy。 大家可以看我源码 my-blog

热点数据一定要上redis或者走node的缓存;要不每次都查库卡死你,自己在服务器上安装下redis启动就可以了,这里我用的ioredis.js

nodemailer 实现发邮件功能

var nodemailer = require('nodemailer')
var smtpTransport = require('nodemailer-smtp-transport');
var mailConfig = require('@/config/index.js').email

smtpTransport = nodemailer.createTransport(smtpTransport({
    host: 'smtp.qq.com',
    port: 465,
    secureConnection: true, // 使用了 SSL
    auth: {
        user: mailConfig.user,
        pass: mailConfig.pass
    }
}));
smtpTransport.sendMail({
		from:"a@qq.com",
        to: "b@qq.com",
        subject: "标题",
        html: "你好"
})
复制代码

做https

腾讯云买了域名以后给了一年免费的证书,直接把证书和公钥放在服务器上,用nginx的https模块下的两个配置指向这两个文件即可,如果你还根本不懂https我强烈你看下透视HTTP协议

 server {
     listen       443 ssl;
     server_name  www.xz1024.top;
     ssl_certificate      cert/1_xz1024.top_bundle.crt;
     ssl_certificate_key  cert/2_xz1024.top.key;
 }
复制代码

用到的软件

Navicat for MySQL 和 RedisDesktopManager 这里不提供下载地址了,数据库一定要定时备份,因为万一有一天没了就全白玩了,数据库和redis一定要记得设置密码;不然很容易遭到攻击,相当于裸奔啊

最后

好了;讲了这么多了,总结下

①:node服务内存一直升高,最后发现生产的pm2配置有问题,生产的watch不能为true,谨记

module.exports = {
    "apps": [
        {
            name: "koa-app",
            script: "./index.js",
            cwd: './', // 当前工作路径
            watch: false,
            instances: 2,  // 启动2个实例
            exec_mode: "cluster",
            max_memory_restart: "100M",
            env: {
                NODE_ENV: 'development',
                PORT: 4000
            }, 
            env_production: {
                NODE_ENV: 'production',
                PORT: 4000
            },
            out_file: './logs/out.log', // 普通日志路径
            error_file: './logs/err.log', // 错误日志路径
            merge_logs: true,
            log_date_format: 'YYYY-MM-DD HH:mm:ss' // 设置日志的日期格式
        }
    ]
}
复制代码

②: 前端http请求的header在koa2接收后字段会自动转为小写

③:有条件的可以把静态资源做cdn,我直接放在了oss上(小聪明下),next.config.js有个assetPrefix配置。这样可以减轻服务器压力(当然我的网站根本没有压力~😄)

④:node最重要的是内存问题,需要做内存监控的,还有性能测试,测试我还没来得及做

const easyMonitor = require('easy-monitor');
easyMonitor('koa-app');
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改