如何用docker容器部署nuxt3项目

news2024/9/28 7:26:26

 Nuxt3是基于Vue3的一个开发框架,基于服务器端渲染SSR,可以更加方便的用于Vue的SEO优化。

Nuxt 3.0 新特性包括:

更轻量:以现代浏览器为目标的服务器部署和客户端产物最多可缩小 75 倍

更快:基于 nitro 提供动态代码分割能力,以优化冷启动性能

Hybrid:增量静态生成和其他的高级功能现在都成为可能

Suspense:在任意组件和导航前后都可以获取数据

Composition API:使用 Composition API 和 Nuxt 3 的 composables 实现真正的代码复用

Nuxt CLI:没有任何依赖,帮你轻松搭建项目和集成模块

Nuxt Devtools:通过直接在浏览器中查看信息和快速修复实现更快地工作

Nuxt Kit:具有 Typescript 和跨版本兼容性的全新模块开发

Webpack 5:更快的构建时间和更小的包大小,无需配置

Vite:使用 Vite 作为打包工具,体验闪电般快速的 HMR

Vue 3:Vue 3 是你下一个 Web 应用程序的坚实基础

TypeScript:使用原生 TypeScript 和 ESM 构建,无需额外步骤
 

具体nuxt3项目配置与打包发布,大家可以查看之前写的这篇文章:《Nuxt3从零开始配置与打包发布》

nuxt3写的SSR项目更利于SEO,更轻量、访问速度更快、并且路由更友好、免配置路由。由于是SSR 服务端渲染(Server-side Rendering),这种技术的优点在于更快的首屏加载速度和更好的搜索引擎优化(SEO)。相比较于客户端渲染,SSR能够提高用户的使用体验。

由于nuxt3是SSR项目,所以我们需要在服务器端部署node环境或者pm2环境,用来执行启动项目服务器端命令,并且要有守护进程来保护node进程,防止被误杀停止服务器。因此我们这里选择docker容器进行部署nuxt3 SSR项目。

1、docker安装

Linux系统自动化安装docker命令:

curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun

如果你是用的是阿里云Linux系统部署并使用Docker(Alibaba Cloud Linux 3),命令如下:

//安装dnf,dnf是新一代的rpm软件包管理器
yum -y install dnf

//1、安装dnf源中默认的Docker(podman-docker)
//安装docker
dnf -y install docker
//注意:该方式安装的podman-docker没有守护进程(systemd),因此您在后续的操作中无需关注podman-docker的运行状态(无需进行systemctl命令的相关操作),直接使用Docker即可

//2、安装社区版Docker(docker-ce)
//添加docker-ce的dnf源
dnf config-manager --add-repo=https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

//如果提示config-manager不存在的话,执行下面安装命令
dnf install 'dnf-command(config-manager)'

//安装Alibaba Cloud Linux 3专用的dnf源兼容插件
dnf -y install dnf-plugin-releasever-adapter --repo alinux3-plus
//如果您不使用Alibaba Cloud Linux 3专用的dnf源兼容插件,将无法正常安装docker-ce
//安装docker-ce
dnf -y install docker-ce --nobest
//查看docker-ce是否成功安装
dnf list docker-ce

//启动Docker服务
systemctl start docker

//查看Docker服务的运行状态
systemctl status docker

//管理Docker守护进程
systemctl start docker     #运行Docker守护进程
systemctl stop docker      #停止Docker守护进程
systemctl restart docker   #重启Docker守护进程
systemctl enable docker    #设置Docker开机自启动
systemctl status docker    #查看Docker的运行状态

阿里官方安装文档:如何部署并使用Docker(AlibabaCloudLinux3)_云服务器 ECS-阿里云帮助中心

如果使用的是Alibaba Cloud Linux 2,按照这个文档安装:如何在ECS实例上部署并使用Docker_云服务器 ECS-阿里云帮助中心

如果是阿里云CentOS 8的话,按照这个文档安装:

如何部署并使用Docker(CentOS8)_云服务器 ECS-阿里云帮助中心

Docker基础命令

2、启动docker

systemctl start docker

3、停止docker守护进程

systemctl stop docker

4、重启docker守护进程

systemctl restart docker

5、设置Docker开机自启动

systemctl enable docker

6、查看docker运行状态

systemctl status docker

7、查看docker版本号

docker version

8、查看自己服务器中docker镜像列表

docker images

9、查看容器列表

