nuxt 项目打包到 docker 运行

 

目录

背景

前言 

前端准备文件

1.资源预备

a. 项目根目录创建Docker文件，命名为 Dockerfile 。

b. Dockerfile代码

c. 新建writeDockerfile.ts文件

d. nuxt.config.ts配置

2.宝塔面板传输

a.打包.output（因为内有node_modules，文件量多大会被拒绝）

b.将.output.rar上传到宝塔 www / wwwroot / web / 并对其解压

c. 进入到目录文件夹

3.执行以下命令，基于基础镜像nginx构建新镜像。

4. 查看新镜像是否构建成功

5.创建容器并运行镜像

6.端口放行

7、Docker基本使用命令

a.管理Docker守护进程

b.管理镜像

---

背景

本文教会你：

a.如何在nuxt根目录创建Dockerfile文件，打包时自动复制到构建目录.output

b.构建新镜像(镜像名不能大写)

c.安全组端口放行 

前言 

如果你还没有部署docker，请阅读：

【阿里云】 给云服务器ECS 安装 Docker 并运行-CSDN博客

前端准备文件

1.资源预备

a. 项目根目录创建Docker文件，命名为 Dockerfile 。

b. Dockerfile代码

#1. 使用node:18.19.0作为基础镜像版本（这里选自己使用的node版本就行，以免版本不兼容）。
FROM node:18.19.0
#2. 设置环境变量NODE_ENV为production，表示将使用生产环境配置）。
ENV NODE_ENV=production
#3. 设置环境变量HOST为0.0.0.0（这个host不是指你的云服务器ip，不需要更改）。
ENV HOST 0.0.0.0
#4. 容器内创建目录/nuxt3
RUN mkdir -p /nuxt3
#5. 复制当前的内容到容器内容部目录/nuxt3
COPY ./ . /nuxt3
#6. 切换工作目录到/nuxt3
WORKDIR /nuxt3
#7. 暴露端口3000（这个端口指的是dorker容器内端口，可自行设置）
EXPOSE 3000
#8. 运行node命令，执行./server/index.mjs文件。
CMD ["node","./server/index.mjs"]

c. 新建writeDockerfile.ts文件

import fs from "node:fs";
import path from "node:path";
 
由于版权问题，更多内容，下载查阅！

下载地址：writeDockerfile.ts资源-CSDN文库

d. nuxt.config.ts配置

 
import writeDockerfile from "./utils/writeDockerfile";
export default defineNuxtConfig({
  hooks: {
    close: async () => {
      writeDockerfile("Dockerfile");
    }
  },
})

2.宝塔面板传输

这里通过宝塔面板上传.output文件内容(方式自行选择，宝塔、xftp、FinalShell等）

a.打包.output（因为内有node_modules，文件量多大会被拒绝）

b.将.output.rar上传到宝塔 www / wwwroot / web / 并对其解压

c. 进入到目录文件夹

cd /www/wwwroot/web/.output

也可以用宝塔的 ，直接进入

3.执行以下命令，基于基础镜像nginx构建新镜像。

如果失败可以在前面加上 sudo。

Linux sudo命令以系统管理者的身份执行指令，也就是说，经由 sudo 所执行的指令就好像是 root 亲自执行。

docker build -t vinca_web .

命令解析：

• docker build : 这是用于构建Docker镜像的命令。
• -t vinca_web:  -t 选项用于指定要构建的镜像的名称，vinca_web 是您为镜像指定的名称。您可以自定义名称，例如my_image。(注意不能使用大写）
•  . ：这表示Dockerfile所在的路径，.表示当前目录。Docker将在当前目录下查找Dockerfile文件，并使用它来构建镜像。

4. 查看新镜像是否构建成功

docker images

5.创建容器并运行镜像

docker run --name frontend -d -p 8000:3000 vinca_web

命令解析：

• docker run : 这是用于在Docker中运行容器的命令。
• --name frontend: --name 选项用于指定容器的名称，这里将容器命名为 frontend （前端）。您可以自定义容器名称。
• -d: -d选项用于在后台模式下运行容器，即将容器作为守护进程运行。
• -p 8000:3000: -p选项用于将容器的端口映射到宿主机的端口。这里将容器的端口3000映射到宿主机的端口8000。您可以根据需要修改端口映射的设置。
• vinca_web: 这是要运行的镜像的名称，这里是vinca_web。

至此，复制你的ECS云服务公网IP + 8000就可以访问你部署的站点了。

i. 如： 12.123.12.123:8000 （示例）。

ii. 其他问题可以打开控制台查看，比如接口跨域问题。

6.端口放行

阿里云 > 工作台 > 网络与安全 > 安全组 > 手动添加 8000 端口

参考文献：Linux 防火墙 操作命令【实用】-CSDN博客 

7、Docker基本使用命令

Docker基本用法，请参见Docker overview | Docker Docs

a.管理Docker守护进程

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

b.管理镜像

查看已有镜像

sudo docker images

---

以上就是nuxt项目部署到服务端的全过程，感谢支持。欢迎评论、指正。