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

前端项目部署方法

ngnix服务器部署

下载nignx,我下的是windows版本的 下载链接:[https://nginx.org/en/download.html](https://nginx.org/en/download.html)

解压文件

如果原本的80端口号被占用了,可以改为其他的端口号

可以点击nginx.exe文件启动nginx,它可能会弹出一个提示是否允许,然后会闪一下

也可以使用如下命令(但是要cd到nignx目录下)

start nginx

其他nginx命令

查找所有nginx进程

tasklist /fi "imagename eq nginx.exe"

关闭所有nginx进程

 taskkill /f /im nginx.exe

修改nginx配置文件后重启nginx进程

nginx.exe -s reload

windows ngnix常用命令

然后再浏览器输入localhost+端口号,出现下面这张图表示nginx启动成功

项目部署的时候会出现两个问题

第一个问题:刷新页面404

解决:

  • 使用hash路由
  • 使用historyl路由时,需要后端做配置,如果没有做配置无法匹配后端路由时,返回Index.html

第二个问题:

无法发起ajax请求,会出现跨域问题

打包项目代码,然后把nginx.conf文件里面的地址换成dist文件的地址

然后重启nginx,再刷新页面就可以看到项目的页面

再次刷新页面就会出现404 Not Found的问题,追加nginx配置来解决,

追加 try_files $uri $uri/ /index.html;表示当无法匹配资源时,返回index.html

然后关闭nginx,重启nginx,重新刷新页面即可,不会在出现404的问题

 location / {root   D:\文档1\前端\dist;index  index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新404}

还有一个问题就是无法发送请求,会出现跨域问题

需要再添加一个配置,来解决跨域问题

# 配置代理
location /prod-api {# 设置代理目标 proxy_pass https://heimahr.itheima.net;#这里是
}

这个 Nginx 配置片段主要用于 反向代理,将客户端请求转发到指定的目标服务器。下面是逐项解释:

  1. **location /prod-api**
  • location 是 Nginx 中用于匹配请求 URI 的指令。
  • /prod-api 是请求路径的匹配模式。具体来说,它会匹配所有以 /prod-api 开头的请求路径。举个例子,如果用户访问 http://yourdomain.com/prod-api/some-endpoint,这个 location 配置就会被触发。
  • 在这里,Nginx 会根据配置将匹配 /prod-api 的请求代理到指定的服务器。
  1. **proxy_pass https://heimahr.itheima.net;**
  • proxy_pass 是 Nginx 中用于配置反向代理的指令。
  • 这里,proxy_pass https://heimahr.itheima.net; 表示将匹配 /prod-api 路径的请求转发到 https://heimahr.itheima.net
  • 当请求被转发时,原始请求的路径部分(即 /prod-api/some-endpoint)将附加到目标 URL 后面,转发请求到目标服务器。例如,http://yourdomain.com/prod-api/some-endpoint 会被转发为 https://heimahr.itheima.net/prod-api/some-endpoint

3. 代理的工作原理

  • 反向代理:Nginx 会作为一个中间层,接收客户端(如浏览器)发送的请求,然后将这些请求转发给目标服务器(这里是 https://heimahr.itheima.net)。目标服务器处理请求并将响应返回给 Nginx,Nginx 再将响应发送给客户端。
  • 目的:反向代理常用于负载均衡、API 网关、保护后端服务器等场景。

发起了请求

云服务器部署

我们可以在云服务器上借助`nginx`完成部署,大致流程与本地`nginx`部署一致
  1. 关于购买云服务器,可选择:阿里云、腾讯云等。
  2. 关于操作系统,看个人习惯,Ubuntu、CentOs、RedHat、都不错。
  3. linux 远程操作软件:FinallShell(更方便)或者用Xshell、Xftp结合使用
  4. 具体配置如下:
  • 给服务器安装nginx
yum install nginx
  • 将打包后的前端资源放在:/html文件夹创建的新文件夹中或者其他的文件夹中。
  • 使用FinallShell配置服务器的 nginx,修改文件:/etc/nginx/nginx.config
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;events {worker_connections 1024;
}http {log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile            on;tcp_nopush          on;tcp_nodelay         on;keepalive_timeout   65;types_hash_max_size 2048;include             /etc/nginx/mime.types;default_type        application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;server {listen       80 default_server;listen       [::]:80 default_server;server_name  _;root         /usr/share/nginx/html;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;location / {root  /usr/local/nginx/html;#你存放资源的位置路径index  index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新404}# 配置代理location /dev/ {# 设置代理目标proxy_pass http(s)://xxxxxxxxxx/;#请求资源的服务器地址}error_page 404 /404.html;location = /40x.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}
}

相关文章:

前端项目部署方法

ngnix服务器部署 下载nignx,我下的是windows版本的 下载链接:[https://nginx.org/en/download.html](https://nginx.org/en/download.html) 解压文件 如果原本的80端口号被占用了,可以改为其他的端口号 可以点击nginx.exe文件启动nginx,它可能…...

Docker创建一个mongodb实例,并用springboot连接 mongodb进行读写文件

一、通过Docker 进行运行一个 mongodb实例 1、拉取镜像 docker pull mongo:5.0.5 2、创建 mongodb容器实例 docker run -d --name mongodb2 \-e MONGO_INITDB_ROOT_USERNAMEsalaryMongo \-e MONGO_INITDB_ROOT_PASSWORD123456 \-p 27017:27017 \mongo:5.0.5 3、进入容器&am…...

Android app反编译 攻与防

大概是2020年的时候,有一次,我们的竞争同行有另外一家公司要用我们的安卓软件app,拉了个群,告知他用一个软件多少钱,然后在群里发了一个我打包的apk包。结果就没有下文了。又过了一个月。我同事在那个要买我们apk的人的朋友圈&…...

ElasticSearch 简介

一、什么是 ElastcSearch? ElasticSearch 是基于 Lucene 的 Restful 的分布式实时全文搜索引擎。 1.1 ElasticSearh 的基本术语概念 index 索引 索引类似与 mysql 中的数据库,ES 中的索引是存储数据的地方,包含了一堆有相似结构的文档数据…...

Kerberos实验

kdc:192.168.72.163 客户端(机器账户win10):192.168.72.159 用户:administrator 抓包:开机登录win10,使用administrator域用户凭据登录。 生成 Kerberos 解密文件 抓取 krbtgt 用户和 win1…...

Android之RecyclerView显示数据列表和网格

一、RecyclerView的优势 RecyclerView 的最大优势在于,它对大型列表来说非常高效: 默认情况下,RecyclerView 仅会处理或绘制当前显示在屏幕上的项。例如,如果您的列表包含一千个元素,但只有 10 个元素可见&#xff0…...

docker mysql挂载

在提供的 docker run 命令中,已经挂载了三个卷到 MySQL 容器中:日志目录、数据目录和配置目录。然而,还没有挂载一个包含 cube_admin.sql 文件的目录。要将 SQL 文件放入容器中并在 MySQL 中执行它,可以按照以下步骤操作&#xff…...

顺序表-递增有序表合并

两个递增有序表合并操作 题目: 将两个递增有序的顺序表 A 和 B 合并成一个新的递增有序顺序表 C。 思路: 使用三个索引 i, j, k 分别遍历顺序表 A, B 和合并后的顺序表 C。比较 A 和 B 当前索引指向的元素,将较小的元素放入 C 中&#xf…...

【Qt】qt安装

在工作一年之后,还是想做一个Qt的教程,遥想研一刚刚接触Qt,从0到1学习,没有什么参考书籍,网上的资料也不多,幸好Qt官方文档写得好,加上自己肯研究,才堪堪入门。 现在我想自己写一个…...

CXF WebService SpringBoot 添加拦截器,处理响应报文格式

描述 XFIRE升级CXF框架,但是对接的系统不做调整,这时候就要保证参数报文和响应报文和以前是一致的。但是不同的框架有不同的规则,想要将报文调整的一致,就需要用到拦截器拦截报文,自定义解析处理。 CXF框架本身就是支…...

vue iframe进行父子页面通信并切换URL

使用通义千问提问后得到一个很好的示例。 需求是2个项目需要使用同一个面包屑进行跳转&#xff0c;其中一个是iframe所在的项目&#xff0c;另一个需要通过地址访问。通过 window.parent.postMessage &#xff0c;帮助 <iframe> 内嵌入的子页面和其父页面之间进行跨域通…...

基于Spring Boot的摄影师分享交流社区

一、系统背景与目的 随着摄影技术的不断发展和摄影爱好者群体的日益扩大&#xff0c;摄影师们需要一个能够展示自己作品、分享摄影心得、交流摄影技巧的平台。基于Spring Boot的摄影师分享交流社区应运而生&#xff0c;它旨在满足摄影师们的这些需求&#xff0c;促进摄影文化的…...

Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:电影院后台管理系统(前后端源码 + 数据库 sql 脚本)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 项目介绍 2.0 用户登录功能 3.0 用户管理功能 4.0 影院管理功能 5.0 电影管理功能 6.0 影厅管理功能 7.0 电影排片管理功能 8.0 用户评论管理功能 9.0 用户购票功…...

Linux(网络协议和管理)

后面也会持续更新&#xff0c;学到新东西会在其中补充。 建议按顺序食用&#xff0c;欢迎批评或者交流&#xff01; 缺什么东西欢迎评论&#xff01;我都会及时修改的&#xff01; 在这里真的很感谢这位老师的教学视频让迷茫的我找到了很好的学习视频 王晓春老师的个人空间…...

C++ 入门第 20 天:STL 容器之无序集合与无序多重集合

往期回顾&#xff1a; C 入门17&#xff1a;STL 容器之映射&#xff08;map&#xff09;与多重映射&#xff08;multimap&#xff09;_-CSDN博客 C 入门18&#xff1a;STL 容器之栈&#xff08;stack&#xff09;与队列&#xff08;queue&#xff09;-CSDN博客 C 入门19&#x…...

devops-部署Harbor实现私有Docker镜像仓库

文章目录 概述下载配置安装安装后生成的文件使用和维护Harbor参考资料 概述 Harbor是一个开源注册中心&#xff0c;它使用策略和基于角色的访问控制来保护工件&#xff0c;确保镜像被扫描并且没有漏洞&#xff0c;并将镜像签名为可信的。Harbor是CNCF的一个毕业项目&#xff0…...

rebase ‘A‘ onto ‘master‘ 和 merge ‘master‘ into ‘A‘有什么区别

在Git版本控制系统中&#xff0c;rebase 和 merge 是两种不同的操作&#xff0c;用于合并分支。rebase A onto master 和 merge master into A 虽然最终目的都是将两个分支的更改合并在一起&#xff0c;但它们在处理方式和结果上有所不同。 rebase ‘A’ onto ‘master’ 含义…...

Vulhub:Jackson[漏洞复现]

CVE-2017-7525(Jackson反序列化) 启动漏洞环境 docker-compose up -d 阅读vulhub给出的漏洞文档 cat README.zh-cn.md # Jackson-databind 反序列化漏洞&#xff08;CVE-2017-7525&#xff09; Jackson-databind 支持 [Polymorphic Deserialization](https://github.com/Fas…...

strongswan构建测试环境

make-testing脚本文件负责构建strongswan的虚拟化测试系统。位于目录strongswan-5.9.14/testing/&#xff0c;需要以管理员身份运行make-testing。生成测试用到的虚拟客户机镜像&#xff0c;KVM虚拟机和虚拟网络的配置文件位于目录:config/kvm。 ~/strongswan-5.9.14/testing$…...

前端:金额高精度处理

Decimal 是什么 想必大家在用js 处理 数字的 加减乘除的时候&#xff0c;或许都有遇到过 精度不够 的问题&#xff0c;还有那些经典的面试题 0.20.1 ! 0.3&#xff0c; 至于原因&#xff0c;那就是 js 计算底层用的是 IEEE 754 &#xff0c;精度上有限制&#xff0c; 那么Deci…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...