1、nginx介绍

Nginx 是一个很强大的高性能web和反向代理服务

2、nginx应用场景

1、静态资源服务（如前端项目部署）

2、反向代理服务

3、nginx安装

1. 下载

官方地址：http://nginx.org/en/download.html

官网提供三种版本：

Nginx官网提供了三个类型的版本

Mainline version：Mainline 是 Nginx 目前主力在做的版本，可以说是开发版

Stable version：最新稳定版，生产环境上建议使用的版本（通常使用下载这个版本）

Legacy versions：遗留的老版本的稳定版

这里我们下载 nginx/Windows-1.20.2 这个版本，如下图

2. 解压

下载下来的文件格式是zip，将它解压到你想放置的目录

这里我放置的目录为E:hlExe ginx-1.20.2，如下图

3. 简单运行

如果没有其他服务器应用（如Tomcat、IIS、Apache）启动（占用80端口）的话，可以直接运行nginx。

两种方法：

1. 直接双击nginx.exe（不推荐）
2. cmd进入nginx路径，这里是E:hlExe ginx-1.20.2，输入start nginx，然后回车

此刻浏览器访问localhost，出现下图说明nginx启动成功

4. nginx配置前端项目

1. 简单的html页面

新建一个test.html

  
    
    
    
    
  

  
    
test页面
  


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

将test.html文件放置到E:hlExe ginx-1.20.2html目录下

访问http://localhost/test.html即可看到test.html的内容

2. vue本地服务代理（hash模式和history模式都可）

如一个本地启动的8080端口的vue项目

vue项目的vue.config.js配置publicPath，开发环境时’/vue/’

// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/vueprodpath/'
    : '/vue/'
}
1
2
3
4
5
6

编辑器打开E:hlExe ginx-1.20.2conf ginx.conf，使用vscode或者notepad工具都可以

添加配置

location /vue/ {
    proxy_pass http://127.0.0.1:8080;
}
1
2
3

保存之后，cmd进入nginx路径，执行nginx -s reload操作，即修改配置后重新加载生效

此时访问http://localhost/vue/成功展示vue本地8080端口前端项目

3. vue打包项目代理（hash模式）

之前在vue项目中vue.config.js设置了生产环境publicPath为’/vueprodpath/’

vue项目运行npm run build打包项目，生成dist文件夹

将dist文件夹放置到E:hlExe ginx-1.20.2html路径下，并将dist文件夹改名为vueprodpath

此时访问http://localhost/vueprodpath/成功展示

4. vue打包项目代理（history模式）

一般而言，正式项目是采用history模式，路由没有丑陋的/#/，显得清爽正常

vue项目中配置路由history模式

vue项目运行npm run build打包项目，生成dist文件夹

将dist文件夹放置到E:hlExe ginx-1.20.2html路径下，并将dist文件夹改名为vueprodpath

nginx.conf文件添加配置

location /vueprodpath {
    try_files $uri $uri/ /vueprodpath/index.html;
}
1
2
3

保存之后，cmd进入nginx路径，执行nginx -s reload操作，即修改配置后重新加载生效

此时访问http://localhost/vueprodpath/temp成功展示

5. react本地服务代理

react项目根目录中package.json文件添加"homepage": "/react/"，项目重启，端口为3000

在路由BrowserRouter标签添加basename="/react" HashRouter模式不用添加

nginx.conf文件添加配置

location /react/ {
    proxy_pass http://127.0.0.1:3000;
}
1
2
3

保存之后，cmd进入nginx路径，执行nginx -s reload操作，即修改配置后重新加载生效

此时访问http://localhost/react 展示成功

6. reac打包项目代理

react项目根目录中package.json文件添加"homepage": "/reactprodpath/"

在路由BrowserRouter标签添加basename="/reactprodpath/" HashRouter模式不用添加

react项目运行npm run build打包项目，生成build文件夹

将build文件夹放置到E:hlExe ginx-1.20.2html路径下，并将dist文件夹改名为reactprodpath

nginx.conf文件添加配置 HashRouter模式不用添加

location /reactprodpath {
    try_files $uri $uri/ /reactprodpath/index.html;
}
1
2
3

保存之后，cmd进入nginx路径，执行nginx -s reload操作，即修改配置后重新加载生效

此时访问http://localhost/reactprodpath 展示成功

7. 后端接口代理

新增一个基于express的node项目，并启动，端口为8555

在nginx.conf文件配置

location /server/ {
    proxy_pass http://127.0.0.1:8555/;
}
1
2
3

执行nginx -s reload操作

此时访问http://localhost/server/user成功展示

参考资料：history模式 nginx配置_history路由模式下的nginx配置

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