宝塔Docker部署Nuxt3 BBS项目

news2024/9/20 22:46:26

体验地址

BBS:http://bbs.sourcebyte.vip

Nuxt3:https://nuxt.com.cn

BBS项目介绍

BBS是开源字节最新研发的社区项目,包含产品中心,需求墙,工具,资讯4大板块。

1、产品中心:开源字节有众多开源项目,以及众多商业化项目,该板块完整的向用户展示了产品的应用场景与特性,方便有需求的用户进行选择,同时也欢迎大家自荐优秀的软件产品,共同打造优质社区,解决需求者找供应商难,开发者解决找客户难的问题。

2、需求墙:在开源交流的过程中,我们发现用户普遍有软件开发以及技术支持的需求,在该板块,需求发布者可以发布需求,寻求开发者协助。开发者可以解决用户的需求,提高自己的技术水平,并获得一定的报酬。

3、工具:社区提供众多优秀的开源工具以及商业工具,方便有需求的用户下载使用。

4、资讯:社区收集并发布对大家有帮助的文章,打造共同进步的氛围。

Nuxt3介绍

Nuxt是一个免费且开源的框架,它提供了一种直观且可扩展的方式来创建类型安全、高性能和生产级别的全栈Web应用和网站,使用的是Vue.js。

Nuxt默认具备内置的服务器端渲染(SSR)能力,无需自己配置服务器,这对于Web应用有许多好处:

1、更快的初始页面加载时间: Nuxt向浏览器发送完全渲染的HTML页面,可以立即显示。这可以提供更快的页面加载时间和更好的用户体验(UX),特别是在网络或设备较慢的情况下。

2、改善SEO: 搜索引擎可以更好地索引SSR页面,因为HTML内容立即可用,而不需要依赖JavaScript在客户端渲染内容。

3、在低功率设备上的更好性能: 减少了需要在客户端下载和执行的JavaScript量,这对于处理重型JavaScript应用程序可能有困难的低功率设备非常有益。

4、更好的可访问性: 内容在初始页面加载时立即可用,改善了依赖屏幕阅读器或其他辅助技术的用户的可访问性。

5、更容易的缓存: 页面可以在服务器端缓存,这可以通过减少生成和发送内容所需的时间而进一步提高性能。

总体而言,服务器端渲染可以提供更快更高效的用户体验,同时改善搜索引擎优化和可访问性。

Docker部署Nuxt3

在我们开发好项目后,如何部署到自己的服务器上,接下来带大家实操一下:

1、使用npm run build 命令,得到 .output,并且上传服务器,可以在服务器建立文件夹 source-bbs并将文件拷贝其中

2、编写 Dockerfile文件

#1、基于镜像node版本
FROM node:18.18.0
#2、作者
MAINTAINER sourcebyte.vip
#3、参数,node的环境为生产环境
ENV NODE_ENV=production
#4、任意ip
ENV HOST 0.0.0.0
#5、容器内创建目录/source-bbs
RUN mkdir -p /source-bbs
#6、复制当前的内容到容器内容部目录/source-bbs
COPY .output/ . /source-bbs
#7、切换工作目录到/source-bbs
WORKDIR /source-bbs
#8、暴露端口3000,默认端口
EXPOSE 3000
#9、start
CMD ["node","./server/index.mjs"]

3、切换到安装目录

cd /www/wwwroot/bbs.sourcebyte.vip/source-bbs

4、打包项目镜像 docker build -t source-bbs .,注意别把最后的 . 丢失 ,使用 docker images查看镜像

5、创建容器并运行镜像

docker run --name source-bbs -d -p 3000:3000 source-bbs

6、配置Nginx映射到3000端口

location / { 
 proxy_set_header Host $http_host;
 proxy_set_header X-Real-IP $remote_addr;
 proxy_set_header REMOTE-HOST $remote_addr;
 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 #websocket
 proxy_set_header Upgrade $http_upgrade;      
 proxy_set_header Connection "upgrade";
 proxy_pass http://localhost:3000/;
}

