【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.mzph.cn/news/890181.shtml

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

相关文章

【mysql】1205 -Lock wait timeout exceeded; try restarting transaction

问题: mysql8执行SQL提示下面错误: 1205 -Lock wait timeout exceeded; try restarting transaction 1205-超过锁定等待超时;尝试重新启动事务 可能的原因: 事务冲突:多个事务同时尝试修改同一行数据,导…

android 登录界面编写

1、登录页面实现内容 1.实现使用两个EditText输入框输入用户名和密码。 2.使用CheckBox控件记住密码功能。 3.登录时候,验证用户名和密码是否为空。 4.当前CheckBox控件记住密码勾上时,使用SharedPreferences存储用户名和密码。 5.登录时候使用Prog…

将4G太阳能无线监控的视频接入电子监控大屏,要考虑哪些方面?

随着科技的飞速发展,4G太阳能无线监控系统以其独特的优势在远程监控领域脱颖而出。这种系统结合了太阳能供电的环保特性和4G无线传输的便捷性,为各种环境尤其是无电或电网不稳定的地区提供了一种高效、可靠的视频监控解决方案。将这些视频流接入大屏显示…

Linux C 程序 【05】异步写文件

1.开发背景 Linux 系统提供了各种外设的控制方式,其中包括文件的读写,存储文件的介质可以是 SSD 固态硬盘或者是 EMMC 等。 其中常用的写文件方式是同步写操作,但是如果是写大文件会对 CPU 造成比较大的负荷,采用异步写的方式比较…

重拾设计模式--原型模式

文章目录 原型模式定义原型模式UML图优点缺点使用场景C 代码示例深拷贝、浅拷贝 原型模式定义 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象; 核心中的核心就是 克隆clone ,后面讲 原型模式是一种创建型设计模式,它的主要…

flutter --no-color pub get 超时解决方法

新建Flutter项目后,运行报错,需要执行pub get 点击Run ‘flutter pub get’ … … … 卡着,不动了,提示超时 是因为墙的问题 解决方案: 添加以下环境变量 变量名: PUB_HOSTED_URL 变量值: https://pub.flutter-io.cn …

【C++】优先级队列以及仿函数

本篇我们来介绍一下优先级队列 priority_queue 。优先级队列的底层是数据结构中的堆,在C中它是一个容器适配器,这个容器适配器比之前的栈和队列更复杂。 1.priority_queue的介绍 1.1 优先级队列的底层 因为优先级队列就是堆,堆的底层是数组…

不需要服务器,使用netlify快速部署自己的网站

Netlify简介 1.1 Netlify的功能与特点 Netlify 是一个功能强大的静态网站托管平台,它不仅提供了简单的网站部署功能,还集成了许多现代化的开发工具和服务,帮助开发者更高效地构建、部署和管理网站。Netlify 的核心功能包括: 自动…

简单工厂模式和策略模式的异同

文章目录 简单工厂模式和策略模式的异同相同点:不同点:目的:结构: C 代码示例简单工厂模式示例(以创建图形对象为例)策略模式示例(以计算价格折扣策略为例)UML区别 简单工厂模式和策…

Unity动态读取外部图片转Texture2D,内存过大问题解决方案

问题描述 加载原始图片2.63M的图片,分辨率为3023*4032,占用内存108.5M 加载原始图片12.6 M的图片,分辨率为6000*8000,占用内存427.2M 太恐怖了吧 解决方案 1.加载完图片,等比缩放,宽高改为1024或者512以下 1024占用5.2M,512占用1.3M,相比小了很多 2.原始Texture2…

linux-----进程及基本操作

进程的基本概念 定义:在Linux系统中,进程是正在执行的一个程序实例,它是资源分配和调度的基本单位。每个进程都有自己独立的地址空间、数据段、代码段、栈以及一组系统资源(如文件描述符、内存等)。进程的组成部分&am…

ArkTs组件的学习

一. AlphabetIndexer 可以与容器组件联动用于按逻辑结构快速定位容器显示区域的组件 参数名类型必填说明arrayValueArray<string>是字母索引字符串数组&#xff0c;不可设置为空selectednumber是初始选中项索引值若超出索引值范围则取默认值0 class Lxr{tImg:Resource…

51c自动驾驶~合集42

我自己的原文哦~ https://blog.51cto.com/whaosoft/12888355 #DriveMM 六大数据集全部SOTA&#xff01;最新DriveMM&#xff1a;自动驾驶一体化多模态大模型&#xff08;美团&中山大学&#xff09; 近年来&#xff0c;视觉-语言数据和模型在自动驾驶领域引起了广泛关注…

Linux限制root 用户的远程登录(安全要求)

前言&#xff1a;现在基本用户主机都不允许使用root来操作&#xff0c;所以本文通过创建新用户&#xff0c;并限制root用户的ssh来解决这个问题 1. 创建新账户 aingo 首先&#xff0c;使用 root 账户登录系统。 sudo useradd aingo设置 aingo 账户密码&#xff1a; sudo pa…

前端学习笔记-Vue篇-04

4 Vue中的ajax 4.1 解决开发环境Ajax跨域问题 vue脚手架配置代理 配置参考 | Vue CLI方法一&#xff1a;在vue.config.js中添加如下配置: module.exports {devServer: {proxy: http://localhost:4000} } 说明: 1.优点:配置简单&#xff0c;请求资源时直接发给前端(8080)即…

【优选算法篇】位运算小课堂:从入门到精通的奇妙之旅(上篇)

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

【Linux】重启系统后开不开机(内核模块丢失问题)

问题 重启后开不开机报错如下&#xff1a; FAILED failed to start load kernel moduiles 可以看到提示module dm_mod not found 缺少了dm_mod 在内核module目录中 reboot重启可以看到这个现象&#xff1a; 可以看到重启启动磁盘&#xff0c;加载不到root 原因 dm_mod模块…

【现代服务端架构】传统服务器 对比 Serverless

在现代开发中&#xff0c;选择合适的架构是至关重要的。两种非常常见的架构模式分别是 传统服务器架构 和 Serverless。它们各有优缺点&#xff0c;适合不同的应用场景。今天&#xff0c;我就带大家一起对比这两种架构&#xff0c;看看它们的差异&#xff0c;并且帮助你选择最适…

搭建Tomcat(四)---Servlet容器

目录 引入 Servlet容器 一、优化MyTomcat ①先将MyTomcat的main函数搬过来&#xff1a; ②将getClass()函数搬过来 ③创建容器 ④连接ServletConfigMapping和MyTomcat 连接&#xff1a; ⑤完整的ServletConfigMapping和MyTomcat方法&#xff1a; a.ServletConfigMappin…

WPF DataTemplate 数据模板

DataTemplate 顾名思义&#xff0c;数据模板&#xff0c;在 wpf 中使用非常频繁。 它一般用在带有 DataTemplate 依赖属性的控件中&#xff0c;如 ContentControl、集合控件 ListBox、ItemsControl 、TabControls 等。 1. 非集合控件中使用 <UserControl.Resources>&l…