nginx本地配置web项目-layui
nginx安装配置以及配置本地web项目
nginx下载和安装介绍
nginx(engine x) 是一个高性能的HTTP和反向代理web服务器,其他的介绍自己百度去看
下载https://nginx.org/en/download.html
下载之后是压缩包,解压,然后放到本地电脑你想存放的地址
解压之后内容
基本就这样
运行nginx
上面的图双击nginx.exe 之后会感觉到有个东西快速的闪一下,这就是运行成功了,想要查看可以ctrl+alt+del快速打开任务管理器去查找一下
这样说明运行成功了
同样也可以使用cmd命令运行
在nginx目录右键Git base Here 或者运行Windows PowerShell
然后start nginx 这是启动命令 如果启动不了,使用管理员启动命令面板
start nginx 启动服务
nginx -s reload 这是重新启动命令
nginx -s stop 停止服务
以上就是nginx的基本操作,我刚接触这个,如果想更深入的学习,请自行去查阅nginx文档
nginx配置web项目
在nginx解压包里有个conf文件夹,打开找到nginx.conf文件,可以在编辑器中打开,我使用vsCode
nginx.conf
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 80;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
server {
listen 9091;
server_name localhost;
root E:\worker\kaoshi-ui;
index index.html index.htm;
location /api {
# http://XXX线上域名
proxy_pass http://XXX;
# proxy_set_header Host $host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
}
上面第二个serve{}里面配置的就是我本地项目需要的
listen 就是端口号
server_name 是本地服务域名,自行设置,可以是别的
root 是本地web项目存放地址
index 是本地项目启动页
location 这里就是需要代理的线上域名http://XXX/api
这里的location配置的类似于vue项目中的vue.config.js中的proxy。
然后还有配置得root,看很多文章写的需要放到nginx解压包目录下,我不知道是nginx版本得问题还是别的什么,反正我做的时候是放在其他的目录,看上面例子项目我放在E盘的,nginx解压包我放在了D盘。
devServer: {
// development server port 8000
port: 8000,
// If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
proxy: {
'/api': {
target: 'http://XXX',
ws: false,
changeOrigin: true,
}
},
},
基本配置就这样,如果还需要更深入的知识点,请各位自行查找nginx文档
最后,浏览器访问的时候
web项目目录
浏览器访问localhost:9091
最后给个温馨提示,修改nginx.conf文件 需要重新启动nginx。任务管理器结束nginx任务,然后再双击nginx.exe 或者cmd运行nginx -s reload,再或者先nginx -s stop 然后再start nginx
有的同学运行nginx -s reload会报错,可是试试.\nginx -s reload 和.\nginx -s stop
最后再提一句,有的文章说需要修改host文件"C:\Windows\System32\drivers\etc"路径大概是这个,不知道是nginx版本问题还是什么,我当时也设置了host文件的配置,但是后来nginx配置成功之后,删除了host配置一样没什么问题。如果有不成功的小伙伴可以试试配置这个,具体配置方法自行百度查下host配置吧,我对这个不太了解。nginx本身就是一个反向代理的,配置文件location配置了需要代理的域名,我自己觉得就不需要再去搞什么host配置了,多此一举。
基本就到这里了,再会~