前端项目打包Docker镜像

方式一：构建-打包 根目录下新建Dockerfile：

# 构建阶段
FROM node:16.19.1 AS builder

WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 创建 .npmrc 配置文件
RUN echo "legacy-peer-deps=true" > .npmrc \
    && echo "strict-peer-dependencies=false" >> .npmrc

# 清理并重新安装依赖
RUN rm -rf node_modules package-lock.json \
    && npm install --legacy-peer-deps --force

# 复制源代码
COPY . .

# 构建应用
RUN npm run build

# 生产阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

根目录新建nginx.conf

server {
    listen       80;
    server_name  localhost;

    # 修改 /maas 路径的处理
    location /maas/ {
        alias /usr/share/nginx/html/;
        index index.html;
        try_files $uri $uri/ /maas/index.html;  # 注意这里的路径
    }

    # 根路径的处理
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

构建docker build -t roboticbase2:latest .

启动docker run -d -p 8082:80 5498ef86f305

打包docker save roboticbase -o roboticbase.tar

PS:但是这种方式不太灵活，有时候换了包版本需要修改配置：

可以本地打包，Dockerfile只负责把Dist文件打包成镜像。

打包前端项目

npm run build
# or use yarn
yarn build

2、创建nginx配置文件default.conf

server {
    listen 80;
    server_name localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

3、创建Dockerfile文件

# 指定使用最新的nginx源
FROM nginx:latest
# 将dist目录拷贝到nginx目录下
COPY ./dist /usr/share/nginx/html/
# 使用default.conf覆盖默认的配置
COPY ./default.conf /etc/nginx/conf.d/
EXPOSE 80

4 打包项目为镜像

# -t： 表示指定需要创建的镜像名 .: 表示Dokerfile文件所在目录
docker build -t roboticbase2:latest .
# forexample
docker build -t roboticbase2:latest .

5 查看本地是否有新的镜像

 代码解读
复制代码
docker images

6 测试镜像是否OK

arduino
 代码解读
复制代码
docker run -p 80:80 roboticbase2:latest

http://localhost：80/ 浏览器访问能够访问到新的项目

7 将镜像推送至dockerhub

bash
 代码解读
复制代码
# 登录dockerhub
docker login -u username -P password
# 推送至dockerhub
docker push roboticbase2:latest

8 登录服务器部署前端项目

arduino
 代码解读
复制代码
docker run -p 80:80 roboticbase2:latest



坑：找不到dist,可以看下.dockerignore列表，是不是屏蔽了