Nginx+Vue作为静态资源服务器配置及使用

前言:做一个有梦想的程序猿!

前言

最近项目用的前后端分离架构,后端用的SSM,前端用的Vue,但是在访问网站中发现首页一些地图及图表插件加载渲染异常缓慢,因为首页布局东西比较多,之前也对无用的js文件做过处理,但是效果还是不理想,后来就想到使用Nginx来做代理,毕竟Nginx在静态文件处理上是非常专业的,只用node.js作为逻辑服务器就好了,经过部署测试,首页加载的速度远远快于之前的速度。

Nginx是一个功能非常强大的web服务器加反向代理服务器,同时又是邮件服务器等等,在项目使用中,使用最多的三个核心功能是反向代理、负载均衡和静态服务器,这里主要介绍作为静态资源服务器的使用及配置。

编译安装Nginx

  1. 下载nginx安装包
    wget http://nginx.org/download/nginx-1.8.0.tar.gz;
  2. 解压
    进入目录进行解压:tar -zxvf nginx-1.8.0.tar.gz,
  3. 安装依赖
    进入解压后的nginx目录:cd nginx-1.8.0
    执行命令:

yum install -y pcre pcre-devel openssl openssl-devel gcc gcc gcc-c++ ncurses-devel perl

  1. 编译前配置
    为了能使nginx支持SSL,指定默认的启动用户

./configure --prefix=/usr/local/nginx --user=root --group=root–with-http_stub_status_module --with-http_ssl_module

  1. 编译安装
    执行命令: make 后执行: make install

Nginx相关命令

启动nginx
service nginx start
停止nginx
service nginx stop
重启nginx
service nginx restart
重新加载nginx配置文件
service nginx reload

nginx主要相关目录

nginx目录
/usr/local/nginx
nginx服务器初始配置文件
/usr/local/nginx/nginx.conf
自定义服务器配置目录,这个目录手动创建,存放nginx配置文件,便于后期维护
/usr/local/nginx/conf.d
默认日志目录
/var/log/nginx

Nginx配置文件

  1. 在本地编写好服务器配置文件iot.conf
server {
    # 监听的端口
    listen       8081;
    # 匹配的域名,由于本项目用ip访问的,所以这个注释掉也没问题
    server_name  10.12.2.53;

    # 输出的日志
    #charset koi8-r;
    access_log  /var/log/nginx/iot.access.log  main;
    # /url路径下代理到的地址,这里代理到静态html文件
    location / {
        # root 网站的根目录,前端项目部署的文件根目录
        root   /home/iot/html;
        # index 网站的入口文件
        index  index.html index.htm;
        # add_header 'Access-Control-Allow-Origin' '*';
    }
    # /iot/后的url路径下代理到的地址,这里代理到后端接口服务器
    location ^~ /iot/ {
        proxy_pass http://10.12.2.60:9999;
        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;
        #client_max_body_size 100m;
    }  
    error_page  404              /404.html;
}
  1. 然后将iot.conf这个配置文件上传到/usr/local/nginx/conf.d这个目录下
  2. 进入nginx初始配置文件将 iot.conf 文件引进来,vi /usr/local/nginx/conf/nginx.conf ,在文件末尾添加:
     #导入外部服务器配置文件存放地址
    include /usr/local/nginx/conf.d/*.conf;
    }

保存退出
4. 重新加载nginx配置文件或者重启nginx服务都行
service nginx reload

service nginx restart

部署前端Vue项目

本地打包编译前端代码并上传到nginx中 iot.conf配置的目录: /home/iot/html,步骤如下:

  1. vue前端项目执行命令
    npm run build
    打包编译出来的代码在dist文件夹下面
  2. 压缩编译出来的代码成dist.tar.gz/dist.zip
    如果centos服务器没有/home/iot/html这个目录,则需要创建一下目录
  3. 将压缩文件上传到/home/iot/html这个目录下并解压
    cd /home/iot/html
    tar -xzvf dist.tar.gz 或 unzip dist.zip
  4. 解压完成之后,即可输入ip地址访问前端项目

可能出现的问题

如果部署完成,浏览器访问,nginx提示403,查看/var/log/nginx/error.log路径下的日志,发现报错Permission denied,则是当前启动nginx的用户没有权限操作这些文件导致的
修改nginx默认配置文件,把启动用户改成root即可,nginx默认启动用户是nginx,当然,你也可以创建个新的用户来管理nginx。
vi /usr/local/nginx/conf/nginx.conf
找到user nginx;
改成 user root;
保存,重启nginx服务即可
service nginx restart

最后,如果本篇文章对您有所帮助,可以评论或点赞支持一下哦,感谢感谢!

在这里插入图片描述

nginxvue可以一起使用部署前端应用。以下是一种常见的配置方法: 1. 首先,确保你已经安装了NginxVue CLI。 2. 在Vue项目的根目录下,使用命令行工具运行`npm run build`,这将生成一个dist目录,包含了编译后的静态文件。 3. 打开Nginx配置文件,一般位于`/etc/nginx/nginx.conf`或`/etc/nginx/conf.d/default.conf`。 4. 在`http`块中添加一个新的`server`块,配置Vue应用的代理和静态文件路径。示例配置如下: ``` server { listen 80; server_name your_domain.com; location / { root /path/to/vue_project/dist; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://your_backend_server; } } ``` - `listen 80;`:指定Nginx监听的端口,可以根据需要修改。 - `server_name your_domain.com;`:指定你的域名或IP地址。 - `root /path/to/vue_project/dist;`:指定Vue项目编译后的静态文件所在的路径。 - `try_files $uri $uri/ /index.html;`:配置前端路由,使得任意路由都返回index.html,以便Vue应用处理路由跳转。 - `location /api/`:配置后端接口代理,将以`/api/`开头的请求转发到你的后端服务器。 5. 保存并关闭Nginx配置文件。 6. 重启Nginx服务,使配置生效。使用命令`sudo service nginx restart`或`sudo systemctl restart nginx`。 现在,当访问你的域名或IP地址时,Nginx会将请求转发到Vue应用,并将静态文件提供给浏览器。同时,以`/api/`开头的请求将被代理到你的后端服务器。请根据你的实际情况进行适当的修改。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值