windows环境如何安装nginx部署前端项目？

已于 2022-04-28 12:26:57 修改
阅读量4.2k 收藏 17
点赞数 2
分类专栏： WEB前端 文章标签： nginx 前端 服务器
于 2022-04-28 11:17:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w597412819/article/details/124468549
版权
本文介绍了在Windows上安装和配置nginx以部署前端项目的步骤。首先从官方下载地址获取nginx的Windows版本，解压并启动服务器。接着，将前端项目文件放置到nginx的html目录，并修改nginx.conf配置文件的root路径。完成配置后，重启nginx，即可通过localhost访问前端项目。如需公网访问，需调整server_name并设置域名。
摘要由CSDN通过智能技术生成

nginx简介：nginx是一个高性能的HTTP和反向代理web服务器。

1、下载地址：nginx: download

选择windows版本

2、安装和启动

解压zip文件到当前目录，然后进入nginx-1.12.2目录，在地址栏输入cmd，进入终端窗口
在这里插入图片描述
执行命令

start nginx

在这里插入图片描述
窗口闪一下说明启动成功，在浏览器输入localhost出现如下界面说明启动成功
在这里插入图片描述

3、配置前端项目

  1. 前端静态项目myWeb丢到nginx-1.12.2\html目录下
    在这里插入图片描述
  2. 进入
最低0.47元/天 解锁文章
w597412819
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Docker利用Nginx部署前端项目
尽我所能，分享开发问题的解决方式
10-27 7176
Dockerfile左侧的dist文件夹就是你前端项目存放的文件夹、nginx.conf.template文件中设置了首页跳转index等，使用时记得改成自己所需的；注：如果是linux系统，先找个位置创建文件夹，然后利用可视化窗口将三个文件全部拉到刚刚创建的文件夹下即可。--p：端口号，左侧为外网访问端口，右侧为内部映射端口，与nginx.conf.template的监听端口默认80一样即可。到此为止，你的项目就成功部署到Docker中的Nginx中了，撒花*★,°*:.☆(￣▽￣)/$:*.°★*。
windows上部署项目步骤
06-14
jdk、tomcat、mysql安装
前后端分离项目-阿里云服务器windows系统配置nginx并部署前端项目（踩坑实录）
cyxdekongjian的博客
04-12 1665
前后端分离的核心思想是：前端html页面通过Ajax调用后端的API并使用json数据进行交互。一般只有web服务器才能被外网访问，应用服务器只能内网访问。在互联网架构中，web服务器：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。应用服务器：一般指像tomcat，jetty，resin这类的服务器，可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。
记录一下 Windows nginx 前端代码部署；
m0_62651421的博客
07-02 1222
项目是 vue+webpack。
【Windows部署前端项目】
weixin_44357065的博客
07-28 2089
Windows部署前端项目
使用 Nginx部署前端项目
blue_121的博客
05-23 2980
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
web服务器nginx+部署前端vue项目
03-22
#### 三、部署前端 Vue 项目至 Nginx 假设我们需要将一个基于 Vue.js 的前端项目部署到 Nginx 上，下面是一些基本的步骤： 1. **准备环境**： - 安装 Nginx。确保你的系统上已经安装了 Nginx 服务器。 - 准备好...
Linux如何使用Nginx部署前端项目
m0_67094505的博客
10-27 7371
为了测试同一个网址可能会请求不同服务器，在不同的服务器中部署的是同一个项目，对于用户而言是感知不到的。将项目目录下的config文件夹里的index.js文件中,将build对象下的assetsPublicPath中的“/”，改为“./”后，再打包生成的 dist 文件。5.3、 编辑 /etc/nginx/conf.d/ 路径下的 default.conf 配置文件。Nginx的默认端口号是80，所以在访问项目输入地址的时候是不需要添加端口号进去的。①. HTTP端口，默认8080，如下改为8081。
windows nginx，前端项目部署，已配置，解压后使用
最新发布
07-19
windows nginx，前端项目部署，解压后使用，将打包后的dist 目录直接放到nginx html目录下，直接在nginx.exe所在目录打开cmd, 执行start nginx 即可发布前端项目，配置可在conf/nginx.conf修改配置
windows系统IIS部署前端项目
南城旧梦_de博客
12-30 475
windows系统IIS部署前端项目
【nginx】在本地部署前端项目:
SunPeng的博客
02-07 3563
【nginx】在本地部署前端项目:
Windows版本Nginx部署前端项目并且解决跨域请求后端接口教程
weixin_42334396的博客
05-17 1584
1、官网下载Nginx：nginx下载地址 2、下载好之后，解压后打开nginx.conf文件，在nginx-1.17.10\conf文件夹下哦： # 这里配上监听前端项目的端口 listen 6080; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / {
【运维】手把手教你在Linux/Windows系统使用Nginx部署多个前端项目【详细操作】
m0_64210833的博客
06-11 8930
手把手教你如何在Linux/Windows系统上使用Nginx部署多个前端项目，并且教你如何关闭防火墙解决项目访问失败问题。
Nginx环境搭建及前端部署教程（Windows版）
我要学Java_blog
11-26 8838
Nginx提高了网站的响应速度，优化了用户体验，增加了网站的健壮性。方法一：(1)输入nginx命令 nginx -s stop(快速停止nginx) 或 nginx -s quit(完整有序的停止nginx)，这两个命令的区别在于nginx -s stop是快速停止Nginx，而nginx -s quit是有序的停止Nginx，前者可能会导致数据没有完全保存；nginx的配置文件是conf目录下的nginx.conf，默认配置的nginx监听的端口为80，如果80端口被占用可以修改为未被占用的端口即可。
nginx windows 发布前端页面
jiaxiaokai的博客
08-23 237
1.后端设置的端口如下： 2. 前端文件的配置 3. nginx的配置 4.启动nginx.exe 5. 用浏览器访问
jenkins windows安装 部署项目 前端 后端
lichengwei816的博客
04-18 984
8.将打包好的文件复制到目标文件 – xcopy C:\ProgramData\Jenkins.jenkins\workspace\standardpc8080\dist E:\data\bzb\pc\dist /e。6.备份当前程序包 – xcopy E:\data\bzb\pc\dist E:\data\bzb\pc\dist-bak /e。7.删除现场的包 – del /s /Q E:\data\bzb\pc\dist。1.配置jenkins不关闭衍生的程序。2.下载jdk 11。
Windows系统下通过nginx配置多项目
Bruce__taotao的博客
05-10 1593
在windows电脑启动一个nginx 测试配置多前端项目，一个pc端（vue3+ts+vite ，history路由），一个mobile端（vue3+ts+vite ，hash路由）。记录单个端口下，利用nginx部署 pc前端项目（history模式路由）与mobile前端项目（hash模式路由）其中的修改。
nginx部署前端项目windows
09-03
首先，确保你已经安装了 Nginx 并且配置正确。接下来，按照以下步骤进行前端项目的部署： 1. 将前端项目的构建文件（通常是...希望这些步骤能帮助你成功部署前端项目到 Windows 上的 Nginx！如有需要，可以继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值