mac下如何使用Nginx本地服务器运行打包项目

Mac下Nginx搭建本地服务器
最新推荐文章于 2025-10-25 20:30:37 发布
原创 最新推荐文章于 2025-10-25 20:30:37 发布 · 1.6k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #webpack

本文介绍在Mac上使用Nginx搭建本地服务器的方法，包括安装Nginx、配置服务、启动服务等步骤，适合用于运行本地打包项目。

mac下如何使用Nginx本地服务器运行打包项目

  1. 通过命令安装brew：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  1. 然后通过命令安装Nginx：
brew install nginx
  1. 可以输入nginx查看是否install成功
    在这里插入图片描述
  2. 配置服务
    去到/usr/local/etc/nginx/servers目录下，查看有没有localhost.conf文件，文件配置如下
server {
  listen        127.0.0.1;
  root /Users/ayue/projects/SuperUI/dist;
  location / {
	try_files $uri $uri/  @rewrites;
  }

  location @rewrites {
       rewrite ^(.+)$ /index.html last;
  }
}

主要配置listen和root
127.0.0.1是回送地址，指本地机
/Users/ayue/projects/SuperUI/dist;是本地项目打包后的地址

5.启动nginx:

sudo nginx

(需要输入开机密码)
然后输入127.0.0.1本地打包项目就可以跑起来啦🥳
在这里插入图片描述