7、修改项目后重新部署,需要重新上传.output,并执行以下命令重启服务

# 1、切换目录
cd /www/wwwroot/bbs.sourcebyte.vip/source-bbs
# 2、停止运行
docker stop source-bbs
# 3、删除镜像
docker rm source-bbs
# 4、生成镜像
docker build -t source-bbs .
# 5、运行镜像
docker run --name source-bbs -d -p 3000:3000 source-bbs

8、步骤7太过繁琐,新建脚本一键部署项目,命令如下

# 新建sh脚本
vim bbs.sh
# 输入脚本命令
docker stop source-bbs && docker rm source-bbs && docker build -t source-bbs . && docker run --name source-bbs -d -p 3000:3000 source-bbs
# 切换目录并启动脚本(一行命令启动服务)
cd /www/wwwroot/bbs.sourcebyte.vip/source-bbs && sh bbs.sh

以上完成后,即可通过域名/ip访问项目

如若转载,请注明出处:开源字节   https://sourcebyte.vip/article/373.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1951991.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

常见的jmeter面试题及答案

1、解释什么是JMeter? JMeter是一款Java开源工具, 用于性能负载测试。它旨在分析和衡量Web应用程序和各种服务的性能和负载功能行为。 2、说明JMeter的工作原理? JMeter就像一群将请求发送到目标服务器的用户-样。它收集来自目标服务器的响应以及其他统计数据&…

python利用lxml模块爬取百度贴吧标题列表—新手练习的项目

