docker + nginx打包前端镜像

news2024/12/22 23:05:06

项目场景:

前端使用angular开发,Dockerfile如下:

FROM nginx:1.16.1 AS base

WORKDIR /app

COPY nginx.conf.template /etc/nginx/

CMD ["/bin/bash", "-c", "envsubst '${APP_VERSION}' < /app/index.html > /app/index.html && envsubst '${API_SERVER_HOST} ${API_SERVER_PORT}' < /etc/nginx/nginx.conf.template > /etc/nginx/nginx.conf && exec nginx -g 'daemon off;'"]

EXPOSE 80

FROM angular:13.2.5 AS build

WORKDIR /my-app

COPY package.json package-lock.json ./

RUN npm install

COPY . .

RUN ng build

FROM base AS final

WORKDIR /app

COPY --from=build /my-app/dist/my-app .


问题描述

首先,看到npm版本过低,需要升级版本;其次,zone.js源地址证书已过期。

先说一下证书过期的问题,

npm ERR! code CERT_HAS_EXPIRED

出现这样的错误提示一般可能是由于 npm 使用的 SSL 证书过期导致的。这意味着在您的本地环境中,npm 使用的 SSL 证书已经过期,导致无法建立安全连接。可以尝试更新 npm 的证书或者检查您的本地环境中的证书配置是否正确。

更新证书的方法:

检查 npm 版本:首先确保您正在使用比较新版本的 npm。

您可以运行以下命令来检查 npm 版本:        

npm -v

如果 npm 版本较老,可以通过以下命令来更新 npm:

npm install -g npm

或者,直接更新根证书:在某些情况下,npm 使用的根证书可能需要更新。

sudo apt update

sudo apt install --only-upgrade ca-certificates

清除 npm 缓存:有时清除 npm 缓存也可以解决证书问题。您可以运行以下命令清除 npm 缓存:

npm cache clean --force

最后,尝试重新运行您的 npm 命令,看看是否问题已经解决。

然后再说一下node更新的问题。

本地node升级之后,并没有解决问题,docker使用的还是之前的版本,注意,docker使用的node版本与本地无关!

因此问题也就很明显了,是

FROM angular:13.2.5 AS build

这一句带来的问题,这个镜像是很久之前做的,当时就是用得之前的node的版本,所以重新打包一个angular的镜像就好了。

当然也可以重新写一下Dockerfile:

FROM node:18.17.1 AS build
RUN npm install -g npm@10.5.0
RUN npm install -g @angular/cli@13.2.5
WORKDIR /my-app
COPY package.json package-lock.json .
RUN npm install
COPY . .
RUN ng build

 这样就可以了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1511104.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python环境安装及Selenium引入

Python环境安装 环境下载 Download Python | Python.org 环境安装 需使用管理员身份运行 查看环境是否安装成功 python --version 如果未成功则检查环境变量配置 安装 Selenium 库 pip install selenium Selenium 可以模拟用户在浏览器中的操作&#xff0c;如点击按钮、填写…

Vue3全家桶 - VueRouter - 【2】重定向路由

重定向路由 在路由规则数组中&#xff0c;可采用 redirect 来重定向到另一个地址&#xff1a; 通常是将 / 重定向到 某个页面&#xff1b; 示例展示&#xff1a; router/index.js&#xff1a;import { createRouter, createWebHashHistory, createWebHistory } from vue-route…

51单片机基础篇系列-中断系统处理过程中断编程

&#x1f308;个人主页:会编辑的果子君 &#x1f4ab;个人格言:“成为自己未来的主人~” 80C51单片机中断处理过程 中断相应过程&#xff1a; 中断源有中断请求 此中断源的中断允许位为1 CPU开中断&#xff08;即EA-1&#xff09;.以上三条同时满足&#xff0c;CPU才有…

okcc呼叫中心外呼任务为何启动后会自动暂停?

OKCC呼叫中心系统是一套完整的呼叫中心与管理平台,为电话营销型企业专门设计的电销平台与客服平台。OKCC系统集电话营销功能与热线客服功能于一体,兼具呼入呼出功能。本呼叫中心支持独立的计费系统、话务系统、客户系统、工单管理系统,是一套完善的高效的呼叫中心系统 那我们在…

基于EasyCVR视频技术的流媒体视频融合与汇聚管理系统建设方案

流媒体视频融合与汇聚管理系统可以实现对各类模块化服务进行统一管理和配置等操作&#xff0c;可实现对应用服务的整合、管理及共享&#xff0c;以标准接口的方式&#xff0c;业务平台及其他第三方业务平台可以方便地调用各类数据&#xff0c;具有开放性和可扩展性。在流媒体视…

如何不依赖Unity直接解压unitypackage的内容

使用场景 我们都知道unity的资源导出是导出成.unitypackage文件,如果要里面的内容,得打开Unity,将unitypackage导入进去才能看到里面的内容。 但是很多时候我们下了几十个unitypackage资源包,又不清楚好不好用,而且导入之后编译特别慢,unity又不提供批量解压的功能,所…

Leangoo领歌免费敏捷工具项目“版本发布”功能上线

Leangoo领歌是款永久免费的专业的敏捷开发管理工具&#xff0c;提供端到端敏捷研发管理解决方案&#xff0c;涵盖敏捷需求管理、任务协同、进展跟踪、统计度量等。 Leangoo领歌上手快、实施成本低&#xff0c;可帮助企业快速落地敏捷&#xff0c;提质增效、缩短周期、加速创新。…

