如何用docker容器部署nuxt3项目_docker 部署nuxt3

 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 rm -f 容器名/容器ID

17、删除镜像

docker rmi -f 镜像名/镜像ID

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