简介：通过jenkins部署一个前端项目，主要逻辑是将项目整体打包成为一个docker镜像，并通过shell命令启动这镜像。

1.项目框架

名称	版本
Next.js	14.2.7
Node.js	20.0.4

 

2.Dockerfile文件

FROM node:18-alpine AS base

# 配置国内镜像，提高apk下载速度
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories

FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./

RUN yarn config set registry 'https://registry.npmmirror.com/'
RUN yarn install

FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN yarn build

FROM base AS runner
WORKDIR /app

COPY --from=builder /app/public ./public
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/.next/server ./.next/server

EXPOSE 3000
ENV PORT 3000
ENV HOSTNAME "0.0.0.0"

CMD ["node", "server.js"]

        构建镜像的文件：打包node.js、next.js以及将所需要用到模块复制到工作目录 /app下

3.Jenkins部署

• 下载node插件

 

系统管理--->插件管理,市场搜索NodeJS下载插件，重启Jenkins。 

• 构建项目

  1. 新建任务，选择构建一个自由风格的软件项目。

 有六个内容，可以选择其中的几个内容填写

                项目简介

                

                源码管理：项目的git地址（github、gitee）

        选择分支以及添加的凭证（凭证添加在凭证管理，可以看Jenkins部署）

 

Build Steps（很重要）

        在构建部分选择执行shell，相当于把一个shell脚本的命令粘贴到此处 

#!/bin/bash
# 定义一些变量
DOCKER_IMAGE="xiaokai/small-market-front"
DOCKERFILE_PATH="/path/to/your/Dockerfile"
PROJECT_PATH="/var/jenkins_home/workspace/small-market-front"

# 检查并删除旧的容器和镜像
docker ps -a | grep small-market-front && docker stop small-market-front
docker rm small-market-front
docker images -q xiaokai/small-market-front && docker rmi xiaokai/small-market-front

# 构建 Docker 镜像
cd $PROJECT_PATH
docker build -t $DOCKER_IMAGE .

# 运行 Docker 容器
docker run -itd -p 3000:3000 --name small-market-front $DOCKER_IMAGE

# 可选：部署到服务器或其他操作
# ssh deploy_user@deploy_host 'bash -s' < deploy_script.sh

         该脚本先检查了服务器中存在旧的容器和镜像，然后利用第二点的Dockerfile文件构建一个镜像，最后启动容器。

注：next.config.js与next.config.mjs

                项目有一个文件为next.config.js

 

/** @type {import('next').NextConfig} */
const nextConfig = {
    target: 'server',
    output: "standalone",
    env: {
        API_HOST_URL: process.env.API_HOST_URL
    },
}

module.exports = nextConfig

         有的项目中可能是next.config.mjs,需要改后缀为 .js且将内容改为上述格式，不然可能镜像在云服务器中启动然后失败，报错为：nofund modul。