【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…

LDP+LBP代码解析及应用场景分析

代码整体结构与功能概述 这段 C 代码主要实现了两个图像特征提取算法,分别是局部方向模式(Local Directional Pattern,LDP)和多分块局部二值模式(Multi-Block Local Binary Pattern,Multi-Block LBP&#…

Nuxt样式文件导入

1.在Nuxt导入样式文件的方式 在nuxt中,支持两种样式文件导入的配置。如下: 通过配置文件的css属性指定文件路径。该属性可以支持一个字符串数组,每一项为一个样式文件路径。例如: export default defineNuxtConfig({compatibili…

单元测试使用记录

什么是单元测试 简单来说就是对一个类中的方法进行测试,对输出的结果检查判断是否符合预期结果 但是在多年的工作中,从来没有哪个项目中真正系统的用到了单元测试,因此对它还是很陌生的,也就造成更加不会在项目中区使用它。 如何…

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

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

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

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

曲线的测地曲率

测地曲率 设 S : r ( u , v ) S:r(u,v) S:r(u,v)是曲面, γ ( s ) r ( u ( s ) , v ( s ) ) \gamma(s)r(u(s),v(s)) γ(s)r(u(s),v(s))是 S S S上的一条弧长参数化曲线。 1.称 K g ( s ) D γ ˙ d s ( γ ( s ) ) T \mathbb{K}_g(s)\frac{D\dot{\gamma}}{d\b…

js常用方法之: 预览大图(uniapp原生方法封装)

方法: //预览图片 pic可传单个图片地址字符串 或 图片数组(带index) previewPic: function(pic, index) {if (!pic) return;if (index undefined) {let array [];array.push(pic);uni.previewImage({urls: array,current: array[0]});} else {uni.previewImage({urls: pic,…

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

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

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

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

如何详细步骤地进行Z-Blog博客系统的安装过程?

安装Z-Blog博客系统的步骤如下: 下载Z-Blog软件包:根据你的操作系统,选择相应的Z-Blog软件包进行下载。在Z-Blog官方网站上,你可以找到最新版本的Z-Blog软件包。 解压软件包:将下载的Z-Blog软件包解压到你的服务器或本…

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

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

CompletableFuture小记

文章目录 概述Thread 和 RunnableThreadRunnableThread 和 Runnable 的关系小问题 Callable、Future 和 FutureTaskCallableFutureTaskFuture接口Callable 和 FutureTask 的关系Thread 、Runnable、FutureTask 和 Callable 的关系 CompletableFuture常用方法概述get() 和 join(…

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

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

sudo apt-get update 报错及解决

sudo apt-get update报错及解决工作笔记 一、问题现象 在执行 sudo apt-get update 命令时,终端出现一系列报错信息: 从 http://archive.ubuntu.com/ubuntu 相关多个仓库(如 xenial InRelease、xenial-security InRelease、xenial-updates…

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

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

leetcode 3285 找到稳定山的下标

3285. 找到稳定山的下标 已解答 简单 相关标签 相关企业 有 n 座山排成一列,每座山都有一个高度。给你一个整数数组 height ,其中 height[i] 表示第 i 座山的高度,再给你一个整数 threshold 。 对于下标不为 0 的一座山,如果…

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…