前端项目nginx部署

最新推荐文章于 2025-04-24 21:22:41 发布
原创 最新推荐文章于 2025-04-24 21:22:41 发布 · 478 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #nginx #服务器

本文介绍了在nginx中部署前端静态资源的方法。先从https://nginx.org/下载安装包并解压到D盘，将前端打包文件放于nginx的html文件夹。若80端口被占，可在nginx.conf文件里将80改为90，最后通过localhost:90查看部署的静态资源。

进入nginx下载地址:https://nginx.org/

 

下载完安装包以后,解压在D盘中

 双击进去=>

将前端打包好的文件放在nginx的html文件夹中

可能80端口会被系统所占用

我们可以在nginx的conf文件夹中的nginx.conf文件中修改80为90

之后我们就可以在任务管理器中看到了

然后

localhost:90  就可以看到nginx中部署的静态资源

湖边看客
关注
基于nginx的静态网页部署的实现
01-10
背景： 一序列的html网页需要部署 基于nginx的部署： 本文采用的基于openresty的nginx 配置。 简单地配置 Nginx 的配置文件，以便在启动 Nginx 时去启用这些配置即可实现对于编写好的html网页的点击跳转访问。而本文的重点也是于此。 配置方式1： Nginx 的配置系统由一个主配置文件和其他一些辅助的配置文件构成。这些配置文件均是纯文本文件，一般地，我们只需要配置主配置文件就行了。/usr/local/openresty/nginx/conf 下的配置文件修改如下： 配置信息： #user nobody; worker_processes 1; #
华为云耀云服务L实例：html项目通过nginx部署——下
xiaojinyuya的博客
12-31 664
华为云提供高性价比与多种实例规格，从适合个人用户的低价实例到适合企业使用的高性能实例应有尽有，使用门槛很低，对于云服务器使用经验不多的个人用户，按月付费的小型服务器就是很好的选择。在我的使用过程中，通过宝塔的功能轻松完成了java,python,mysql等常见环境的配置，且提供docker以隔离环境，从本地到云服务器上的项目移植简单方便。通过将HTML项目的静态文件放置在Nginx的指定目录下，可以通过Nginx直接提供静态文件的访问，减轻后端服务器的负载，提高网页加载速度。
Ubuntu Nginx 安装启动
MENGSHI33333的博客
08-07 308
apt-get install nginx Ubuntu安装之后的文件结构大致为： 所有的配置文件都在/etc/nginx下，并且每个虚拟主机已经安排在了/etc/nginx/sites-available下 程序文件在/usr/sbin/nginx 日志放在了/var/log/nginx中 并已经在/etc/init.d/下创建了启动脚本nginx 默认的虚拟主机的目录...
nginx配置挂载html
Neon Light 的博客
04-23 1608
很多软件的官方文档，在国内打开很慢，每次都得等很久，看到官方同时提供了html的包，所以想着挂载到本地nginx下，查看会方便很多。想添加新的文档也是一样，放到这个目录下就下，刷新页面后就能在页面上访问了。下载官方html文档包，解压到documentation_htmls下，这个location 配置实现了自动加载。
Nginx线上部署纯Html代码
热门推荐
weixin_45941687的博客
09-03 1万+
Nginx线上部署纯Html代码一、将前端项目准备好????二、Nginx配置 ????三、访问页面 ????四、参考链接 首先说明⭐ 前端代码，纯Html，未使用任何框架 没有后端配置 线上环境Docker安装Nginx，Nginx已经指向两个前端项目 链接服务器的软件是 MobaXterm 需求，现在Nginx再指向一个前端Html项目 一、将前端项目准备好???? 注意： index.html首页文件要放在最外层，否则在配置nginx指向不能读取到外部资源 只是个人建议：虽然是纯html文件，但
nginx部署前端
weixin_41513488的博客
09-10 1086
现在，您的前端应用程序应该已经成功部署到Nginx服务器。可以通过在浏览器中访问服务器的IP地址或域名来测试它。编辑Nginx配置文件，以便Nginx可以正确地为前端应用程序提供服务。重新启动Nginx服务器，以使配置生效。确保已经安装了Nginx服务器。如果没有安装，请根据您的操作系统进行安装。将前端应用程序的文件复制到Nginx服务器的相应目录。这样，Nginx就会将请求转发给。文件，该文件通常位于。
使用nginx部署前端项目（超详细教程）.pdf
04-29
【使用Nginx部署前端项目】的教程是一个详尽的指南，主要面向初学者，旨在教会读者如何利用Nginx高效地部署前端应用。Nginx是一个高性能的Web服务器和反向代理，因其高并发处理能力和低内存占用而受到广泛青睐。 ...
【Nginx 】Nginx 部署前端 vue 项目
m0_74825746的博客
01-17 1705
在两种系统中，安装Nginx的过程都相对简单，主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同，主要体现在软件包管理器的使用上。在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。
精选资源
web服务器nginx+部署前端vue项目
03-22
### Nginx 与前端 Vue 项目的部署 #### 一、Nginx 概述 Nginx 是一款广泛使用的高性能 HTTP 和反向代理 web 服务器。它以其出色的并发处理能力和较低的内存消耗而闻名。根据相关报告，Nginx 能够支持高达 50,000 ...
怎么用nginx部署多个前端项目
m0_51732378的博客
12-09 4997
nginx部署多个前端项目流程
【前端 22】使用Nginx部署前端项目
delepaste的博客
08-03 1656
在前端开发中，将项目打包并部署到服务器上是一个常见的需求。下面，我将详细介绍如何使用Nginx部署一个前端项目，并展开讲解Nginx的目录结构以及如何处理端口占用问题。文件部署到Nginx之前，了解Nginx的目录结构是非常有帮助的。通过这些步骤，你可以轻松地将前端项目打包并部署到Nginx服务器上，同时处理可能遇到的端口占用问题。目录会包含所有构建后的文件，这些文件是浏览器可以直接访问的静态资源。等）将项目打包成静态文件，并输出到指定的目录，通常是。（或你设置的任何其他端口）来访问你的前端项目了。
nginx部署项目
weixin_38090079的博客
03-09 959
Nginx入门指南轻量级的 HTTP 服务器
服务器------nginx部署静态网页html配置文件，搭建Http静态服务器环境
COCOLI_BK的博客
05-09 1295
1. 配置静态服务器访问路径： 找到nginx根目录打开：vim nginx.conf 文件内容如下： 接着运行 ESC— wq!— nginx -s reload重启服务 如果运行报错：nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory) 则看我另一篇解决哦 ...
nginx 指定HTML访问根目录
chengmin123456789的博客
06-25 1622
然后 sudo /usr/local/nginx/sbin/nginx -s reload 重启 nginx服务。找到nginx 安装目录下的conf目录下的nginx.conf 然后进行修改配置。如果这个时候访问网站 出现403错误。
Nginx部署与静态html
underworld33的博客
02-21 3694
Nginx部署与静态html页面展示
使用nginx实现前端部署
weixin_73060959的博客
09-17 728
记得解压，如果是zip文件可以使用vim命令，建议直接打开文件编辑如果使用vim命令，按下i，进行插入，编辑完成，按下esc键，输入：wq即可。
CentOS 7 基于 Nginx 的 HTML 部署全流程指南
源滚滚编程
04-24 1109
通过以上步骤，您已完成从 Nginx 安装到 HTML 部署的全流程。推荐使用 YUM 安装快速上手，生产环境建议源码编译以启用高级功能。部署时务必注意文件权限与防火墙配置，进阶优化可显著提升访问速度与安全性。如需实现 HTTPS 支持，可参考 Let’s Encrypt 免费证书配置方案。
nginx项目部署教程
厚积薄发.
11-02 5395
当我们的项目开发完毕后，我们需要将项目打包、部署到服务器上，供用户来使用。目前，常见的部署方式有两种：后端部署前后端分离部署。
如何快速在nginx部署html网页
IT学习小镇
09-08 7964
01前期准备1、服务器开放端口，比如80端口或者自定义端口。（配置防火墙或者安全组，具体看服务器类型）2、xftp工具配置，地址账号。进入到个人服务器后，在root同根下创建一个文件夹。3、通过xshell或者阿里云控制台进入到服务器内部，安装并配置nginx。（1）环境配置：①yum install gcc-c++②yum install -y pcre pcre-devel③yum insta...
Nginx 部署前端项目
最新发布
09-20
使用Nginx部署前端项目（以Vue项目为例）的详细步骤和方法如下： ### 安装Nginx - **Windows环境安装**：可从Nginx官网下载Windows版本的Nginx，解压到指定目录即可完成安装。 - **Linux环境安装**：可使用系统的包管理工具进行安装，如在Ubuntu系统中使用`apt-get install nginx`命令进行安装 [^1]。 ### 打包Vue项目 在项目根目录下，使用`npm run build`命令对Vue项目进行打包。打包完成后会生成一个`dist`目录，里面包含了打包后的静态文件 [^1]。 ### 配置Nginx #### 常用基本命令 - **开启服务**： - 在cmd命令进入Nginx文件夹后，使用`start nginx.exe`命令。 - 直接点击Nginx目录下的`nginx.exe`文件。 - **停止服务**： - `nginx -s stop`：快速停止Nginx。 - `nginx -s quit`：完整有序地停止Nginx。 - **重新加载配置文件**：`nginx -s reload`，实现热加载 [^2]。 #### 配置文件设置 打开Nginx的配置文件`nginx.conf`，一般位于Nginx安装目录下的`conf`文件夹中。以下是一个简单的配置示例： ```nginx server { listen 80; server_name 127.0.0.1; # 项目打包后的静态文件目录 root /path/to/your/dist; index index.html index.htm; location / { try_files $uri $uri/ /index.html; } # 处理静态资源缓存问题 location ~* \.(js|css|png|jpg|gif)$ { add_header Cache-Control no-store; } } ``` 在上述配置中，`listen`指定监听的端口，`server_name`指定服务器名称，`root`指定项目打包后的静态文件目录，`location`用于处理请求的路由规则 [^3]。 #### 跨域问题解决 场景：前端使用的路径配置为`http://127.0.0.1:8070/`（Nginx配置），需要向后端请求的路径为`http://192.168.1.19:8087`（项目打包配置），此时前端向后端发送请求会出现跨域问题。 解决方法：启动Nginx服务器，将`server_name`设置为`127.0.0.1`，然后设置相应的`location`以拦截前端需要跨域的请求，最后将请求代理回自己需要请求的后端路径。示例配置如下： ```nginx server { listen 80; server_name 127.0.0.1; location /api/ { proxy_pass http://192.168.1.19:8087/; } } ``` 上述配置将以`/api/`开头的请求代理到`http://192.168.1.19:8087/` [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值