使用nginx反向代理运行dist文件

最新推荐文章于 2024-06-07 17:02:08 发布
最新推荐文章于 2024-06-07 17:02:08 发布
阅读量5.2k 收藏 6
点赞数
分类专栏： 后台语言及配置 文章标签： 反向代理 nginx dist
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39150852/article/details/102390122
版权

1、下载nginx安装文件
链接://download.csdn.net/download/weixin_39150852/12235687
2、修改端口号
打开conf文件夹的nginx.conf文件，Nginx服务器的基础配置，默认的配置都存放在此，可以在这里修改端口号
在这里插入图片描述
3、新建一个文件夹，将dist文件和nginx文件存放在同一目录下，或者将dist文件夹下所有文件复制至nginx-1.15.2下的html文件里

注意：此目录不能出现中文字符，否则无法运行

在这里插入图片描述
4、双击nginx-1.15.2下的nginx.exe文件，在任务管理器中查看是否运行成功
在这里插入图片描述
5、打开浏览器，访问http://127.0.0.1:7002/
在这里插入图片描述

依赖_赖
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
项目打包运行dist以及nginx配置
04-11
项目打包运行dist以及nginx配置
nginx 部署前端vue项目dist文件
苏谨
11-04 1677
nginx 部署前端页面。
windows上通过nginx部署jar包和dist文件（笔记）
最新发布
Java_mkx的博客
06-07 1175
windows系统通过nginx部署jar包和dist文件，设置开机自启。包含jdk安装以及环境变量配置、redis安装以及注册成windows服务、mysql离线安装、nginx配置以及注册为服务、Navicate自动备份设置
使用nginx在linux上部署前端项目（dist文件）
qq_52481494的博客
10-18 3222
使用nginx在linux上部署前端项目（dist文件）
Nginx反向代理实现部署dist文件
BadBoyxiaolin的博客
04-25 2330
Linux服务器安装nginx可以参考文章–Linux服务器安装Nginx Nginx常用命令可以参考文章–Nginx 启动、关闭、重启、检测等常用命令 1.创建文件存放dist文件 我的nginx安装目录为：/usr/local/nginx/nginx-1.21.6 注意：每个人的安装目录可能不一样 第一步进入自己nginx的安装目录 第二步新建存放dist文件存放的文件夹 第三步将dist文件上传到新建的文件夹中 //进入nginx安装目录 cd /usr/local/nginx/nginx-1.
前端：简单的nginx启动本地打包文件dist
qq_45234274的博客
06-21 1516
Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。
反向代理Nginx
05-24
Nginx反向代理 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; root E:\yuehou\git\web-h5\dist; location / { try_files $uri $uri/ /index....
Linux安装NodeJs并配合Nginx实现反向代理
01-10
本文介绍了Linux安装NodeJs并配合Nginx实现反向代理 ，具体如下： NodeJs是什么？ Node.js是一个JavaScript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常...
Nginx运行项目.docx
12-23
- **负载均衡**：如果有多台后端服务器，可以使用Nginx的反向代理功能实现负载均衡。 请根据你的具体需求调整以上配置。记住，在进行任何配置更改时，都要确保备份原有文件，以防出错。遵循这些步骤，你就能成功地...
vue.js使用代理和使用Nginx来解决跨域的问题
11-27
使用Nginx 反向代理解决跨域问题（vue.js使用代理去掉vue.js因为跨域而触发的options请求） 我们的项目还是需要node.js作为容器的 一、Windows 下安装Nginx （官网下载稳定版http://nginx.org/en/download.html） 二...
nginx发布前端静态文件配置
02-17
在IT行业中，尤其是在Web开发领域，Nginx是一款广泛应用的高性能HTTP服务器和反向代理服务器。它以其高效、稳定和轻量级的特性受到青睐。本文将深入探讨如何配置Nginx来发布前端静态文件，这通常是Web应用程序的HTML...
Vue项目部署Nginx配置文件 SSL
08-11
Nginx 是一款高性能的 HTTP 和反向代理服务器，常被用来部署 web 应用，包括 Vue 项目。SSL（Secure Sockets Layer）和其继任者 TLS（Transport Layer Security）则是用于在互联网上提供安全通信的标准，通过 HTTPS ...
nginx-utils:这是一个工具，可以帮助我自动执行nginx网站和反向代理部署
04-03
这主要是在我的nginx docker容器上使用，以使新网站的部署更快，更轻松。 安装 要安装此程序，请运行以下命令 $ wget https://github.com/abevalle/nginx-utils/raw/master/dist/nginx-utils 然后跑 $ chmod +x ...
nginx-1.15.2.zip
03-09
使用nginx反向代理工具,运行前端代码(vue,angular等)打包出来的dist文件,实现页面预览
nginx各种代理的config配置,直接替换
08-09
在IT行业中，Nginx是一款广泛应用的高性能反向代理服务器，它以其高并发、低内存占用和出色的稳定性著称。本文将深入探讨如何配置Nginx以代理不同的服务，如Tomcat、Spring Boot和Vue应用。 一、Nginx基本配置 ...
Vue项目部署的实现（阿里云+Nginx代理+PM2）
12-12
Vue项目部署到阿里云ECS涉及的关键步骤...总结来说，Vue项目部署到阿里云ECS，涉及到前端构建、Nginx反向代理、PM2进程管理、跨域请求处理等多个环节，每个环节都需要细心配置和检查，以确保项目能正常运行并提供服务。
nginx运行vue项目的dist文件
honvin的博客
10-09 3704
nginx运行vue项目的dist文件，并防止刷新404
vue项目部署到nginx 非根目录下
qiaojunt的博客
07-21 938
在这里插入图片描述](https://img-blog.csdnimg.cn/ec3759c1a5dc41ac840023a634c30d28.png#pic_center。注意：路径是 /dist/index.html 而并非 /index.html (是个坑，本人已踩过)→OO→。最后将dis文件夹直接仍到nginx 对应的目录下，配置server 路径为：/dist。vue.config.js文件中修改配置 publicPath 属性的值：如图。处理方式，简单粗暴，上图。
前端打包的dist文件 怎么用nginx 在 Windows 部署
wei7a7a7a的博客
07-06 1455
（如果在步骤 3 中使用了不同的域名或 IP 地址，请相应地修改 URL）。Windows 的 Nginx 安装程序，并将其安装到您的计算机上。配置 Nginx：安装完成后，在 Nginx 的安装目录中找到。要在 Windows 上使用 Nginx 部署前端打包的。下载 Nginx：首先，您需要从 Nginx 官方网站（文件后，返回到 Nginx 的安装目录，并运行。验证部署：打开您的浏览器，并访问。），并使用文本编辑器打开它。在上面的配置中，请确保将。，这是前端应用的入口文件。配置文件（默认路径为。
nginx反向代理两个dist文件夹
10-17
可以通过配置nginx的location来实现反向代理两个dist文件夹。具体的配置如下： ``` server { listen 80; server_name example.com; location /app1/ { proxy_pass http://localhost:3000/; } location /app...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值