Nuxt3：如何用docker容器部署Nuxt3

今天我们来介绍下如何使用docker部署Nuxt3

如果还没有安装docker容器请参考 

CentOS：Docker 创建及镜像删除_docker卸载镜像-CSDN博客

如果没有构建Nuxt3项目可以参考前端：Nuxt3 + Vuetify3 + Element Plus + 添加常用插件-CSDN博客

这里就不累赘了，我们正式介绍如何在docker容器部署Nuxt3：

直接在Nuxt3项目中直接执行打包：

npm run build

执行之后会生成.nuxt目录及output 目录，这里我们只需要output目录即可

配置Dockerfile 

FROM node:latest
# 容器中创建nuxt3
RUN mkdir -p /nuxt3 
# 将文件output所有文件复制到容器nuxt3文件中
COPY output/ . /nuxt3/
WORKDIR /nuxt3
EXPOSE 3000
CMD ["node","./server/index.mjs"]

其中output 即是你存放打包后的目录，该目录在服务器中，自行定义，确认打包文件已经上传服务器，在该目录下执行以下命令

docker stop 178xyw.com
docker rm 178xyw.com
docker rmi 178xyw.com
docker build -t 178xyw.com .
docker run --name 178xyw.com -d -p 9911:3000 178xyw.com

其中178xyw.com替换成你的docker服务名称，9911为容易映射到宿主机的端口号自行修改

启动之后我们发现页面是空白的。打开F12开发者模式发现相关js、css都没有找到。所以我们需要将 output >> public >> _nuxt 文件夹放置至Ningx目录下刷新即可

最终效果：178校园网(178xyw.com)