mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式

1 电脑是否已经安装了 brew

1.1 终端输入指令: which brew

如果显示如下图, 则证明已安装,
在这里插入图片描述
如果未安装, 终端执行如下指令:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

检查是否安装成功, 执行指令:brew -v
在这里插入图片描述

2 到这一步, brew已经有了, 开始安装 Nginx

执行指令:

brew install nginx

检查是否已经安装完成, 执行指令:nginx -v
如下图所示, 代表已经安装成功;
在这里插入图片描述

3 到这一步, Nginx 已经安装完成了, 开始启动 Nginx

简单介绍几种常用指令:

  • 启动指令: nginx 或者是 sudo nginx
  • 重启 Nginx 指令: sudo nginx -s reload
  • 停止 Nginx 指令: sudo nginx -s quit, 或者直接: killall nginx.

检查是否已经启动成功: ps -ef | grep nginx
如下所示, 代表已经启动成功:
在这里插入图片描述
或者直接网址输入 localhost:8080, 如果出现下图也代表已经成功:
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第1张图片

4 一些电脑 8080 端口已经被占用了, 可能启动不成功, 可以改一下端口号

改端口号, 需要找到 nginx.conf 这个文件, 操作如下:
执行查找配置文件所在目录指令: nginx -t
如下图便是 nginx.conf 的所在目录:
在这里插入图片描述
执行指令:open /opt/homebrew/etc/nginx/, 进入到此目录下,然后鼠标右键用自带的文本编辑器打开即可:
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第2张图片
下图便是端口号的设置, 我这里已经改成了8082;
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第3张图片

5 到这一步, Nginx 已经正常启动起来了, 接下来我们开始实际的部署

5.1 步骤一: 找到 Nginx 所在目录, 注意这里不是 nginx.conf 的目录, 而是 Nginx 的安装目录, 执行指令: brew info nginx , 如下图所示:
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第4张图片
注意这里有两个目录, 一定要区分开这两个目录, 我们用到的是 nginx 的安装目录;
打开此目录: open /opt/homebrew/Cellar/
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第5张图片
5.2 步骤二: 将你的前端文件复制到此目录下的 html 文件下, 如下图:
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第6张图片
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第7张图片
这时候我已经将我的前端文件放了进去;
5.3 步骤三: 再次修改 nginx.conf 文件, 目的是找到你的 前端 文件, nginx.conf 的打开方式上面已经说了, 就是打开修改端口号的那个文件:
指定前端项目所在位置: 我的 前端 文件就是 html 文件夹下面的 soulsys, 开启页面我设置的login.html, 注意这里端口号我改成了 8086:

mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第8张图片

6 项目开始跑起来

后端启动起来, 然后启动 nginx, 这里需要注意一下, 也可以在 bin 目录下启动你的项目的 nginx, 如下图所示:
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第9张图片
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第10张图片
或者是直接在终端指令输入 nginx 来启动, 记得如果 nginx 一直在启动的话, 部署完要记得重启一下 nginx, 重启指令 sudo nginx -s reload.
如下图, 代表已经启动成功:
mac 版 Nginx 的使用及 web 项目的实际部署--最简单的方式_第11张图片

7 测试


启动成功!!!

你可能感兴趣的:(nginx,m1pro,前端,nginx,macos,前端)