mac上nginx运行前端项目
weixin_62015493的博客
03-03 3488
Nginx（发音为“engine-x”）是一个高性能的开源的反向代理服务器、负载均衡器、HTTP 缓存服务器以及 Web 服务器。它最初由 Igor Sysoev 开发，第一个公开版本发布于2004年。Nginx 在性能、稳定性和灵活性方面非常强大，因此被广泛应用于大型网站、高流量的网站和负载较重的网络环境中。以下是 Nginx 的一些主要特点和优点：1. **高性能**：Nginx 采用了异步、事件驱动的架构，可以处理数千个并发连接，同时消耗较少的内存和 CPU 资源。
项目打包后使用nginx本地服务器运行
周家大小姐
04-18 2718
nginx官网地址 下载后对得到的压缩包进行解压 解压出来的结果: 打开文件夹中的conf找到nginx用编辑器打开后找到http对象中的server对象名对listen端口号进行设置(自定义) 再往下找,找到 location ,location里的值放入你需要上传的项目路径,找到项目单击右键点击属性会看到位置 对位置进行复制放到root后面的位置 s...
Mac Nginx安装、启动、简单命令（苍穹外卖、黑马点评前端环境搭建）
最新发布
m0_51448653的博客
10-25 994
nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。我们如果要发布，直接将资源放入到html目录中。（上图是windows下的Nginx目录）总的来说Nginx是用来部署前端环境的。
Nginx在MAC上的安装、启动、重启和关闭
09-30
主要介绍了Nginx在MAC上的安装、启动、重启和关闭的相关资料,需要的朋友可以参考下
Mac环境下安装nginx并本地部署项目
热门推荐
想好了再写！
07-13 1万+
配置完毕之后，重启nginx（nginx -s reload）,然后把本地项目运行起来(npm run serve)，然后把端口号改成nginx里面配置的端口号即可看到本地部署的项目。查看是否已经安装，如果输入指令出现版本号说明已经安装成功。1.首先需要将打包好的项目放到你指定的的路径下。必须安装了homebrew，可在终端输入命令。命令就能打开你自定义的端口号啦。本地测试没有配置代理如下配置。上图看到的端口号需要在。
mac电脑下安装和启动nginx
weixin_42349568的博客
03-25 2504
如果未安装先安装（网上很多文章）
Mac安装nginx配置本地项目跨域过程
u012716788的专栏
07-16 1136
前端本地设置代理，采用Nginx服务 安装Nginx步骤： 1、打开终端 2、安装Command Line tools $ xcode-select --install 3、安装brew命令 $ ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)” 4、安装nginx $ brew install nginx 5、启动nginx $ sudo nginx OK, n.
（Mac)nginx部署前端项目到服务器小白教程
weixin_42650749的博客
04-06 2248
一、连接服务器 在终端用ssh连接服务器 ssh root@xxx.xxx.xx //root为用户名 二、在服务器上下载nginx并修改配置文件 sudo apt install nginx 二、打包vue项目并上传到服务器 1、开发生成静态部署文件： npm run build 我这里是有两个项目，所以一起放到一个文件夹上传服务器 2、上传到服务器 scp -p -r /usr/local/xzs/web root@47.107.189.55:/root/www/html //本地的地址到服务
vue项目如何部署到nginx服务器
2303_79056168的博客
04-20 1048
wq今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。所以看完之后，还是多多行动起来吧！可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
Mac Nginx 前端打包部署
u010609022的专栏
11-12 628
安装homebrew/bin/安装Nginxnginx相关命令nginx启动命令：nginxnginx -s reload #重新加载配置nginx -s reopen #重启nginx -s stop #停止nginx -s quit #退出nginx -V #查看版本，以及配置文件地址nginx -v #查看版本nginx -c filename #指定配置文件nginx -h #帮助启动之后，在浏览器输入或。
Windows 和 Mac 平台下安装 Nginx 部署前端项目教程
Ares_Yin的博客
06-06 1916
Windows 和 Mac 平台下安装 Nginx 部署前端项目教程
MAC电脑系统中使用nginx命令
Eiwen的技术生涯
07-03 518
brew info nginx
mac 安装nginx
m0_37564426的博客
05-17 424
使用 brew install nginx 安装nginx 查看nginx配置文件目录 open /usr/local/etc/nginx/ 查看ginx被安装到的目录　 open /usr/local/Cellar/nginx 启动服务sudo nginx(直接nginx启动，可能会报错)或者 sudo brew services start nginx， 端口默认是8080，通过界面访问 http://localhost:8080，看到NG环境界面说明已经安装成功 ...
Mac安装nginx并部署项目
qq_67958752的博客
10-03 4936
Mac安装nginx并部署项目
mac(m1）安装nginx
weixin_49985645的博客
06-19 748
摘要：本文介绍在macOS系统通过Homebrew安装和配置Nginx的完整流程。主要内容包括：1）使用脚本安装Homebrew并更新；2）通过brew命令安装Nginx并启动服务；3）访问localhost:8080验证安装；4）常用操作命令（启动/重启/停止服务、检查配置等）；5）关键文件路径说明（配置文件、日志、HTML文件等）。同时提供了默认nginx.conf配置模板，包含服务器监听设置、错误页面处理等基础配置项。全文简明扼要地涵盖了Nginx在macOS环境下的部署与管理要点。
Mac下Nginx 部署、配置
weixin_39444349的博客
03-11 1831
Nginx（发音为"engine-x"）是一个高性能的开源Web服务器，也可以作为反向代理服务器、负载均衡器、HTTP缓存和动态内容的加速器。它最初是由俄罗斯的程序员Igor Sysoev创建的，于2004年首次公开发布。：Nginx以其出色的性能而闻名，它能够处理大量并发连接而不消耗太多系统资源。：Nginx经过广泛的实际使用和测试，被证明是非常可靠的，可以持续稳定地运行，即使在高负载下也是如此。：Nginx采用事件驱动的架构，能够高效地处理大量的并发连接，而无需为每个连接创建新的线程或进程。
Mac笔记本idea打包maven工程，本地环境运行正常，打包成功，却启动不成功
zhaoshuangjian
02-26 1424
Mac笔记本idea打包maven工程，本地环境运行正常，打包成功，却启动不成功
mac打开windows的nginx项目
weixin_44404391的博客
03-25 272
开发中，当我们拿到一个从windows传来的nginx项目，由于mac上不能运行exe文件，所以需要一些别的操作才能成功运行。首先在本机安装好nginx。然后用Windows香米中的nginx文件夹下的nginx.conf替换掉本机的。然后用Windows项目中的nginx文件夹下的html替换掉本机的。nginx成功启动后，访问本地前端即可成功运行。查看nginx是否启动成功。下的nginx.conf。接下来重新启动nginx。
react项目文件打包封装上传到本地服务器可以直接用url来进入
07-31
<think>我们参考用户的问题和提供的引用内容，用户想将React项目打包并部署到本地服务器，并通过URL访问。根据引用内容，我们可以总结出以下步骤： 1. 项目打包：使用 `npm run build` 命令生成静态文件。 2. 在本地服务器上部署：可以使用一个静态服务器来运行打包后的文件，例如使用 `serve` 包，或者使用Nginx等服务器。 同时，引用中提到了路由懒加载和包体积分析，这些是优化步骤，不是部署的必要步骤，但用户如果有兴趣可以了解。 根据用户需求，我们重点讲解如何打包和部署到本地服务器（使用serve和Nginx两种方式）。 ### 步骤1：打包React项目 在项目根目录下运行打包命令： ```bash npm run build ``` 该命令会生成一个`build`文件夹（通常是这个名称，具体看项目配置），里面包含了所有静态文件（HTML、CSS、JS等）。 ### 步骤2：部署到本地服务器并访问 #### 方法1：使用`serve`包（简单，适合本地测试） 1. 全局安装`serve`包（如果已安装可跳过）： ```bash npm install -g serve ``` 2. 使用`serve`启动一个静态服务器，将打包后的`build`目录作为静态资源目录： ```bash serve -s build ``` 默认情况下，服务器会监听端口5000（如果5000被占用，会尝试其他端口）。 3. 在浏览器中访问：`http://localhost:5000` 即可。 #### 方法2：使用Nginx（更接近生产环境） 1. 安装Nginx（如果尚未安装）： - 对于Windows：可以从官网下载安装包。 - 对于Mac：可以使用`brew install nginx`。 - 对于Ubuntu：`sudo apt install nginx`。 2. 配置Nginx： - 找到Nginx的配置文件（通常位于`/etc/nginx/nginx.conf`或`/usr/local/etc/nginx/nginx.conf`，或者Windows下的安装目录中的`conf/nginx.conf`）。 - 在`http`块中，可以添加一个`server`块来配置： ```nginx server { listen 80; # 监听80端口 server_name localhost; # 服务器名称，本地使用localhost location / { root /path/to/your/react-project/build; # 替换为你的build文件夹的绝对路径 index index.html index.htm; try_files $uri $uri/ /index.html; # 用于支持React Router的路由，避免刷新页面时出现404 } } ``` 注意：`root`指令后的路径必须是build文件夹的绝对路径。 3. 启动Nginx（如果已经运行，则重新加载配置）： - 启动：`nginx` (Windows下双击nginx.exe或命令行启动) - 重新加载配置：`nginx -s reload` 4. 在浏览器中访问：`http://localhost` 即可。 ### 注意事项 - 如果使用React Router并采用了browserHistory（即路由不是hash模式），那么在刷新页面或直接访问子路由时，服务器可能会返回404，因为服务器没有对应的路径资源。解决方法是在服务器配置中添加一条规则：将所有请求重定向到`index.html`（上面Nginx配置中的`try_files`就是做这个的）。 - 如果部署在二级子目录（非根目录），则需要在React Router中设置basename，并在Nginx配置中调整root路径（指向build文件夹的父目录，并在location中指定子目录）。但用户要求是本地服务器，一般部署在根目录即可。 ### 引用说明 - 打包命令和本地预览参考了引用[1]。 - 关于Nginx配置中处理路由刷新404的问题参考了引用[3]和引用[4]。 - 二级子目录部署的问题参考了引用[2]，但用户要求本地服务器，我们这里以根目录部署为例。 ### 相关问题 1. 如何解决React项目部署后刷新页面出现404的问题？ 2. 除了`serve`和Nginx，还有哪些方法可以本地运行打包后的React项目？ 3. 如何将React项目部署到二级子目录？</think>### 打包和部署React项目到本地服务器的步骤 #### 1. 项目打包 在项目根目录执行打包命令： ```bash npm run build ``` 这会生成一个 `build` 文件夹，包含所有优化后的静态文件（HTML/CSS/JS）。打包过程会： - 压缩代码 - 移除开发依赖 - 生成生产环境可用的资源文件[^1] #### 2. 安装本地服务器 推荐使用 `serve` 作为静态文件服务器： ```bash npm install -g serve ``` #### 3. 启动本地服务器 ```bash serve -s build ``` 参数说明： - `-s`：处理单页应用的路由回退 - `build`：指向打包生成的文件夹 默认访问地址：`http://localhost:3000` #### 4. 配置Nginx服务器（可选） 如果需要自定义端口或域名，修改Nginx配置： ```nginx server { listen 80; server_name localhost; location / { root /path/to/react-project/build; # 替换为实际路径 index index.html; try_files $uri $uri/ /index.html; # 支持React Router路由 } } ``` 重启Nginx：`sudo nginx -s reload` #### 5. 访问应用 通过浏览器访问： - 默认地址：`http://localhost:3000` - 自定义配置：`http://your-local-ip` 或 `http://your-domain` --- ### 关键注意事项 1. **路由处理**： - 使用 `react-router-dom` 的 `useNavigate` 进行路由跳转 - 避免直接URL访问非根路径（需服务器配置`try_files`）[^2][^3] 2. **刷新404问题**： ```nginx # Nginx必须配置此项 try_files $uri $uri/ /index.html; ``` 3. **路径配置**： 若部署在二级目录（如 `/app`）： ```jsx // 在React Router中 <BrowserRouter basename="/app"> ``` --- ### 部署验证流程 ```mermaid graph TD A[代码开发完成] --> B[npm run build] B --> C[生成build文件夹] C --> D[启动serve服务] D --> E[访问localhost:3000] C --> F[配置Nginx] F --> G[访问自定义URL] ``` --- ### 常见问题解决 - **白屏问题**：检查控制台是否有资源加载错误 - **路由失效**：确认服务器配置了 `try_files` - **样式错乱**：检查 `package.json` 中的 `homepage` 字段 - **跨域问题**：开发环境配置代理，生产环境需后端配合 --- ### 相关问题 1. **如何优化React打包体积？** - 使用路由懒加载：`lazy()` + `Suspense`[^1] - 执行包体积分析：`npx source-map-explorer 'build/static/js/*.js'` - 启用Gzip压缩 2. **部署后刷新页面出现404如何解决？** - 检查Nginx的 `try_files` 配置 - 确认使用 `browserHistory` 而非 `hashHistory`[^3] - 在React Router中设置 `basename` 3. **如何在服务器二级目录部署React应用？** - 修改 `package.json`：`"homepage": "/subdir"` - 配置Nginx的 `root` 指向父目录，`location` 指定子目录[^4] - 调整Webpack的 `publicPath` 4. **本地预览和生产环境部署有何区别？** - 本地预览使用 `serve` 快速测试 - 生产环境需配置HTTPS/CDN/负载均衡 - 生产环境需处理缓存策略和HTTP头安全设置 [^1]: react项目打包和优化 [^2]: 使用Nginx反向代理部署到二级子目录 [^3]: 刷新报错404的解决方案 [^4]: Nginx配置路径指南
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值