【docker】如何打包前端并运行

前端使用 Vue 3 + Vite

1.use npm run preview 运行

0.项目根目录下新建.env文件

VITE_BASE_API_prod=http://127.0.0.1:5000/api # 线上环境
VITE_MOCK_API_prod=api                       # 本地模拟数据                       
VITE_BASE_API_dev=http://127.0.0.1:5000/api  # 开发环境
VITE_MOCK_API_dev=api                        # 本地模拟数据

1. 确保安装依赖

在项目的根目录下,确保你已经安装了所有的依赖包。运行以下命令来安装:

node -v

v20.18.0

npm install

2. 运行开发服务器

运行以下命令启动开发服务器:

npm run dev

这将执行 package.json 文件中定义的 dev 脚本。通常情况下,这会启动一个本地的开发服务器(如 Webpack Dev Server、Vite、Next.js 等),并监听你项目中的源代码文件。一旦你做出修改,开发服务器通常会自动重新加载页面。

3. 访问开发环境

开发服务器通常会启动在本地某个端口上(常见的是 localhost:5173 ),你可以在浏览器中输入相应地址访问你的应用。

  • 如果开发服务器运行在 localhost:5173,那么你可以在浏览器地址栏输入:
    http://localhost:5173
    

具体的端口号可以在命令行中看到,或者在 package.json 中查看 dev 脚本的配置。

4. 构建生产环境

npm run dev
npm run build
npm run preview

到此为止,就会在当前目录下阐述静态资源dist文件夹。

2.docker 运行

将前端资源编译打包并交付给平台基建组,主要涉及以下步骤:


1. 编译和打包前端资源

  1. 构建项目
    使用 npm run build 命令生成静态资源:

    npm run build
    

    这会在项目根目录下生成一个 dist 文件夹,包含所有的静态文件。

  2. 检查打包结果
    确保 dist 文件夹中的内容是完整的,包括 index.html 和相关的 CSS、JS 文件。


2. 配置 Nginx

2.1 创建 Nginx 配置文件

为前端项目配置 Nginx。新建一个 Nginx 配置文件,例如 my-vue-app.conf,内容如下:

server {listen 80;server_name your.domain.com; # 替换为实际的域名或 IP 地址root /usr/share/nginx/html; # 指定静态资源的路径index index.html;location / {try_files $uri /index.html;}error_page 404 /index.html;# 可选:配置 gzip 压缩gzip on;gzip_types text/plain application/javascript text/css application/json;
}
2.2 确保目录一致

在配置文件中,root 指定的路径是 Nginx 用来加载前端资源的目录。比如 /usr/share/nginx/html


