dorker 在前端中的应用

目标一：在容器内运行 dev 环境

目标二：原地打包生成 dist

Dockfile 配置

# 使用 Ubuntu 的稳定版本作为基础镜像
FROM ubuntu:22.04

# 更新 apt 包管理器并安装必要的依赖
RUN apt-get update && \
    apt-get install -y \
    curl \
    ca-certificates \
    gnupg \
    lsb-release

# 设置 Node.js 的 PPA 仓库
RUN curl -fsSL https://deb.nodesource.com/setup_21.x | bash -

# 安装 Node.js 21.4.0
RUN apt-get install -y nodejs

# 设置镜像源
RUN npm config set -g registry https://registry.npmmirror.com/

# 安装 pnpm
# RUN curl -fsSL https://get.pnpm.io/install.sh | sh -

# npm 安装 pnpm
RUN npm install -g pnpm

# 执行手动下载的 pnpm 安装脚本
# COPY install_pnpm.sh /tmp/install_pnpm.sh
# RUN sh /tmp/install_pnpm.sh

# # 设置环境变量
ENV PATH="/root/.local/share/pnpm/bin:$PATH"

ENV NPM_SCRIPT dev

ENV SIGE_BASIC_URL https://support.sigenergy.com

# 设置工作目录
WORKDIR /app

# 创建生产文件挂载点
VOLUME /app/dist

# 复制 package.json 和 pnpm-lock.yaml 到工作目录
COPY package.json pnpm-lock.yaml ./

# 安装依赖
RUN pnpm install --frozen-lockfile

# 复制所有源代码到工作目录
COPY . .

# 暴露端口
EXPOSE 8080

# 设置启动命令
CMD pnpm run "${NPM_SCRIPT}"

Makefile 配置

IMAGE_VERSION ?=v1
DEFAULT_IMAGE_NAME = sigenergy-frontend-$(IMAGE_VERSION)
IMAGE_NAME ?= $(DEFAULT_IMAGE_NAME)
PLACEHOLDER_NAME = your-image-name
MAKEFILE_DIR:=$(patsubst %/,%,$(dir $(abspath $(lastword $(MAKEFILE_LIST)))))

all: build run

build:
	docker build -t $(IMAGE_NAME) .

run:
	docker run -v $(MAKEFILE_DIR)/dist:/app/dist -e NPM_SCRIPT=build $(IMAGE_NAME)

build-dev:
	docker build -t $(IMAGE_NAME) .

run-dev:
	docker run -p 8081:8080 $(IMAGE_NAME)

help:
	@echo "help"
	@echo "1. make:                                          build dist"
	@echo "2. build:                                         build pro image"
	@echo "3. run:                                           run pro image"
	@echo "4. make build-dev [IMAGE_NAME=$(PLACEHOLDER_NAME)]:     build dev image (default: $(DEFAULT_IMAGE_NAME))"
	@echo "5. make run-dev [IMAGE_NAME=$(PLACEHOLDER_NAME)]:       run dev image (default: $(DEFAULT_IMAGE_NAME))"

在容器内运行 dev 环境

make build-dev IMAGE_NAME=your_image_name

make run-dev IMAGE_NAME=your_image_name

原地打包生成 dist

make build IMAGE_NAME=your_image_name

make run IMAGE_NAME=your_image_name