一、爬取需求 就是用python,获取某百度贴吧的标题 二、代码 import lxml.html import requests ydm requests.get(https://tieba.baidu.com/f?ieutf-8&kw%E5%BC%A0%E5%A7%93%E4%B9%8B%E5%AE%B6).content.decode() selector lxml.html.fromstring(ydm) inf…

Java 每日一题: for 与 foreach 的区别 ?

for 循环:是最基本的循环结构,可以通过初始化语句、循环条件和迭代语句来控制循环的执行。 foreach 循环(也称为增强型 for 循环):用于遍历集合或数组中的元素,简化了遍历过程,没有显式地控制索…

虚拟局域网——VLAN

VLAN的定义 VLAN virtual local Area Network 虚拟局域网,将物理上的局域网LAN在逻辑上进行划分 使用VLAN技术可以有效隔离广播域,减少网络中不必要的带宽消耗,如图,192.168.1.1发送一个广播帧,那么在这个广播域中的所…

HBuilder X中配置vue-cli项目和UI库

目录 一.前端项目结构 二.在HBuilder X中搭建vue-cli项目 1. 安装node.js前端环境 2. HBuilder X创建一个vue-cli项目 3. vue-cli项目结构 4. 如何运行前端项目 5. 创建组件 6. 组件路由(页面跳转) 6.1 创建router目录 6.2 使用路由 6.3 在main.js中配置路由 6.4 路…

多多OJ评测系统 在前端脚手架Vue-Cli中设置页面路由

目录 设置页面路由 我们把菜单上的路由改成读取路由文件 设置成export 导出路由 在刚刚的原始路由 index.ts中导入就行了 在这边引入我们的路由文件 我们之后点击菜单 我们的路由文件是这样的 但是没有跳转 写一下事件 接下来要同步路由到菜单项 自己定义监听函数 …

【吊打面试官系列-Dubbo面试题】Dubbo 服务降级,失败重试怎么做?

大家好,我是锋哥。今天分享关于 【Dubbo 服务降级,失败重试怎么做?】面试题,希望对大家有帮助; Dubbo 服务降级,失败重试怎么做? 可以通过 dubbo:reference 中设置 mock"return null"…

认知是门槛、红利和自己人生的奇异点

认知是门槛、红利和自己人生的奇异点 我发现,身边绝大部分有钱人,「认知」都已经处于比较高的层次,人的认知其实分6个层级: 第一层,环境层第二层,行为层第三层,能力层第四层,BVR 层第五层&…

Android WebViewClient 的 `shouldOverrideUrlLoading` 方法

简介 在Android开发中,WebView是一个强大的工具,可以在你的应用中显示网页内容。了解 WebViewClient 中的 shouldOverrideUrlLoading 方法是至关重要的,因为这个方法允许你控制 URL 在 WebView 中的处理方式。 在本文中,我们将详…

鼠标宏怎么设置?适合游戏玩家的通用鼠标宏工具分享

在很多大型游戏当中,鼠标的操作效率成为决定游戏成败的因素之一。好用的鼠标及按键设置可以帮助玩家简化很多游戏操作步骤,轻松提升游戏操作效率。鼠标宏的出现使得人们在游戏、日常办公中带来极大地便利。今天小编将详细介绍鼠标宏在游戏种的作用以及常…

【Three.js基础学习】17.imported-models

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 前言 课程回顾: 如何在three.js 中引入不同的模型? 1. 格式 (不同的格式) https://en.wikipedia.org/wiki/List_of_file_form…

基于单片机控制的升降式焊接工作台的设计

摘 要: 设计一种基于单片机控制的升降式焊接工作台,由机械系统和单片机控制系统组成 。 采用 STC89C51 单片机为电路控制核心,独立键盘和共阴极 7 段数码管显示器作为外设,对升降式焊接工作台单片机控制系统中的主控电路 、 显示电路、 键…

精选3款屏幕录制软件,总有一款适合你

随着技术的不断发展,屏幕录制已成为我们生活中不可或缺的一部分,无论是录制在线会议、制作教程、游戏直播还是分享演示文稿,屏幕录制软件都发挥着重要作用。本文将详细介绍3款主流的屏幕录制工具,并分步骤阐述它们的使用方法&…

CogVideo 实测,智谱「清影」AI视频生成,全民免费,连 API 都开放了!

不得不说,AI 视频生成界最近非常火热~ 前有快手「可灵」开放内测,一下子带火了老照片修复,全网刷屏: 怕是你还没拿到内测资格,被称为 “国货之光” 的「可灵」就结束了免费无限量模式。每天只有66点的免费额度&#x…

小程序的运营方法:从入门到精通

随着科技的快速发展,小程序已成为我们日常生活和工作中不可或缺的一部分。小程序无需下载安装,即用即走的特点深受用户喜爱。那么,如何运营好一个小程序呢?下面就为大家分享一些小程序的运营方法。 一、明确目标用户 在运营小程序…

sqlserver 连接数据4064

用sa登录,找到对应的登录名,右键属性,设置默认数据库

Android APP 音视频(03)CameraX预览与MediaCodec编码

说明: 此CameraX预览和编码实操主要针对Android12.0系统。通过CameraX预览获取yuv格式数据,将yuv格式数据通过mediacodec编码输出H264码流(使用ffmpeg播放),存储到sd卡上。 1 CameraX 和 MediaCodec简介 1.1 CameraX…

【区块链】如何发行自己的加密货币到以太坊测试网络,remixIDE发行自己的数字货币

如何发行自己的加密货币到以太坊测试网络 环境 reminx在线编辑器:https://remix.ethereum.org/安装有小狐狸钱包插件(MetaMask) 如何部署代币? 创建一个名字叫做HelloMyToken.sol的文件。编写好智能合约,这边我要发…

RedHat9 | Ansible 处理任务失败

环境版本说明 RedHat9 [Red Hat Enterprise Linux release 9.0]Ansible [core 2.13.3]Python [3.9.10]jinja [3.1.2] 1. 忽略任务失败 Ansible评估各任务的返回代码,从而确定任务是成功还是失败通常而言,当任务失败时,Ansible将立即在该主…

【2024年国际高等学校数学建模竞赛IMMCHE】问题 A:金字塔石块的运输 问题分析及数学模型及求解代码

【2024 年国际高等学校数学建模竞赛(IMMCHE)】问题 A:金字塔石块的运输 问题分析及数学模型及求解代码 Problem A: Transportation of Pyramid Stones 1 题目 建造金字塔是古埃及文明的杰出成就之一。它们不仅是建筑奇迹,也是人…