3. 将前端资源放入 Nginx 镜像

  1. 创建 Dockerfile
    在项目目录下新建一个 Dockerfile 文件:

    FROM nginx:latest# 删除默认的 Nginx HTML 文件
    RUN rm -rf /usr/share/nginx/html/*# 将本地的前端打包文件复制到 Nginx 镜像中
    COPY dist /usr/share/nginx/html# 复制自定义 Nginx 配置文件
    COPY AMP_SEMiner_portal_frontend.conf /etc/nginx/conf.d/default.conf
    
  2. 构建镜像
    使用 Docker 构建 Nginx 镜像:

    docker build -t amp_seminer_portal_frontend-nginx .
    
  3. 验证镜像
    运行生成的 Docker 镜像以验证配置是否正确:

    docker run -p 8080:80 amp_seminer_portal_frontend-nginx
    

    在浏览器中访问 http://localhost:8080,检查是否能够正确加载前端页面。


4. 将镜像交付给平台基建组

  1. 标记镜像
    给镜像打标签,指向公司或团队的 Docker Registry:

    docker tag amp_seminer_portal_frontend-nginx jackkuo666/amp_seminer_portal_frontend-nginx:v1
    
  2. 推送镜像
    将镜像推送到指定的 Docker Registry:

    docker push jackkuo666/amp_seminer_portal_frontend-nginx:v1
    
  3. 通知基建组
    向平台基建组提供以下信息:

  • 镜像名称和版本(例如:jackkuo666/amp_seminer_portal_frontend-nginx:v1)。
  • 配置中使用的端口(默认 80)。
  • 依赖的环境变量或运行时配置(如果有)。

5. 平台基建组的操作建议

基建组拉取镜像后,可以使用以下命令部署镜像:

docker pull jackkuo666/amp_seminer_portal_frontend-nginx:v1
docker run -d -p 80:80 --name amp_seminer_portal_frontend-nginx jackkuo666/amp_seminer_portal_frontend-nginx:v1

如果在 Kubernetes 环境下运行,建议基建组编写一个 Deployment 和 Service 配置文件,以便进行集群内的部署。


6. 总结

  • 前端开发者:负责编译、配置 Nginx、构建 Docker 镜像并推送到 Registry。
  • 基建组:拉取镜像并部署到目标环境。

通过这种方式,前端项目可以高效地交付和运行在生产环境中。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

电气设计 | 低压接地系统:TN-C 、TN-S、TN-C-S、TT适用哪些场所?

电气设计 | 低压接地系统:TN-C 、TN-S、TN-C-S、TT适用哪些场所? 1、低压配电系统简介2、各种低压配电系统介绍2.1、TN-C系统2.2、TN-S系统2.3、TN-C-S 系统2.4、TT 系统2.5、IT 系统 1、低压配电系统简介 低压配电系统有TN-C、TN-S、TN-C-S、TT和IT五种…

onlyoffice连接器 二次开发 合同等制式模板化技术开发方案【三】

一、期望效果 目前曹瑞版本onlyoffice已经实现:书签模式 和 控件模式,用以支持该方案。 【图1】字段绑定 【图2】模板发起 【图3】接入表单 思路讲解: 业务系统开发中通常希望能够通过绑定form字段给word,从而达到双向同步效果&am…

word实现两栏格式公式居中,编号右对齐

1、确定分栏的宽度 选定一段文字 点击分栏:如本文的宽度为22.08字符 2、将公式设置为 两端对齐,首行无缩进。 将光标放在 公式前面 点击 格式-->段落-->制表位 在“制表位位置”输入-->11.04字符(22.08/211.04字符)&…

37. Three.js案例-绘制部分球体

37. Three.js案例-绘制部分球体 实现效果 知识点 WebGLRenderer WebGLRenderer 是Three.js中的一个渲染器类,用于将3D场景渲染到网页上。 构造器 WebGLRenderer( parameters : Object ) 参数类型描述parametersObject渲染器的配置参数,可选。 常用…

笔记本电脑需要一直插着电源吗?电脑一直充电的利弊介绍

笔记本电脑属于常用电子设备,它的便携性和功能性给我们带来了很多便利。但是,我们在使用笔记本电脑的时候,是否应该一直插着电源呢?这个问题可能困扰了很多人,因为不同的使用方式可能会对笔记本电脑的性能和寿命产生不…

深入理解延迟队列:原理、实现与应用

深入理解延迟队列:原理、实现与应用 1. 什么是延迟队列 延迟队列(Delayed Queue)是一种特殊的队列,它的特点是队列中的元素需要在指定的时间后才能被消费者获取和处理。与普通的先进先出(FIFO)队列不同&a…

内容与资讯API优质清单

作为开发者,拥有一套API合集是必不可少的。这个开发者必备的API合集汇集了各种实用的API资源,为你的开发工作提供了强大的支持!无论你是在构建网站、开发应用还是进行数据分析,这个合集都能满足你的需求。你可以通过这些免费API获…

jQuery总结(思维导图+二维表+问题)

关于什么是jQuery:(下面是菜鸟里的介绍) jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 而jQuery对我的感受就是,链式运用的很形象,隐式迭代还有一些兼容性强的优点&…

python数据分析:介绍pandas库的数据类型Series和DataFrame

安装pandas pip install pandas -i https://mirrors.aliyun.com/pypi/simple/ 使用pandas 直接导入即可 import pandas as pd pandas的数据结构 pandas提供了两种主要的数据结构:Series 和 DataFrame,类似于python提供list列表,dict字典,…

安装opnet14.5遇到的问题

安装opnet遇到的问题 我是按照这个教程来安装的。 然后遇到了两个问题&#xff1a; 1、“mod_dirs”目录问题 Can’t enable ETS scripting support due to missing files。 This is likely because:<opnet_release_dir>\sys\lib is notinclude in the “mod_dirs” pre…

SLAAC如何工作?

SLAAC如何工作&#xff1f; IPv6无状态地址自动配置(SLAAC)-常见问题 - 苍然满关中 - 博客园 https://support.huawei.com/enterprise/zh/doc/EDOC1100323788?sectionj00shttps://www.zhihu.com/question/6691553243/answer/57023796400 主机在启动或接口UP后&#xff0c;发…

6.3.1 MR实战:计算总分与平均分

在本次实战中&#xff0c;我们的目标是利用Apache Hadoop的MapReduce框架来处理和分析学生成绩数据。具体来说&#xff0c;我们将计算一个包含五名学生五门科目成绩的数据集的总分和平均分。这个过程包括在云主机上准备数据&#xff0c;将成绩数据存储为文本文件&#xff0c;并…

空天地遥感数据识别与计算--数据分析如何助力农林牧渔、城市发展、地质灾害监测等行业革新

在科技飞速发展的时代&#xff0c;遥感数据的精准分析已经成为推动各行业智能决策的关键工具。从无人机监测农田到卫星数据支持气候研究&#xff0c;空天地遥感数据正以前所未有的方式为科研和商业带来深刻变革。然而&#xff0c;对于许多专业人士而言&#xff0c;如何高效地处…

基于langchain的Agent(实现实时查询天气)

心血来潮&#xff0c;玩一下Agent&#xff0c;实现了多轮对话功能 import requests, jsonfrom langchain.agents import load_tools from langchain.agents import initialize_agent from langchain_community.llms.tongyi import Tongyi from langchain.memory import Conver…

《剑网三》遇到找不到d3dx9_42.dll的问题要怎么解决?缺失d3dx9_42.dll是什么原因?

《剑网三》游戏运行中d3dx9_42.dll缺失问题深度解析与解决方案 在畅游《剑网三》的武侠世界时&#xff0c;不少玩家可能会遇到系统提示“找不到d3dx9_42.dll”的报错信息。这一突如其来的问题不仅让游戏进程受阻&#xff0c;还可能让玩家陷入困惑与无奈。我将为大家深入剖析这…

springboot443旅游管理系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统旅游管理系统信息管理难度大&#xff0c;容错率低&#…

OneCode:开启高效编程新时代——企业定制出码手册

一、概述 OneCode 的 DSM&#xff08;领域特定建模&#xff09;出码模块是一个强大的工具&#xff0c;它支持多种建模方式&#xff0c;并具有强大的模型转换与集成能力&#xff0c;能够提升开发效率和代码质量&#xff0c;同时方便团队协作与知识传承&#xff0c;还具备方便的仿…

OpenCV(python)从入门到精通——运算操作

加法减法操作 import cv2 as cv import numpy as npx np.uint8([250]) y np.uint8([10])x_1 np.uint8([10]) y_1 np.uint8([20])# 加法,相加最大只能为255 print(cv.add(x,y))# 减法&#xff0c;相互减最小值只能为0 print(cv.subtract(x_1,y_1))图像加法 import cv2 as…

git 删除鉴权缓存及账号信息

在Windows系统下 清除凭证管理器中的Git凭据 按下Win R键&#xff0c;打开“运行”对话框&#xff0c;输入control&#xff0c;然后回车&#xff0c;打开控制面板。在控制面板中找到“用户账户”&#xff0c;然后点击“凭据管理器”。在凭据管理器中&#xff0c;找到“Windows…

【Linux进程】进程间的通信

目录 1. 进程间通信 1.1 进程间通信的目的 2. 管道 2.1 什么是管道 2.2. 匿名管道 匿名管道的特性 管道的4种情况 联系shell中的管道 2.3. 命名管道 代码级建立命名管道 2.4. 小结 总结 1. 进程间通信 进程间通信&#xff08;Inter-Process Communication&#xff0c;IPC&…