Nginx 部署前端项目 - 附完整示例_nginx部署前端项目

基于目前的项目大多都是前后端分离，在前端想看打包后的效果且不借助于部署在服务器的情况下，我们可以使用nginx部署前端项目。

目录

一、Nginx

1、官方文档

2、官方下载

3、解压压缩包

二、启动Nginx

1、在conf目录中的nginx.conf文件内查看默认端口，IP地址等信息

2、这里我们将端口号改为88，也可以不改（可选）

3、选中nginx.exe右键打开

4、打开浏览器，输入 http://localhost:88并回车，成功啦！

三、配置反向代理

1、例如：修改nginx.conf配置文件，配置location中proxy_pass指向YSL官网。

2、选中nginx.exe右键点击打开

3、在浏览器输入http://localhost:88并回车

四、Nginx上部署前端项目

1、打包项目

2、选中nginx.exe右键点击打开

3、在浏览器输入http://localhost:88并回车

一、Nginx

1、官方文档

nginx

nginxhttps://nginx.org/

2、官方下载

nginx: download

nginx: downloadhttps://nginx.org/en/download.html

注：选择与电脑系统版本一致的稳定版下载

3、解压压缩包

将下载的压缩包解压，存放Nginx的文件夹最好不要使用中文，可能会有报错！

二、启动Nginx

1、在conf目录中的nginx.conf文件内查看默认端口，IP地址等信息

2、这里我们将端口号改为88，也可以不改（可选）

3、选中nginx.exe右键打开

4、打开浏览器，输入 http://localhost:88并回车，成功啦！

三、配置反向代理

1、例如：修改nginx.conf配置文件，配置location中proxy_pass指向YSL官网。

// 这行代码代表请求会代理到 https://www.yslbeautycn.comproxy_pass https://www.yslbeautycn.com;

注意：proxy_pass后面跟的是两个空格，且写完配置项句尾需要以【;】结尾

2、选中nginx.exe右键点击打开

3、在浏览器输入http://localhost:88并回车

四、Nginx上部署前端项目

1、打包项目

        这里以Vue项目作为示例，在编辑器的终端运行npm run build即可，打包完成后项目中会多出一个dist文件夹。需要先将nginx文件夹下的html文件夹中的全部内容删除，再将dist文件夹中的全部内容都复制粘贴到nginx文件夹下的html文件夹中。

2、选中nginx.exe右键点击打开

3、在浏览器输入http://localhost:88并回车

注：nginx文件夹下的内容发生变化并且需要再浏览器看效果就需要重复以上两个步骤

涉及更多nginx相关的知识请看下方的参考链接

参考：Nginx基本使用以及部署前端项目_nginx启动前端项目-CSDN博客