6.nuxt踩坑

一、问题描述

原本该网站是我用rust中的rocket库开发的服务器,vue3开发的主页面、纯js、html、css开发的文章页面。

但随着网站功能的逐渐丰富,代码量的增加,导致我想要继续维护、增添功能都变得越发困难,因为那意味着我要同时维护三个项目。

这个过程非常的痛苦,而痛苦的根源原因便是,我最开始过高看重了所谓的性能

而事实上,对于我这种小网站来说,性能并不是最要紧的,因为流量并没有想象中的那么大。

并且nodejs的性能也并没有想象中的那么差,因此最终我选择了使用nuxt库来重构本网站。

这个过程大概花费了不到一周的时间便完成了绝大部分功能,而这还是我边学边写代码的情况下完成的,这足以说明该框架有多么优秀了。

后面有时间,我大概会专门出一个系列来带大家用该框架完成一个属于自己的博客网站,而本文,仅仅只是记录一下我使用该网站的过程中所遇到的一些坑与理解。

二、解决方案

1.路由问题

nuxt默认使用文件夹pages作为路由,只要你创建了这个文件夹,nuxt就会自动将这个文件夹中的vue组件映射为路由,无需你自己写。

并且pages/index.vue将作为其根目录,也就是/目录所使用的页面。

但这个的前提是,你需要在根目录下的app.vue文件中添加NuxtPage组件:

<template>
  <NuxtPage />
</template>

除此之外就无需管这个文件了,后面的代码开发直接在pages中进行即可。

2.预渲染问题

使用nuxt框架最大的理由还是在于它允许动态进行服务器端渲染,这对于搜索引擎优化非常重要。

这可以通过其提供的useFetch函数来实现,这个函数可以用来取来自服务器的数据,并将其渲染到页面上。

但和普通的客户端渲染不同,它可以实现在服务器端便完成页面的渲染生成,然后返回。

这是其搜索引擎优化的关键,因为这代表着它可以直接返回一个带内容的html页面,可以直接被搜索引擎抓取到。

它并不需要在onMount生命周期中使用,甚至有时候你在挂载生命周期函数中使用它反而会存在问题,直接在外部正常使用即可。

个人推荐只在需要预渲染的文章页面用它,其它地方使用更通用的axio库更好,即使有一天想要换其它框架,也不需要改动太多的代码。

3.发布问题

开发完成后,运行npm run build,会将其所有的代码都生成在.output文件夹中。

由于一般我们都是在windows系统下开发,然后上传到linux服务器上,所有你需要将其压缩打包,然后上传到服务器解压后即可使用。

其虽然支持https,但官方并不推荐,所以其默认只能用http协议运行,命令就是node ./.output/server/inded.mjs

同时为了更好的利用服务器性能,一般不会像上面这样直接运行,而是会使用pm2工具。

安装命令为 npm i pm2 -g

安装完成后,你可以直接在.output文件夹同目录下创建一个名为ecosystem.config.js的文件,然后输入以下内容:

module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

name可以改成自己的程序名,然后直接在当前目录下,运行pm2 start命令就可以启动了。

如果想要启用https,那么你需要自己去一些网站上申请证书,很多都是免费的。

比如我申请得到了两个证书文件:cert.cercert.key

你可以下载安装nginx工具:sudo apt install nginx

然后将你的这两个文件上传、复制到目录/etc/nginx下:

image-20231104225509213

然后编辑配置文件:sudo vim nginx.conf,将下面这段配置内容复制进去:

    server {
       listen       443 ssl;
       server_name  localhost;

       ssl_certificate      cert.cer;
       ssl_certificate_key  cert.key;

       ssl_session_cache    shared:SSL:1m;
       ssl_session_timeout  5m;

       ssl_ciphers  HIGH:!aNULL:!MD5;
       ssl_prefer_server_ciphers  on;

       location / {
           proxy_pass http://127.0.0.1:3000; #反向代理
       }
    }

注意要复制到http这个大括号的内部,任意位置均可:

image-20231104225724426

它的目的就是代理,因为前面其默认监听的是所有ip地址的3000端口,所以这里就选择代理局域网127.0.0.13000端口。

然后启动nginx服务器即可,直接输入nginx,或者 sudo nginx

此时它的运行逻辑就是,nginx是一个https服务器,客户端都是连接到nginx上的,然后nginx又将所有的请求转发到前面我们自己启动的服务器上。

单过来亦然,说简单点,它就是一个中转站。

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux