当前位置: 首页 > news >正文

前端项目打包部署

打包和部署前端项目是将开发环境中的代码转化为生产环境可直接运行的静态文件,并将其部署到服务器上的过程。

# 项目打包
pnpm run build# 上传文件至远程服务器
将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。# nginx.cofig 配置
server {listen     80;server_name  localhost;location / {root /usr/share/nginx/html;index index.html index.htm;}# 反向代理配置location /prod-api/ {# api.youlai.tech 替换后端API地址,注意保留后面的斜杠 /proxy_pass http://api.youlai.tech/; }
}

1. 前端项目打包

以 Vue 项目为例,一般来说,打包是把项目中的源代码转换成压缩过的、可以直接在浏览器中运行的 HTML、CSS、JS 等文件。

pnpm run build

1.1 命令解释

  • 编译代码: 将 Vue 文件(.vue),JS(.js),CSS(.css)等代码通过打包工具(例如 Vite、Webpack)编译成普通的 HTML、CSS 和 JavaScript 文件。
  • 压缩优化: 通过工具压缩文件体积,比如移除空格、注释,合并代码块等,减少网络传输量。
  • 输出到 dist 目录: 编译完成的文件会放在 dist 目录中,这个目录包含了项目的所有静态文件,直接可以被服务器用于部署。

1.2 打包文件内容

  • index.html: 前端页面的入口文件。
  • assets/: 静态资源文件(CSS、图片、字体等)。
  • js/: 编译后的 JavaScript 文件。

2. 上传打包文件到服务器

打包完成后,需要将 dist 目录中的所有文件上传到远程服务器。常用的工具和方法包括:

(1)SCP (安全拷贝协议)

(2)SFTP: 可以使用 WinSCP、FileZilla 等工具,手动上传文件至服务器。

(3)CI/CD 管道: 如果项目配置了 CI/CD,可以自动化部署流程。

由于这部操作实现并不复杂,我就直接将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。

3. Nginx 配置

当文件上传到服务器后,需要通过 Nginx 进行部署和服务。Nginx 是一个常用的 Web 服务器,用于处理 HTTP 请求并提供静态文件服务。

3.1 基本的 Nginx 配置

server {listen     80;  # 监听 80 端口,通常是 HTTP 默认端口server_name  localhost;  # 服务器的域名或 IP 地址location / {root /usr/share/nginx/html;  # 指定静态文件根目录index index.html index.htm;  # 默认打开的首页文件}
}
  • listen 80: 监听服务器的 80 端口,通常是 HTTP 的默认端口号。
  • server_name: 定义了服务器的名称或 IP 地址,当用户访问该地址时会触发此服务器配置。
  • location /: 配置根路径的请求时如何处理,root /usr/share/nginx/html 指定了静态资源文件的路径,Nginx 会从这个路径返回 index.html 页面。

3.2 反向代理配置(解决跨域问题)

前端和后端通常是分离部署的,也就是说,前端页面可能通过 AJAX 请求后端接口。如果前端页面和后端 API 处于不同的域名或端口时,浏览器会产生 跨域请求 问题。

为了解决跨域问题,可以通过 Nginx 设置反向代理。

server {listen     80;server_name  localhost;location / {root /usr/share/nginx/html;index index.html index.htm;}# 反向代理配置location /prod-api/ {# 将前端 `/prod-api/` 请求代理到后端 API 地址proxy_pass http://api.youlai.tech/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}
  • proxy_pass http://api.youlai.tech/: 将所有以 /prod-api/ 开头的请求代理到指定的后端 API 地址。在前端代码中,发起 AJAX 请求时只需调用 /prod-api/,Nginx 会把请求转发给后端服务地址 http://api.youlai.tech/

  • proxy_set_header: 这部分配置设置了 Nginx 如何处理 HTTP 请求头。通常这是为确保客户端的请求 IP 和协议可以正确地传递给后端服务器。

4. 打开页面

在完成上述操作之后,打开浏览器并访问服务器 IP 或域名,例如:

http://<your-server-ip>/

就可以看到前端页面了。

如果设置了反向代理,在前端调用 /prod-api/ 路径的 API 时,Nginx 会将请求转发给指定的后端服务器。

5. 总结

  1. 项目打包: 使用 pnpm run build 将项目转换为可供生产环境使用的静态文件,输出到 dist 目录。
  2. 上传文件:将本地打包生成的 dist 目录下的文件拷贝到服务器的 /usr/share/nginx/html 目录。
  3. Nginx 配置: 配置 Nginx,设置静态文件路径以及反向代理,解决跨域问题。
  4. 访问项目: 通过服务器 IP 或域名访问项目。

相关文章:

前端项目打包部署

打包和部署前端项目是将开发环境中的代码转化为生产环境可直接运行的静态文件&#xff0c;并将其部署到服务器上的过程。 # 项目打包 pnpm run build# 上传文件至远程服务器 将本地打包生成的 dist 目录下的所有文件拷贝至服务器的 /usr/share/nginx/html 目录。# nginx.cofig…...

Linux驱动开发(12):中断子系统–按键中断实验

本章我们以按键为例讲解在驱动程序中如何使用中断&#xff0c; 在学习本章之前建议先回顾一下关于中断相关的裸机部分相关章节&#xff0c; 这里主要介绍在驱动中如何使用中断&#xff0c;对于中断的概念及GIC中断控制器相关内容不再进行讲解。 本章配套源码和设备树插件位于“…...

C语言(函数指针与指针函数)

函数指针 定义&#xff1a;函数指针本质上是指针&#xff0c;它是函数的指针&#xff08;定义了一个指针变量&#xff0c;变量中存储了函数的地 址&#xff09;。函数都有一个入口地址&#xff0c;所谓指向函数的指针&#xff0c;就是指向函数的入口地址。这里函数名就代 表入…...

中国计算机学会计算机视觉专委会携手合合信息举办企业交流活动,为AI安全治理打开“新思路”

近期&#xff0c;《咬文嚼字》杂志发布了2024年度十大流行语&#xff0c;“智能向善”位列其中&#xff0c;过去一年时间里&#xff0c;深度伪造、AI诈骗等话题屡次登上热搜&#xff0c;AI技术“野蛮生长”引发公众担忧。今年9月&#xff0c;全国网络安全标准化技术委员会发布了…...

MacOs 日常故障排除troubleshooting

1. 关闭开机自启动 app X macOs 15.1 System settings -> General -> Login Items & Extensions->Open at Login -> Select app X and click -...

ArcGIS字符串补零与去零

我们有时候需要 对属性表中字符串的补零与去零操作 我们下面直接视频教学 下面看视频教学 ArcGIS字符串去零与补零 推荐学习 ArcGIS全系列实战视频教程——9个单一课程组合 ArcGIS10.X入门实战视频教程&#xff08;GIS思维&#xff09; ArcGIS之模型构建器&#xff08;Mod…...

【FLASH、SRAM和DRAM、CISC和RISC、冯诺依曼和哈佛】单片机内存结构的了解

【FLASH、SRAM和DRAM、CISC和RISC、冯诺依曼和哈佛】单片机内存结构的了解 一、单片机概念 单片机&#xff1a;Single-Chip Microcomputer&#xff0c;单片微型计算机&#xff0c;是一种集成电路芯片 1.1RAM里的SRAM和DRAM SRAM&#xff08;Static Random Access Memory&…...

ionic capacitor JSValueEncodingContainer报错

try to clean the build folder. exit Xcode. upgrade your capacitor core libraries update cocoapods to 1.13.0 do “pod install --repo-udpdate” after that: ionic build --prodnpx cap updatenpx cap syncnpx cap open ios capacitor ios最低版本要求13 [Bug]:…...

pdf merge

在 Ubuntu 22.04 上&#xff0c;你可以使用以下命令行工具来合并多个 PDF 文件&#xff1a; 1. pdftk pdftk 是一个强大的 PDF 工具&#xff0c;支持合并、拆分和其他操作。安装和使用方法如下&#xff1a; sudo apt install pdftk pdftk file1.pdf file2.pdf cat output me…...

【Trouble Shooting】Oracle ADG hung,出现ORA-04021

异常问题&#xff1a; 突然收到告警&#xff0c;ADG实例状态异常。 环境&#xff1a; 版本&#xff1a;Oracle 11.2.0.4.201020 状态&#xff1a;Active Dataguard 问题&#xff1a; 查看Oracle实例alert日志&#xff0c;发现有异常报错&#xff1a; Thu Dec 12 22:15:23 …...

奇怪的知识又增加了:ESP32下的Lisp编程=>ULisp--Lisp for microcontrollers

ESP32下有MicroPython&#xff0c;那么我就在想&#xff0c;有Lisp语言支持吗&#xff1f;答案是果然有&#xff01;有ULisp&#xff0c;专门为MCU设计的Lisp&#xff01; 网址&#xff1a;uLisp - Lisp for microcontrollers 介绍&#xff1a;用于微控制器的 Lisp 适用于 Ar…...

什么是CRM系统?CRM系统的功能、操作流程、生命周期

CRM系统作为企业管理和维护客户关系的重要工具&#xff0c;在商业活动中扮演着越来越重要的角色。今天&#xff0c;就让我们一起揭开它的神秘面纱&#xff0c;看看这个“幕后英雄”到底是怎么工作的。 什么是CRM系统&#xff1f; 首先&#xff0c;我们要了解什么是CRM。简单来…...

[每日一练]转换日期格式

#该题目来源于力扣&#xff1a; 1853. 转换日期格式 - 力扣&#xff08;LeetCode&#xff09; 题目要求&#xff1a; 表: Days------------------- | Column Name | Type | ------------------- | day | date | ------------------- day 是这个表的主键。给定一个Da…...

LSM Tree 底层设计理念

场景&#xff1a;设计一个海量读写的的kv数据库&#xff0c;优先保证写入速度&#xff0c;但是读取速度也不能很慢 因为海量数据存储&#xff0c;不能使用内存&#xff0c;得存到文件里。 Q&#xff1a;对已经落盘的文件&#xff0c;怎么根据key修改value A&#xff1a;读取文件…...

面向对象设计规则和各类设计模式

面向对象设计&#xff08;Object-Oriented Design, OOD&#xff09;是一种软件设计方法论&#xff0c;它使用对象、类、继承、封装、多态等概念来组织代码。面向对象设计的核心目标是提高软件的可维护性、可扩展性和复用性。在面向对象设计中&#xff0c;遵循一定的设计原则和模…...

Artec Leo3D扫描仪在重型机械设备定制中的应用【沪敖3D】

挑战&#xff1a;一家加拿大制造商需要有效的方法&#xff0c;为富于变化且难度较高的逆向工程&#xff0c;快速、安全、准确地完成重型机械几何采集。 解决方案&#xff1a;Artec Leo, Artec Studio, Geomagic for SOLIDWORKS 效果&#xff1a;Artec Leo三维扫描代替过去的手动…...

Linux下socket广播通讯的实现

概念大家都很清楚&#xff0c;不赘述。 广播必然用UDP这套东西。 setsockopt() 函数及其在广播中的应用&#xff1a; 在 C 网络编程中&#xff0c;setsockopt() 函数用于设置套接字选项&#xff0c;这些选项可以控制套接字的各种行为。对于广播通信&#xff0c;我们特别关心…...

Tiptap,: 富文本编辑器入门与案例分析

Tiptap 是一个现代的富文本编辑器&#xff0c;基于 ProseMirror 打造&#xff0c;旨在提供一个灵活且功能强大的文本编辑解决方案。它具有开箱即用的能力&#xff0c;同时也允许开发者根据业务需求进行高度定制化扩展。与传统的富文本编辑器相比&#xff0c;Tiptap 提供了更精细…...

数智读书笔记系列002 埃隆·马斯克传

书名&#xff1a;埃隆马斯克传 作者&#xff1a;【美】沃尔特艾萨克森 译者&#xff1a;孙思远&#xff1b;刘家琦 出版社&#xff1a;中信出版集团 出版时间&#xff1a;2023年9月 ISBN&#xff1a;9787521758399 这本书是关于特斯拉CEO埃隆马斯克的传记&#xff0c;作者…...

linux环境一句话后门

原文地址&#xff1a;linux环境一句话后门 – 无敌牛 欢迎参观我的个人博客&#xff1a;无敌牛 – 技术/著作/典籍/分享等 注意&#xff1a;本文章只做网络安全技术交流使用&#xff0c;切莫用来做坏事。 也可以叫一句话木马&#xff0c;一个意思。 设置监听 回连端口可以…...

django——admin后台管理1

一、admin后台管理 访问url进入&#xff1a; http://127.0.0.1:8000/admin ​ 创建超级管理用户 终端输入以下命令&#xff1a; python manage.py createsuperuser (py36_pingping) E:\django学习\day03-django入门\demo>python manage.py createsuperuser Username: mo…...

QT图形/视图架构详解(一)

场景、视图与图形项 图形/视图架构主要由 3 个部分组成&#xff0c;即场景、视图和图形项&#xff0c;三者的关系如图所示&#xff1a; 场景、视图和图形项的关系 场景&#xff08;QGraphicsScene 类&#xff09; 场景不是界面组件&#xff0c;它是不可见的。场景是一个抽象的…...

h5 区分ios和安卓

h5 区分ios和安卓 const systemInfo uni.getSystemInfoSync(); if (systemInfo.platform "ios" || systemInfo.platform "android") {}h5 区分微信小程序与app用条件编译条件编译 js #ifdef MP-WEIXIN #endif...

爬虫基础知识点

最近看了看爬虫相关知识点&#xff0c;做了记录&#xff0c;具体代码放到了仓库&#xff0c;本文仅学习使用&#xff0c;如有违规请联系博主删除。 这个流程图是我使用在线AI工具infography生成的&#xff0c;这个网站可以根据url或者文本等数据自动生成流程图&#xff0c;挺…...

golang 实现简单redis服务3(实现多类型数据结构支持)

redis各种数据类型的工作原理stringlisthashset(集合)zset(有序集合)(思考1):为什么redis使用跳跃表而不是红黑树?(思考2): 都可以范围取值,为什么mysql使用b树不用跳跃表,为什么redis使用跳跃表不用b树? 之前的redis只实现了基本数据string类型的操作,那能不能实现多种数据类…...

【硬件测试】基于FPGA的4ASK调制解调通信系统开发与硬件片内测试,包含信道模块,误码统计模块,可设置SNR

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.Verilog核心程序 4.开发板使用说明和如何移植不同的开发板 5.完整算法代码文件获得 1.算法仿真效果 本文是之前写的文章: 《基于FPGA的4ASK调制解调系统,包含testbench,高斯信道模块,误码率统计模块,可以设置不同SNR》 的…...

配置mysqld(读取选项内容,基本配置),数据目录(配置的必要性,目录下的内容,具体文件介绍,修改配置)

目录 配置mysqld 读取选项内容 介绍 启动脚本 基本配置 内容 端口号 数据目录的路径 配置的必要性 配置路径 mysql数据目录 具体文件 修改配置时 权限问题 配置mysqld 读取选项内容 介绍 会从[mysqld] / [server] 节点中读取选项内容 优先读取[server] 虽然服务…...

【roadMap】我转行软件测试的经历

软件测试这行咋样&#xff1f; 如果你简单了解过「软件测试工程师」这个岗位&#xff0c;就会知道它的基本特点&#xff1a; 待遇比开发低&#xff0c;比其他行业高入门丝滑&#xff0c;算是技术岗最简单的一类测试行业有细分领域&#xff1a;功能、性能、自动化… 每个行业…...

回归任务与分类任务应用及评价指标

能源系统中的回归任务与分类任务应用及评价指标 一、回归任务应用1.1 能源系统中的回归任务应用1.1.1 能源消耗预测1.1.2 负荷预测1.1.3 电池健康状态估计&#xff08;SOH预测&#xff09;1.1.4 太阳能发电量预测1.1.5 风能发电量预测 1.2 回归任务中的评价指标1.2.1 RMSE&…...

半导体制造全流程

半导体制造是一个极其复杂且精密的过程&#xff0c;主要涉及将硅片加工成功能强大的芯片。以下是半导体制造的全流程概述&#xff1a; 1. 硅材料制备 硅提纯&#xff1a; 使用冶金级硅&#xff0c;进一步提纯为高纯度硅&#xff08;电子级硅&#xff09;&#xff0c;纯度可达 …...

Mac m2电脑上安装单机Hadoop(伪集群)

1. 引言 本教程旨在介绍在Mac 电脑上安装Hadoop 2. 前提条件 2.1 安装JDK Mac电脑上安装Hadoop&#xff0c;必须首先安装JDK&#xff0c;并配置环境变量&#xff08;此处不做详细描述&#xff09; 2.2 配置ssh环境 关闭防火墙 在Mac下配置ssh环境&#xff0c;防止后面启…...

React 第十六节 useCallback 使用详解注意事项

useCallback 概述 1、useCallback 是在React 中多次渲染缓存函数的 Hook&#xff0c;返回一个函数的 memoized的值&#xff1b; 2、如果多次传入的依赖项不变&#xff0c;那么多次定义的时候&#xff0c;返回的值是相同的,防止频繁触发更新&#xff1b; 3、多应用在 父组件为函…...

悬赏任务源码(悬赏发布web+APP+小程序)开发附源码

悬赏任务源码是指一个软件或网站的源代码&#xff0c;用于实现悬赏任务的功能。悬赏任务是指发布方提供一定的奖励&#xff0c;希望能够找到解决特定问题或完成特定任务的人。悬赏任务源码通常包括任务发布、任务接受、任务完成和奖励发放等功能的实现。搭建悬赏任务源码是一个…...

Collection接口

目录 一. Collection基本介绍 二. Collection中的方法及其使用 1. 添加元素 (1) 添加单个元素 (2) 添加另一集合中的所有元素 2. 删除元素 (1) 删除单个元素 (2) 删除某个集合中包含在其他集合中的元素 (3) 保留两个集合中的交集部分, 删除其他元素. 3. 遍历元素 (1) …...

电机驱动模块L9110S详解

电机驱动模块是一种用于控制和驱动电机的设备&#xff0c;它能够将控制信号转化为适合电机操作的电流和电压。通过电机驱动模块&#xff0c;可以实现对电机的速度、方向等参数进行精确控制。 今天我们要介绍的 L9110S 电机驱动适合大学生、工程师、个人DIY、电子爱好者们学习和…...

路由之间是怎么跳转的?有哪些方式?

1. React 路由跳转方式&#xff08;React Router&#xff09; 在 React 中&#xff0c;路由跳转通常使用 React Router 来管理。React Router 提供了不同的跳转方式。 <Link> 组件跳转 使用 <Link> 组件来进行路由跳转&#xff0c;它会渲染为一个 HTML <a> …...

AudioSegment 将音频分割为指定长度时间片段 - python 实现

DataBall 助力快速掌握数据集的信息和使用方式&#xff0c;会员享有 百种数据集&#xff0c;持续增加中。 需要更多数据资源和技术解决方案&#xff0c;知识星球&#xff1a; “DataBall - X 数据球(free)” -------------------------------------------------------------…...

双目摄像头标定方法

打开matlab 找到这个标定 将双目左右目拍的图像上传&#xff08;左右目最好不少于20张&#xff09; 等待即可 此时已经完成标定&#xff0c;左下角为反投影误差&#xff0c;右边为外参可视化 把这些误差大的删除即可。 点击导出 此时回到主页面&#xff0c;即可看到成功导出 Ca…...

题解 - 莱布尼茨三角形

题目描述 世界上著名的莱布尼茨三角形如图所示&#xff0c;请编程输出图中排在第n行从左边数第m个位置上的数。 输入 共一行&#xff0c;有二个整数N 和M(N<15)&#xff0c;两数间用空格隔开。 输出 共一行&#xff0c;有二个整数&#xff0c;两数间用“/”隔开&#xff…...

低代码开发:企业数智化转型中的关键角色与实践案例分析

引言 随着信息技术的飞速发展&#xff0c;企业数智化转型已成为提升竞争力和实现可持续发展的必经之路。在这一过程中&#xff0c;低代码开发平台作为一种新兴的开发模式&#xff0c;正逐渐成为企业数智化转型的关键角色。本文将探讨低代码开发在企业数智化转型中的作用&#x…...

【ubuntu24.04】PDFMathTranslate 本地PDF翻译GPU部署

https://huggingface.co/spaces/reycn/PDFMathTranslate-Docker排不上号官方都是要安装包,感觉可以本地试着源码部署一下, http://localhost:7860/官方是这个端口,但是我本地启动是:5000IDEA 里本地 backend启动效果 GUI 是监听7860的...

基于Spring Boot + Vue的摄影师分享交流社区的设计与实现

博主介绍&#xff1a;java高级开发&#xff0c;从事互联网行业六年&#xff0c;熟悉各种主流语言&#xff0c;精通java、python、php、爬虫、web开发&#xff0c;已经做了多年的设计程序开发&#xff0c;开发过上千套设计程序&#xff0c;没有什么华丽的语言&#xff0c;只有实…...

高空坠物识别

目录 一、回答二、其他参考 prompt 有没有识别高空坠物的github项目一、回答 根据您的请求&#xff0c;以下是一些在GitHub上可以找到的关于识别高空坠物的项目&#xff1a; 1、overthecity 这是一个监控高空抛物的云端服务项目&#xff0c;它利用Edison的计算能力对高空抛物…...

22. 正则表达式

一、概述 正则表达式&#xff08;regular expression&#xff09;又称 规则表达式&#xff0c;是一种文本模式&#xff08;pattern&#xff09;。正则表达式使用一个字符串来描述、匹配具有相同规格的字符串&#xff0c;通常被用来检索、替换那些符合某个模式&#xff08;规则&…...

阿里云数据库MongoDB版助力极致游戏高效开发

客户简介 成立于2010年的厦门极致互动网络技术股份有限公司&#xff08;以下简称“公司”或“极致游戏”&#xff09;&#xff0c;是一家集网络游戏产品研发与运营为一体的重点软件企业&#xff0c;公司专注于面向全球用户的网络游戏研发与运营。在整个产业链中&#xff0c;公…...

leetcode230.二叉搜索树中第k小的元素

标签&#xff1a;二叉搜索树&#xff1b;中序遍历 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 小的元素&#xff08;从 1 开始计数&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,null,2], k 1…...

深入了解C++中const的用法

文章目录 一、C中的const如何理解&#xff1f;二、C中的const与C语言中的const有何区别&#xff1f;三、const与指针、引用的结合使用 一、C中的const如何理解&#xff1f; 在C中&#xff0c;const是一个关键字&#xff0c;用来表示常量性&#xff0c;意在告诉编译器某些变量或…...

adb连接逍遥安卓模拟器失败的问题解决方案

1、逍遥安卓模拟器进入系统应用&#xff0c;设置-关于平板电脑-版本号&#xff0c;连续点击3次以上&#xff0c;直到提示进入开发者模式&#xff0c;返回设置界面&#xff0c;进入【开发者选项】-【USB调试】开启&#xff0c;之后重启模拟器再次adb尝试连接。 2、android stud…...

【Go基础】Go算法常用函数整理

Go算法常用函数整理 使用 Go 语言编写算法题时&#xff0c;掌握一些常用的函数和用法可以大大提高效率。 1. 排序 (slices 包)&#xff1a; slices.Sort(x []T)&#xff1a; 对切片 x 进行升序排序。需要 Go 1.18 版本。T 需要实现 constraints.Ordered 接口&#xff0c;例如…...

【rust杂乱笔记】

code . 打开vscode fn main() {println!("hello world!") }loop{}循环; break跳出循环 // 引入三方库 use rand::Rng; // 引入标准库中的输入输出 use std::cmp::Ordering; use std::io;// main函数 先执行main函数 fn main() {// 打印的宏方法// 打印提示信息print…...