搭建全栈项目的痛点解决

前言

相信每个前端人都想拥有一个属于自己的博客网站，所以最开始的时候我的博客是通过 hexo 去搭建的，因为有很多主题可以选择，并且可以挂在github不用服务器，很方便。后面随着学了一点皮毛就想着自己从头搭建一个博客，因时间和技术有限，所以只完成了基本功能，还有一些bug未修复。

简单介绍

前台

前台主要用 Vue3 + ts 实现，仿照了一些掘金的风格，还做了一个快捷导航，主要是方便开发，因为有时候想找对应框架或者工具类不太方便，掘友们如果有觉得不错的网站可以告诉我，我通过后台配置上去；

其中的文章详情是通过nuxt3.0服务端渲染出来的，之前没用服务端渲染的时候，页面渲染有点慢，效果不是很好，于是看了下掘金是通过服务端渲染，体验感比较好，于是乎找到nuxt框架来实现。下面是效果图，体验的话移步到我的博客

后台

后台是用 Vue3 + elementPlus 实现，主要是对博客的内容进行管理以及对博客数据进行分析统计，目前统计的模块只写了一两个，后续会完善。

其中的文章内容编辑器用的是v-md-editor插件，还有一个图片的问题，因为在掘金写的文章涉及图片的内容，直接复制过来显示不出来，因为掘金对自己的图片做了 图片防盗链 ，于是我就自己通过github搭建了图床，主要是通过 PicGo 上传图片到github生成链接配置在文章里。

搭建难点

对于一个全栈项目，相信大部分前端大佬技术不稀缺，主要难点就是两个如下问题

后端服务
网站的部署

难点-后端服务

对于第一个问题来说，如果对于后端即（数据库等技术）没有什么基础可以选择node来搭建后端服务，其中有挺多框架可以选择，例如 express / koa / nest等框架，我选择了nest框架，因为之前用过express和koa所以决定用nest框架来搭建后端服务。

后端框架-nest

关于nest框架的话，有脚手架（@nest/cli）可以很方便的创建模块，一般基础操作看nest的官网就够用了。其生态也比较完整，有挺多安全策略：安全头（helmet），限速（@nestjs/throttler | express-rate-limit），cors，csrf保护（csurf）等。也可以参考看看这篇文章，这个文章也是我网上看到的，感觉不错。

数据库框架-sequelize

对于数据库的增删查改等操作，这个插件对于前端十分的友好，它直接对数据库一些基础的操作做了封装，不需要我们直接写sql语句就可以查到想要的数据。下面是一个简单的增删查改例子

php 复制代码

  // 创建一个新用户
  const jane = await User.create({ firstName: "Jane", lastName: "Doe" });
  // 查询所有用户
  const users = await User.findAll();
  // 将所有没有姓氏的人更改为 "Doe"
  await User.update({ lastName: "Doe" }, {
    where: {
      lastName: null
    }
  });
  // 删除所有名为 "Jane" 的人 
  await User.destroy({
    where: {
      firstName: "Jane"
    }
  });

网站的部署

说个题外话，促使我搭建博客还有一个理由就是刚好朋友有一个闲置的腾讯云服务器，想着别浪费就拿来部署我的博客了。

回归正题，网站的部署首先得有一个服务器，以我的搭建为例，服务器要有node环境，mysql服务以及nginx的配置，具体教程网上有很多，可以自行搜索。

前端部署

接下来就是前端部署，前端打包项目都会吧？命令如下

js 复制代码

// 打包命令
npm run build
yarn build

执行完之后的dist目录就是需要我们部署的前端项目，以我的为例我是把前端项目打包的资源（dist）放在/var/www/目录下，然后就是需要nginx配置，否则你输入你的ip或者域名是访问不到你的前端资源。找到nginx安装的位置并找到nginx.conf文件，配置类似如下

js 复制代码

server {
        listen       80;
        listen       [::]:80;
        server_name  localhost;

        location / {
            root   /var/www/blog; #重点在这，这里要放对应前端资源的位置
            try_files $uri $uri/ @blog_router;
            index  index.html index.htm;
        }
}

然后保存重新启动nginx，命令如下sudo systemctl start nginx ，这样就可以尝试通过你服务器的ip或者有映射好域名来访问即可。其中如果遇到页面刷新空白的只需要通过nginx配置

js 复制代码

location / {
            root   /var/www/blog; 
            try_files $uri $uri/ rewrite ^.*$ /index.html last; #重点在这
            index  index.html index.htm;
        }

后端部署

以nest为例，大部分node项目部署都是需要在服务器运行的，nest也是如此，所以我们只需要把nest的项目copy到服务器，然后将项目运行起来（yarn start），并且通过nginx配置，将对应的接口映射到运行的端口。

但是我们平常本地运行项目的时候，一关掉编辑器，服务不就关了吗？这个时候我们可以通过PM2将项目运行起来，这样关掉远程，就不会把项目服务关掉了

小结

看起来搭建一个全栈项目好像没有那么多难点，当你实践起来的时候就会发现挺多的，反正我觉得从头开发，搭建，部署一个项目，对自己来说是一个很好的体验，就是在开发中积累经验，学习经验，当然重复的轮子，不必要的时候就不需要从头写。最后提醒一下项目漏洞较多，请各位大佬多多包涵。有问题可以一起沟通讨论。