String 底层为什么使用 final 修饰?

1、典型回答 对于这个问题&#xff0c;Java之父詹姆斯 高斯林&#xff08;James Gosling&#xff09; 是这样回答的&#xff1a; I would use an immutable whenever I can 翻译为中文&#xff1a;只要允许&#xff0c;我就会使用不可变对象 而作为普通人的我们来说&#xff0…

【历年论文真题考点汇总】与【历年论文原题2009~2023年文字版记录】(2024年软考高级系统架构设计师冲刺知识点总结-论文篇-先导篇)

历年真题论文题考点汇总 历年软考系统架构设计师论文原题(2009-2022年) 因最新的2023年目前仅能搜索到回忆版,等楼主搜集到真题会更新最新版到本文中。 注意系统架构设计师一年只下半年开考,项目管理师一年两次开考。 2022年下半年-论文原题 试题1:论基于构件的软件开发…

智海Mo 平台与 Datawhale 携手浙江大学,共襄 AI+X 高校行!

2024年3月9日&#xff0c;一场以"AIX 高校行"为主题的活动在浙江大学成功举办。本次活动由 Datawhale 与杭州市人工智能学会主办&#xff0c;浙江大学人工智能研究所、浙江大学控制科学与工程学院联合主办&#xff0c;浙江大学学生人工智能协会承办&#xff0c;趋动云…

基础小白快速入门web前端开发技术------->hbuilder的下载安装以及简易的网页最开始制作

工欲善其事&#xff0c;必先利其器&#xff0c; 在我们学习开发网页设计&#xff0c;我们首先需要一个良好的开发工具 这里我比较推荐hbuilder这个 只需要进入官网傻瓜下载&#xff0c;傻瓜安装 https://dcloud.io/ 点击hbuilder选择版本进行下载安装即可 hbuilder的新建文件…

【VUE合并同一列相另的行的数据合并为一行:span-method】亲测有用

【VUE合并同一列相另的行的数据合并为一行&#xff1a;span-method】亲测有用 第一步&#xff1a; 给table加对应的标签的属性 :data"list" :span-method"arraySpanMethod"第二步&#xff1a; 在methods中添加对应的处理的方法 arraySpanMethod({ row, …

MQTT+ONENET+STM32+LWIP驱动

前言 近段时间由于项目需求&#xff0c;需要将原来的项目增加应用层的MQTT协议&#xff0c;由于不懂MQTT所以从B站学习了正点原子的lwip课程&#xff0c;看完后需要进行实践&#xff0c;所以选择了ONENET平台来作为学习的时间的平台。 1、学习准备 先下载工具&#xff1a; …

鸿蒙原生应用元服务开发-WebGL网页图形库开发接口说明

一、场景介绍 WebGL主要帮助开发者在前端开发中完成图形图像的相关处理&#xff0c;比如绘制彩色图形等。目前该功能仅支持使用兼容JS的类Web开发范式开发。 二、接口说明 表1 WebGL主要接口列表 本文参考引用HarmonyOS官方开发文档&#xff0c;基于API9。

Vue-Router学习笔记

文章目录 一、Vue Router简介二、简单使用三、动态路由匹配3.1 响应路由参数的变化3.2 捕获所有路由或 404 Not found 路由 四、路由的匹配语法4.1 在参数中自定义正则4.2 可重复的参数4.3 Sensitive 与 strict 路由配置4.4 可选参数 五、嵌套路由嵌套的命名路由 六、编程式导航…

利用百度竞价排名推广增加转化率-华媒舍

在数字营销领域&#xff0c;提高网站转化率是一个重要的目标。百度竞价排名是一种有效的推广方式&#xff0c;通过提高网站在搜索结果中的排名&#xff0c;能够吸引更多的用户点击&#xff0c;并且增加转化率。本文将介绍如何利用百度竞价排名来推广&#xff0c;并且提供一些最…

外盘国际期货分仓系统VUE源码展示

国际期货市场已经成为投资者追求高收益的重要战场。然而&#xff0c;面对复杂多变的市场环境&#xff0c;如何高效、安全地进行期货交易&#xff0c;成为了投资者们共同面临的挑战。今天&#xff0c;我们荣幸地向您推荐一款引领期货交易新风尚的利器——外盘国际期货分仓系统VU…

Leetcode刷题【每日n题】(7)

题目一 思路分析 中序遍历&#xff1a;先遍历左子树&#xff0c;再输出根节点&#xff0c;再遍历右子树 1.若当前节点的左子节点不为空&#xff0c;则递归遍历2.输出当前节点&#xff08;根节点&#xff09;3.若当前节点的左子节点不为空&#xff0c;则递归遍历 代码解析 cl…

知识文档管理系统平台:企业管理的王炸

无论是企业内部的文件共享&#xff0c;还是团队之间的协作编辑&#xff0c;知识文档管理系统都能发挥巨大的作用。它帮助企业整理、存储和查找各种文档资料&#xff0c;这不仅能提高企业的工作效率&#xff0c;还能增强企业的竞争力。今天就跟着LookLook同学一起来深入了解知识…

SDWAN专线对企业接入有门槛吗

SD-WAN&#xff08;软件定义广域网&#xff09;技术作为一种新型的网络解决方案&#xff0c;正在成为企业网络接入的热门选择。然而&#xff0c;对于企业来说&#xff0c;接入SD-WAN专线是否存在门槛&#xff0c;是一个值得探讨的问题。本文将从不同角度分析SD-WAN专线对企业接…