编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

Nuxt3项目服务器部署笔记(nuxt 服务端渲染)

wxchong 2024-08-24 01:39:47 开源技术 11 ℃ 0 评论

环境基于宝塔面板配置

项目打包

npm run build
  • 包好后,你会在项目根目录下发现多了个 .output 文件夹
  • 打开这个文件夹,将里面的所有文件压缩成压缩包
  • 压缩包格式推荐 .rar ,其它格式尤其是.zip格式可能会造成有中文名的文件的名称乱码,从而会导致项目无法正常访问

上传服务器

  • 在服务器 wwwroot 文件夹下新建一个文件夹,文件夹名称随意(推荐改成你之后要绑定的域名),这个文件夹将作为项目文件夹
  • 打开该文件夹,将我们的压缩包上传到其根目录,解压

PM2管理器安装

  • 咱们点击宝塔面板的 软件商店 ,搜索 PM2,点击安装(若是非面板,访问 PM2官网 ,自行按照文档在终端进行安装)
  • 打开 PM2管理器 ,先点击 Node版本,选择合适的Node版本(注意,宝塔的这个PM2管理器是全局的,可能影响你之前运行的项目)

配置ecosystem.config.js

回到刚刚我们的创建项目文件夹根目录,新建一个 ecosystem.config.js 文件

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'guanwang',// 进程名称
      port: '3001',// 启动端口
      script: './server/index.mjs'// 执行文件
      exec_mode: 'cluster',// 开启集群模式,多线程模式
      instances: 'max',// 集群实例数
      autorestart: true // 程序崩溃后自动重启
    }
  ]

运行项目

  • 进入 PM2管理器 的 项目列表 ,点击 添加项目
  • 启动文件 选择 ecosystem.config.js ,运行目录 选择 ecosystem.config.js 所在的目录(一般会自动生成),点击 提交
  • 注意,提交后你可能会看到项目列表生成了多个相同名称的集群,不用担心,后续的设置端口监听和删除项目和映射和重启等都只需要点其中一个集群的就可以了
  • 现在,你可以通过 ip + 设置的端口 访问项目了

Docker打包部署nuxt3

创建个Dockerfile文件

FROM node:14-alpine

RUN mkdir -p /app

WORKDIR /app

COPY package.json /app/

RUN RUN npm i --registry=https://registry.npm.taobao.org

RUN npm run build

COPY ./.output /app/.output

EXPOSE 9000

ENTRYPOINT ["npm", "run", "start"]

修改package.json,增加start命令

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "preview": "nuxt preview",
    "start": "node .output/server/index.mjs",
    "generate": "nuxi generate"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^1.1.4",
    "@nuxtjs/axios": "^5.13.6",
    "element-plus": "^2.2.0",
    "pinia": "^2.0.14",
    "vue": "^3.2.33"
  },
  "devDependencies": {
    "@iconify/vue": "^3.2.1",
    "@pinia/nuxt": "^0.1.9",
    "@vueuse/nuxt": "^8.4.2",
    "@windicss/plugin-animations": "^1.0.9",
    "nuxt": "3.0.0-rc.3",
    "nuxt-windicss": "^2.3.1",
    "sass": "^1.51.0"
  }
}

新增docker-compose.yml文件如下

version: "3"
services:
  service_nuxt:
    image: nuxtapp:0.0.0 
    container_name: nuxtapp
    build:
      context: ./
    ports:
      - "3000:3000"
    environment:
      - TZ: Asia/Shanghai

启动容器

docker-compose up -d --build

停止容器

docker-compose stop

#挑战30天在头条写日记#

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表