在服务端部署Nuxt 3 应用有多种途径,既可以通过 Node.js 直接启动服务,也能利用 PM2 实现无人值守的自动化运维。那么,我为何偏要选择 Docker 来部署呢?
原因在于,自 Node.js 18 版本起,官方已不再支持 CentOS 7 系统。CentOS 7 的 glibc 版本相对较低,限制了其仅能安装至 Node.js 16 版本,而升级整个系统不仅繁琐,还可能引发一系列兼容性问题。
尤为关键的是,我的 Nuxt 3 应用需要 Node.js ≥18 版本方能稳定运行,且 Nuxt 3 官方亦强烈推荐使用 Node.js 18 或更高版本来确保应用的最佳性能与兼容性。因此,采用 Docker 部署 Nuxt 3 应用成为了一个既高效又便捷的选择。本文将简要阐述如何运用 Docker 技术来构建并部署 Nuxt 3 应用的过程。
编写Dockerfile文件
- # 指定基于 node:18.20.3-alpine 镜像构建
- FROM node:18.20.3-alpine
- # 设置默认工作目录为 /home/nuxt-vue/default
- WORKDIR /home/nuxt-vue/default
- # 将当前目录下的所有文件复制到容器的 /home/nuxt-vue/default 目录下
- COPY . .
- # 设置 NUXT_HOST 环境变量为 0.0.0.0,表示监听所有网络接口
- ENV NUXT_HOST=0.0.0.0
- # 设置 NUXT_PORT 环境变量为 3000,表示应用运行的端口号
- ENV NUXT_PORT=3000
- # 暴露容器的 3000 端口,使得外部可以访问
- EXPOSE 3000
- # 设置容器启动时执行的命令,这里使用 node 命令运行 .output/server/index.mjs 文件
- ENTRYPOINT ["node", ".output/server/index.mjs"]
上述文件放至nuxt3构建产物.output同级
的文件夹目录,并将其上传至服务器指定目录,本文的指定目录是 /home/nuxt-vue/default
。
安装docker
- # 更新系统包
- sudo yum update -y
- # 安装必要的依赖
- sudo yum install -y yum-utils device-mapper-persistent-data lvm2
- # 添加Docker的官方仓库
- sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
- # 安装Docker
- sudo yum install docker-ce docker-ce-cli containerd.io -y
- # 启动Docker服务
- sudo systemctl start docker
- # 设置Docker开机自启
- sudo systemctl enable docker
构建Docker镜像
- docker build -t my-nuxt-app .
这里 -t
参数用于给镜像命名,例如 my-nuxt-app
,镜像名字按自己喜好,不过最好和项目相关,方便区分。
运行Docker容器
- docker run -d -p 3000:3000 --name my-running-nuxt-app my-nuxt-app
上述命令的作用是:
docker run
启动一个新的 Docker 容器。-d
以守护进程模式(后台模式)运行容器,容器启动后不会阻塞终端。-p 3000:3000
将容器内的端口 3000 映射到宿主机的端口 3000。--name my-running-nuxt-app
给容器命名为 my-running-nuxt-app。my-nuxt-app
使用 my-nuxt-app 镜像来启动容器。
验证
- 打开浏览器访问 http://localhost:3000,应该可以看到你的应用运行起来了。
docker常用命令
- # 构建一个 Docker 镜像,并将其标记为 my-nuxt-app
- docker build -t my-nuxt-app .
- # 在后台模式(-d)启动一个 Docker 容器,并将容器内的端口 3000 映射到宿主机的端口 3000,容器命名为 my-running-nuxt-app
- docker run -d -p 3000:3000 --name my-running-nuxt-app my-nuxt-app
- # 列出当前正在运行的所有容器
- docker ps
- # 列出所有容器(包括已停止的)
- docker ps -a
- # 停止名为 my-running-nuxt-app 的容器
- docker stop my-running-nuxt-app
- # 重启名为 my-running-nuxt-app 的容器
- docker restart my-running-nuxt-app
- # 查看名为 my-running-nuxt-app 的容器的日志
- docker logs my-running-app
- # 移除名为 my-running-nuxt-app 的容器
- docker rm my-running-nuxt-app
- # 移除名为 my-nuxt-app 的镜像
- docker rmi my-nuxt-app
tips
因为众所周知的一些原因,docker官方镜像不太稳定,我们可以通过配置国内镜像来进行访问加速。
- 编辑 daemon.json 文件(没有的话手动创建一个):
- sudo vim /etc/docker/daemon.json
2. 添加镜像加速器配置
- {
- "registry-mirrors": [
- "https://dockerproxy.cn",
- "https://mirror.iscas.ac.cn"
- ]
- }
3. 输入:wq
,保存退出
4. 重启docker
- sudo systemctl restart docker
根据上述内容,执行以下步骤
- 构建Docker镜像
- 运行Docker容器
最后
欢迎大家访问文中提到的,已经docker部署成功的nuxt3应用:
地址:https://nuxt-vue.haoht123.com/

微信小程序
互联网开发,终身学习者,欢迎您的关注!