Nginx的安装与配置
Nginx官网下载所需版本安装
解压下载好的nginx
修改nginx配置文件,配置文件为conf下的nginx.conf,修改nginx.conf中的server配置片段
里面的相关注释是在是太多了,那么我把所有的注释清除一下(这是方便看清nginx配置到底需要什么基础的配置)
worker_processes 1; ##指明了nginx要开启的进程数,不用修改,但考虑到实际情况,可以修改这个数值,以提高性能
events {
worker_connections 1024;##最大连接数
}
####设置http服务器
http {
server_names_hash_bucket_size 64; #扩大缓存
include mime.types; ##文件扩展名与文件类型映射表
default_type application/octet-stream; ##默认文件类型
sendfile on; ##开启文件高效传输模式防止网络及磁盘I/O阻塞,提升Nginx工作效率
keepalive_timeout 65; ##超时时间
upstream test { #服务器集群名字
ip_hash;
server 47.111.111.111:8180 ; #api接口端口配置
}
#虚拟主机
server {
listen 80; ##表示的项目所占用的端口
server_name localhost; ##项目域名或者ip
location / {
root html; #表示你的项目文件所处于的位置,在windows下面表示的是与conf目录处于同一级
index index.html index.htm; #默认打开index.html
}
location /api {
add_header 'Access-Control-Allow-Origin' '*';#添加接口跨域
proxy_pass http://test; #服务器集群名字
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
error_page 404 /index.html; #这个配置,预防页面刷新后跳转到404页面
}
####如果包含多个项目,只需要多写一个server即可,注意server_name不能相同
}
直接双击nginx.exe运行(会有个黑块一闪而过,正常现象)
也可以使用命令运行 首先要切换到nginx的目录中
启动:start nginx.exe
停止:nginx.exe -s stop
重新加载:nginx.exe -s reload
测试nginx是否正常运行
浏览器输入server_name配置的地址加80 ,显示welcome,已经配置成功
vue项目打包部署
npm run build
项目打包完成后,将dist文件夹部署服务器,
修改nginx 配置文件中的 location
location / {
root E:/workSpace/**/dist; #写入你部署文件夹路径
index index.html index.htm; #默认打开index.html
}
每次配置完都要 重新加载nginx:nginx.exe -s reload
再次访问配置好的地址加80即可访问到对应的vue项目
注:
1,域名解析ip需要和部署nginx的服务器ip相同。
2,与tomcat并存施,会提示80端口被占用,解决方案改变tomcat端口号,微信环境下只支持80端口。