docker ps

10、搜索镜像

docker search 镜像名

 11、拉取镜像

docker pull 镜像名 
docker pull 镜像名:tag

Docker打包部署nuxt3

12、打包nuxt3项目

npm run build

打包后,在.output目录里就是打包好的SSR项目文件。

我们可以在这里创建个Dockerfile文件。这个里面是编写的docker项目运行环境、打包镜像和运行项目命令的一个配置文件。

给个配置文件例子:

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

13、打包项目镜像(打包后的nuxt3项目文件上传到linux服务器某个目录,在目录路径里执行打包镜像命令)

docker build -t image_Name .

14、创建容器并运行镜像

docker run -it -d --name 要取的别名 -p 宿主机端口:容器端口 -v 宿主机文件存储位置:容器内文件位置 镜像名:Tag /bin/bash 

//例子如下
docker run --name nuxtContainer -d -p 9020:3000 nuxt3

这样,访问对应的ip+端口就可以访问到nuxt3部署的项目了。

如果需要更新项目,需要执行:重新打包项目最新镜像、停止容器、删除容器、重新创建并运行镜像。

15、停止容器

docker stop 容器名/容器ID

16、删除容器

docker rmi -f 容器名/容器ID

重新创建并运行镜像的命令和第14创建容器并运行镜像是一样的命令

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

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

相关文章

CentOS 查找未挂载磁盘,格式化后并挂载

1.查看当前Linux服务器磁盘分区 1 # df -Th 2.查看当前服务器硬盘 1 # fdisk -l 图中磁盘 /dev/sdb为未挂载的磁盘(磁盘符号依次为sda、sdb、sdc……) 后面以sdb为例 3.磁盘分区 fdisk /dev/sdb (依次键入) n 回车 p 回车 1 回车 (此处…

总结822

学习目标: 4月(复习完高数18讲内容,背诵23篇短文,熟词僻义300词基础词) 学习内容: 暴力英语:早上背了《the method of learning 》,之后默写了一遍,还不是很熟练。抄写了前10篇的短…

BVH ==>SMPL for Unified

BVH to SMPL 将BVH文件转换为SMPL模型,需要使用专业的3D建模软件。 例如 Blender或Maya。 Steps 导入BVH文件到建模软件中。将BVH文件应用于一个适当的人体模型。将人体模型转换为SMPL模型。导出SMPL模型文件。 Realization https://github.com/Meshcapade/SMPL_b…

软件质量保证与软件测试复习笔记(第一周总体介绍+黑盒测试详细)

第一周 2.23 (总体性介绍) 软件测试的定义 常用术语解释 错误 缺陷 故障 失效 测试和测试用例、测试过程 出现软件缺陷的原因 软件开发的主要环节 测试过程的生命周期模型 软件测试的本质是针对要测试的内容确定一组测试用例 测试用…

电脑无法正常关机?点了关机又会自动重启

“真木马”相信不少朋友遇到过电脑关机自动重启现象,一点关机,但随后电脑有会进入重启状态,就是一直不会停,属实是很难崩。 目录 一、问题症状 二、问题原因 三、解决方案 方法一: 1.关闭系统发生错误时电脑自动…

生命在于折腾——PicGo+Minio+Typora图床搭建

好久没更新了,前段时间太忙了,还有些摆烂,所以,嗯,懂得都懂,写这篇博客前一天我还在椅子上坐了两个小时,思考人生的意义。 话不多说,开始吧。 一、起因 因为好久没管过博客&#…

显存不够用?一种大模型加载时节约一半显存的方法

Loading huge PyTorch models with linear memory consumption 本文主要介绍了一种用于加载巨大模型权重时节约接近一半显存的方法 首先,创建一个模型: import torch from torch import nnclass BoringModel(nn.Sequential):def __init__(self):super().__init__…

NIFI大数据进阶_实时同步MySql的数据到Hive中去_可增量同步_实时监控MySql数据库变化_实际操作_03---大数据之Nifi工作笔记0035

然后我们来操作一下首先创建一个处理器组名字是: MysqlToHive_timely 创建组以后我们进入这个组 然后我们先去添加CaptureChangeMySql这个处理器 拖入处理器以后,我们配置这个处理器 可以看到很多属性,这里我们配置 首先看这个Distrbuted Map Cache Client 这个客户端,我们先来…

ChatGPT聊天机器人程序

