如何使用Docker部署Nuxt3项目 结合1Plane面板（图文详解）

目录

一、部署Nuxt3

第一步：安装1Plane面板

第二步：打包Nuxt3项目

第三步：上传到服务器

第四步：配置Docker

第五步：配置域名和服务器端口 

---

一、部署Nuxt3

第一步：安装1Plane面板

在线安装 - 1Panel 文档

在服务器终端安装好1Plane面板

 

第二步：打包Nuxt3项目

运行 npm run build 打包命令

npm run build

 打包后会生成 .oupt 文件夹

在文件夹中打一个压缩包

第三步：上传到服务器

进入1Plane面板，点击进入服务器的文件夹

 点击上传按钮

 解压后，进入文件夹

第四步：配置Docker

新建一个 Dockerfile 文件

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

然后，点击左边菜单栏的容器选项 (没有安装的直接在应用市场安装即可)

首先要更换Docker的镜像源，因为我使用的是阿里云国内的服务器

https://docker.1panel.live

 接着我们要构建镜像

 点击确认后，等待一段时间，如果出现 success，就说明成功啦！

如果提示超时，请按照上面的步骤更换镜像源！！！

接下来我们创建一个Docker容器

 

第五步：配置域名和服务器端口 

我这里以阿里云服务器为例，进入服务器的控制台，进入安全组

 

 这时就已经可以通过服务器ip地址+端口访问啦！

---

接下来我们要配置域名（反向代理）

进入阿里云的云解析DNS

 

 在1Plane面板创建一个网站

 

以上就是 Nuxt3  Docker结合1Plane面板的部署方式，

希望对大家有帮助，整个过程还是挺多bug的，大家也可以多百度一下，加油！