最详细版-linux安装nginx并代理vue项目（图文教程）

一，了解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 logs

touch 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即可查看自己的项目了，当然我这里是因为项目什么都没写。

大功告成，圆满结束！！！