nginx发布npm run build之后的dist文件夹

简要说明:

在学习vue+gin的时候,需要将前端通过nginx发布,debug的时候是用npm run serve来测试的,在mac或windows上直接打开浏览器,但是在真正的服务器上你就必需要使用nginx来发布了。

nginx简介:

nginx怎么安装我就不多说了简单点apt或者dnf就行,systemctl restart nginx重启;nginx -s reload重载配置文件等这些简单的买命令网上可以直接找到。配置文件一般存储在/etc/nginx/nginx.conf这是默认配置文件, 第一行改成自己的用户root,本身应该是www-user(很重要)。下面我给出的配置文件都是在/etc/nginx/conf.d/目录下的,在conf.d目录下的所有配置文件都会被读取。因为在/etc/nginx/nginx.conf中会写入include /etc/nginx/conf.d/*.conf。

反向代理:

简单点说,当nginx发布一个前端端口之后,通过这个端口可以访问我们写的网页,然而这个网页js等代码需要获取后端的数据,去更新网页的信息,那么应该从哪里去获取或者存储数据库里面的信息呢?那么就需要配置具体的后端地址,ip+port,写入nginx配置里面,nginx可以聪明的将接口访问均匀的分配各个服务器,这就是nginx反向代理。

配置文件:

server {
    listen  8080;
    location / {
    root /root/workspace/gin-vue-dist;
    index index.html index.htm;
try_files $uri $uri/ /index.html;
    }

   location /v1 {
      proxy_set_header X-Real-IP $remote_addr;
      proxy_pass http://127.0.0.1:8888;
      rewrite  ^.+v1/?(.*)$ /$1 break;
   }
}

注意一定要注意你前端代码里面设置的接口前缀是什么,比如我这边是v1,之后就要在location后面加v1表示截获前端过来的v1前缀的接口,
rewrite  ^.+v1/?(.*)$ /$1 break;则表示实际请求到后端的时候需要把这个v1给去掉
后端地址127.0.0.1::8888
具体情况一定要分析浏览器访问的接口是什么,然后后端起的接口是什么,否则能起界面但是访问不了接口。

附文件服务器配置:

server {
    listen  27878;
    client_max_body_size  51200m;
    client_body_temp_path  /root/workspace/fileserver;

    location / {
        charset  utf-8;
        if ($query_string) {
            expires  max;
        }
        alias  /root/workspace/fileserver/;
        autoindex  on;
        autoindex_localtime  on;
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值