Nuxt3 部署实录(1)

bread_etc
614 阅读3分钟

Nuxt3 部署实录(1)

前言

最近使用Nuxt3 + prisma对我原先的博客进行了重构，但是部署的过程中很容易遇到一些问题，因此在这里记录一下。

安装Node环境和Nginx

我这边使用的是v20.16.0，如果需要选择其他版本的话推荐使用偶数版本，而不是奇数版本。具体的安装的步骤就不在此详细叙述，不过推荐使用宝塔(bt-panel)面板，对于后期证书获取、数据库导入较为方便。

偶数版本：LTS版，即长期支持的版本。相对于奇数版（current）更加稳定和安全，有至少30个月的维护期，但是更新频率较慢。 Nginx的版本则是1.24.0，不过我对于Nginx的版本并没有什么考究，只要是稳定版应该就没什么大问题。

数据库的安装

本站使用的是PostgreSQL，相比起MySQL，前者的受欢迎程度更高，可能是因为性能和使用场景优于后者。另外，值得一提的是，PostgreSQL的结构是这样的：实例->数据库->模式Schema->表->列，而MySQL的结构是这样的：实例->数据库->表->列。 不过这并不要紧，对于个人小项目来说，不同数据库的性能差异并不会带来多大影响。

构建项目

环境变量写入

首先需要在根目录分别创建.env.development和.env.production其中前者用于开发环境，后者用于生产环境，然后修改package.json中的脚本(scripts):

  "scripts": {
    "build": "prisma generate && nuxt build --dotenv .env.production",
    "dev": "nuxt dev --dotenv .env.development",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "gen": "npx prisma generate",
    "start": "node .output/server/index.mjs"
  },

Prisma的设置

如果本地是Window开发环境，需要迁移到远程的Debian主机上的话，需要在prisma文件夹下的schema.prisma文件做出以下修改：

// 生成器
generator client {
  provider = "prisma-client-js"
  binaryTargets = ["native", "debian-openssl-3.0.x"]
}

// 定义数据源
datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

然后在生产环境下运行命令npx prisma db push在生产环境下我们在文件内定义的模型生成到服务器对应的数据库中，就不需要我们手动建表了，非常地方便。如果有部分的本地数据需要迁移的话，也可以使用将.sql文件导入到对应的数据库内。

项目的打包

接下来我们可以使用yarn build进行项目的打包。这里推荐在远程服务器上进行打包，因为方便后续迁移.output文件夹到对应的node运行目录。 这时候很容易出现一个问题：prisma获取不到env(DATABASE_URL)。此时可以用这种方式解决：

  1. 将.env.production复制到打包后的.output的server的文件夹下，与index.mjs同级。
  2. 在index.mjs中添加以下代码：
import path from 'node:path'
process.loadEnvFile(path.resolve(process.cwd(), '.env.production'));
  1. 重新启动项目

这里的解决方式摘自csdn的nuxt3项目打包后获取.env设置的环境变量无效的解决办法

在宝塔中部署

添加Node项目

项目目录设置为刚刚打包好的server目录下，然后面板就会自动获取package.json文件中的启动模式，接着就设置启动命令为node /www/wwwroot/server/index.mjs，项目端口根据你实际设置的来填写，剩下的就是一些绑定域名、获取Let's Encrypt的免费证书。

设置HTTPS

在使用了Let's Encrypt的免费证书之后，需要修改.env.production环境变量中的后台地址，如下所示：

NUXT_PUBLIC_API="https://*.com/api"

这样才能在浏览器中访问以至于不会报错：Mixed Content: was loaded over HTTPS, but requested an insecure resource.

添加robots.txt

在打包后的.output的根目录下创建一个robots.txt文件，里面添加一些关于规则，这里可以搜索相关的规则，我也不大清楚：

User-agent: *
Disallow: /admin
Disallow: /secret
Disallow: /auth

结语

到这就差不多部署完成了，今后再慢慢更新其他细节。

avatar
文章
阅读
粉丝