ChatGPT聊天机器人程序是一种基于人工智能技术的智能对话程序,利用ChatGPT等自然语言处理模型和算法实现与用户的交互,回答问题、提供服务等。 ChatGPT聊天机器人程序通常包括以下模块: 输入模块:用于接收用户输入的信息&…

vmware虚拟机上网设置教程(vmware虚拟机设置网络)

安装vmware后,一般都会有虚拟机能连互联网的需求(如虚拟机中Linux想访问百度),vmware为我们提供了几种连接网络的方式,它们分别是:Bridged(桥接模式)、NAT(网络地址转换模…

SpringBootApplication最详细注解

SpringBootApplication最详细注解SpringBootApplication的注解分类1.Target2.Retention3.Document4.Inherited5.SpringBootConfiguration6.EnableAutoConfiguration6.1AutoConfigurationPackage这个注解6.1.1 Import6.1.2 AutoConfigurationpackages.Registrar.class6.2 AutoCo…

DeepSpeed Chat: 一键式RLHF训练,让你的类ChatGPT千亿大模型提速省钱15倍

DeepSpeed Chat: 一键式RLHF训练,让你的类ChatGPT千亿大模型提速省钱15倍 1. 概述 近日来,ChatGPT及类似模型引发了人工智能(AI)领域的一场风潮。 这场风潮对数字世界产生了革命性影响。ChatGPT类模型具有惊人的泛用性&#xff0…

硬盘未格式化如何处理(硬盘忽然未格式化如何处理)

将硬盘插入电脑的时候为什么会出现“未格式化”的提示框呢?遇到这个问题时又该怎么处理呢?别慌,下面小编就来给大家演示一下子解决未格式化这个问题的解决方法。 硬盘未格式化如何处理工具/软件:sayRecy 步骤1:先百度搜索并下载程序打开后&…

一文吃透Java线程池——基础篇

前言 本文分为两部分。 第一部分是基础章节。可以帮助我们了解线程池的概念,用法,以及他们之间的的关系和实际应用。 第二部分是实现机制篇。通过源码解析,更深刻理解线程池的工作原理,以及各个概念的准确含义。 原本是一篇文章&…

ping不通的几种故障

网络ping不通是网络中出现频率最高的故障之一,同时也是最让人抓狂的故障,基本上大部分人都遇到过了,如果在项目中出现网络ping不通,没有一个有序的方法去排除解决,那么很难入手,也是讨论最多的问题之一&…

DNS(UOS)

安装DNS apt install bind9 nfsutils -y 切换目录 cd /etc/bind vim named.conf.defaults.zones 复制备份 cp -a db.local skills.net.zone cp -a db.127 146.16.172.in-addr.arpa vim skills.net.zone vim 146.16.172.in-addr.arpa vim /named.conf.options 重启bind9 …

javascript学习笔记

本笔记来源于B站尚硅谷javascript教程10.尚硅谷_JS基础_Null和Undefined_哔哩哔哩_bilibili 1、Null和None Null类型的值只一个,就是null; null这个值专门用来表示一个为空的对象; 使用typeof 检查一个null值时,会返回object; Undefined类型的值只有一个…

C++ 特性简化STM32 风格固件库的GPIO 操作,使用HK32F030M

所谓的STM32 风格就是指下面这种: // 开启时钟 RCC_AHBPeriphClockCmd( LED1_GPIO_CLK | LED2_GPIO_CLK, ENABLE);//定义初始化结构体 GPIO_InitTypeDef GPIO_InitStructure; GPIO_InitStructure.GPIO_Mode GPIO_Mode_OUT; GPIO_InitStructure.GPIO_OType GPIO_O…

迭代器与仿函数

迭代器与仿函数一般分类功能方式分类STL迭代器的类型迭代器辅助函数流型迭代器仿函数仿函数的编写标准库中的仿函数一般分类 正向迭代器 容器名:iterator it begin() end() 2.反向迭代器 容器名:reverse_iterator it rbegin() rend() 3.常正向迭代器 容器…

MQTT 安全解析:构建可靠的物联网系统

物联网逐渐渗透到医疗保健、智能家居、智慧城市、自动驾驶等我们生活中的各个领域。这其中所涉及到的物联设备的安全也因此变得愈发重要。一旦物联网系统遭到恶意入侵,不仅海量设备数据将面临丢失、被窃取和篡改等安全风险,使用这些设备和物联网应用的终…