笔记

部署一个 Vue3 项目

在你的项目根目录下创建一个 dockerfile 文件，用来定义 Docker 镜像的构建规则。

# 使用 Node.js 16 作为基础镜像
FROM node:16

# 将当前工作目录设置为/app
WORKDIR /app

# 将 package.json 和 package-lock.json 复制到 /app 目录下
COPY package*.json ./

# 运行 npm install 安装依赖
RUN npm install --registry=https://registry.npmmirror.com

# 将源代码复制到 /app 目录下
COPY . .

# 打包构建
RUN npm run build

# 将构建后的代码复制到 nginx 镜像中
FROM nginx:latest
COPY --from=0 /app/dist /usr/share/nginx/html

# 暴露容器的 9999 端口，此处其实只是一个声明作用，不写的话也可以，后面运行容器的
# docker run --name container_name -p <host_port>:<container_port>命令中container_port可以覆盖此处的声明，不写就默认80端口
EXPOSE 9999

# 启动 nginx 服务
CMD ["nginx", "-g", "daemon off;"]

随后使用 docker build -t 镜像名称 . 来构建镜像。. 表示当前目录，即 Dockerfile 所在的目录。

紧接着在创建一个 .dockerignore 文件，用来忽略一些不需要打包进镜像的文件，比如 .git 目录、node_modules 目录等。

node_modules
.DS_Store
npm-debug.log*
yarn-debug.log*
yarn-error.log*

最后使用 docker run -d -p 9999:80 镜像名称 来运行容器，其中 -p 9999:80 表示将宿主机的 9999 端口映射到容器的 80 端口，镜像名称 是你前面构建的镜像的名称。

部署一个 Nuxt3 项目

在你的项目根目录下创建一个 dockerfile 文件，用来定义 Docker 镜像的构建规则。

# 使用 Node.js 作为基础镜像
FROM node:20

# 将当前工作目录设置为/app
WORKDIR /app

# 将 package.json 和 pnpm-lock.yaml 复制到 /app 目录下
COPY package.json pnpm-lock.yaml ./

# 安装依赖并且安装pnpm
RUN npm install -g pnpm && pnpm install

# 将源代码复制到 /app 目录下
COPY . .

# 打包构建
RUN pnpm run build

# 启动服务
CMD ["node", ".output/server/index.mjs"]

随后使用 docker build -t 镜像名称 . 来构建镜像。. 表示当前目录，即 Dockerfile 所在的目录。

紧接着在创建一个 .dockerignore 文件，用来忽略一些不需要打包进镜像的文件，比如 .git 目录、node_modules 目录等。

/.nuxt
/.output
/node_modules
.gitignore
README.md

最后使用 docker run -d -p 9999:3000 镜像名称 来运行容器，其中 -p 9999:3000 表示将宿主机的 9999 端口映射到容器的 3000 端口，镜像名称 是你前面构建的镜像的名称。