一,了解nginx
1,什么是nginx
1,Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,同时也提供了IMAP/POP3/SMTP服务。
2,Nginx支持热部署,启动简单,可以做到7*24不间断运行。几个月都不需要重新启动。
3,Nginx 处理高并发能力是十分强大的,能经受高负载的考验
4,Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。
2,Nginx的反向代理模式
3,什么是反向代理
客户端本来可以直接通过HTTP协议访问某网站应用服务器,如果我们在中间加上一个Nginx,客户端请求就会服务Nginx,Nginx再去请求应用服务器,然后将结果返回给客户端,此时Nginx就是反向代理服务器。通过反向代理我们就可以隐藏真正的地址值。
二,linux安装nginx
1,安装依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel
2,下载nginx压缩包
# 在线下载nginx安装包,版本自己选择
wget http://nginx.org/download/nginx-1.20.0.tar.gz
也可前往:http://nginx.org/download/ 下载后上传的服务器
3,解压并重命名
解压
tar -zxvf nginx-1.20.0.tar.gz
移动文件到/data(存放路径自己选择) 下并重命名为 nginx
mv nginx-1.20.0 /data/nginx
4,安装nginx
切换nginx的用户和用户组,可以看到用户和用户组变为了root
chown -R root:root /data/nginx
-R:赋予用户读的权限
root:root :表示用户和用户组
进入nginx目录
cd /data/nginx
依次执行安装命令
# --prefix:nginx的安装目录,根据自己需求修改
# -with-http_stub_status_module:表示安装http模块
# --with-http_ssl_module:表示安装ssl模块,需要证书,这里就不安装了
./configure --prefix=/data/nginx --with-http_stub_status_module
make
make install
5,修改配置文件
vim /data/nginx/conf/nginx.conf
将图中位置修改为自己服务器的 ip,如果80端口被占用,可更换端口
6,启动nginx
/data/nginx/sbin/nginx
提示 error.log 和 access.log 不存在
解决方法:在安装目录下创建 logs 文件夹,并 新建 error.log 和 access.log 两个空白文件
cd /data/nginx/
mkdir logs
cd logstouch error.log
touch access.log
再次启动,可以看到nginx已经启动成功
/data/nginx/sbin/nginx
7,开放端口并访问
云服务器在安全组中开放端口
防火墙开放80端口
firewall-cmd --zone=public --add-port=80/tcp --permanent
firewall-cmd --reload
访问服务器ip,如下图则成功。因为http默认端口就是80,所以不要加端口,如果修改了端口就需要加端口
8,将nginx配置为全局的
配置环境变量
vim /etc/profile
# 新增以下内容
export NGINX_PATH=/data/nginx # nginx的安装路径
export PATH=$PATH:${NGINX_PATH}/sbin# 刷新环境
source /etc/profile
常用命令
# 查看版本信息
nginx -v# 查看更多信息
nginx -V
# 启动nginx
nginx# 关闭nginx
nginx -s stop# 重启nginx
nginx -s reload
三,代理vue项目
1,对vue项目进行打包
npm run build
在项目下可以得到一个 dist 文件
2,将 dist 文件上传服务器,记住文件路径
3,修改配置文件
vim /data/nginx/conf/nginx.conf
# 设置全局 dist 的文件目录
root /data/www/dist;
server {
listen 80; # 监听端口
server_name localhost;location / {
# 指定文件的根目录,主要结尾不要带/
try_files $uri $uri/ @router;
# 指定默认跳转页面尾 /index.html,即 /data/www/dist/index.html
index /index.html;
}
# 解决刷新页面 404 问题
# 对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件,因此需要rewrite(重定向)到index.html中,然后交给路由在处理请求资源 location @router {rewrite ^.*$ /index.html last;
}
# 6、这里是解决跨域问题,将你后端的地址写在proxy_pass 后面就可以了,/api是vue.config.js中的proxy声明的
location /api {
# 下面这行也要改为api
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://localhost:8080/; # 后端部署的地址,后面加 /后,api不会拼接到代理地址上。
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
上面的配置可能出现格式错误,直接复制下面的代码
location @router {
rewrite ^.*$ /index.html last;
}
location /api {
rewrite ^.+api/?(.*)$ /$1 break;
proxy_pass http://localhost:8080/;
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
4,重启nginx
nginx -s reload
直接访问ip即可查看自己的项目了,当然我这里是因为项目什么都没写。
大功告成,圆满结束!!!