最近有时间研究了下前端项目如何在nginx服务器下进行部署,折腾了两天总算有所收获,汗~~

所以就想着写篇文章来总结一下,主要包括以下三个方面:

1、打包好的vue项目如何进行部署。

2、如何反向代理后端服务接口。

3、vue项目二级访问目录在nginx下的配置。

说明:nginx服务器的安装及vue项目如何进行打包不在本文的讨论范围,后面的所有实践说明都是基于个人的本地服务,和项目真实的应用环境稍微有点差别(其实这点差别可以忽略)。

一、如何部署vue项目。

假设我们打包好的项目地址为:d:\demo\dist,然后在nginx安装目录下的conf文件夹中找到配置文件nginx.conf并用文本打开,在配置文件的http模块内加入以下配置

server {
listen 8011;
server_name 127.0.0.1; location / {
root D:\demo\dist;
try_files $uri $uri/ @router;
index index.html index.htm;
}
}

大家可能会看到http模块下已经存在server模块,但这个并不影响,因为server模块可以配置多个;其中listen是自定义的端口号,server_name一般都是nginx服务器的IP,最关键的是在location的root属性配上打包好的项目地址,index属性对应的是默认的页面名称;配置完成后启动nginx服务,通过http://127.0.0.1:8011就可以访问到我们的项目页面。

在上述配置完成后我们虽然可以访问到项目页面,但通常由于跨域等原因导致后台接口却无法调通,这时我们可以使用nginx代理来解决。具体操作是前端所有请求都使用相对地址,假设都以“/api”开头,说明一下“/api”并不是接口URL中真实存在,只是为了统一代理才加上的,然后在上述server模块中添加以下配置

location /api/ {
rewrite ^/api/(.*) /$1 break;
proxy_pass http://10.10.10.10:9001;
}

属性proxy_pass对应的就是后台服务地址,然后重启nginx服务后整个项目运行正常。

二、后端服务接口的代理配置。

先看下面这段配置

server {
listen 8012;
server_name 127.0.0.1; add_header Access-Control-Allow-Origin * always;
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS always;
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,x-auth-token always;
add_header Access-Control-Max-Age 1728000 always; if ($request_method = OPTIONS) {
return 304;
} location / {
proxy_pass http://10.10.10.10:9001;
}
}

http://127.0.0.1:8012就可以作为后台服务地址的一个代理地址,中间的那些配置是用来处理跨域问题,这样就可以使用nginx代理地址来解决前文提到的接口调不通的问题。

nginx反向代理的另一个应用场景就是针对于微服务开发,也就是后台有多个服务地址的情况,我们可以使用nginx把多个地址映射到同一个IP+端口下,假如后台有三个微服务地址配置如下

server {
listen 8012;
server_name 127.0.0.1; location /u1/ {
proxy_pass http://10.10.10.10:9001/;
} location /u2/ {
proxy_pass http://10.10.10.10:9002/;
} location /u3/ {
proxy_pass http://10.10.10.10:9003/;
}
}

前端项目就可以通过http://127.0.0.1:8012/u1的方式访问后台请求,需要注意的是proxy_pass的配置地址必须以“/”结尾。

三、如何配置vue项目的二级访问目录

一开始个人的想法是仍然按照前文提到的先部署好vue项目,然后再配置一次代理,添加二级目录代理访问已部署好的项目地址,具体配置如下

server {
listen 8013;
server_name 127.0.0.1; location /test/ {
proxy_pass http://127.0.0.1:8011/;
}
}

想着通过http://127.0.0.1:8013/test/就可以访问到我们之前部署好的项目,但事实并非如此,囧~

其实思路并没有错,只是少了点配置(不是nginx的配置,而是vue项目的配置),首先需要给vue项目路由添加“base”字段,

然后在打包时要修改“assetsPublicPath”字段值,vue-cli3对应“publicPath”字段,

配置完成后重新打包,就可以通过http://127.0.0.1:8013/test/正常访问项目了。

应用八:Vue之在nginx下的部署实践的更多相关文章

  1. vue项目windowServer nginx下部署

    https://www.cnblogs.com/jiangwangxiang/p/8481661.html nginx下载地址 http://nginx.org/en/download.html 下载 ...

  2. Nginx HTTPS功能部署实践

    本文出处:http://oldboy.blog.51cto.com/2561410/1889346 30.1 文档目的 本文目的提高自己文档的写作能力及排版能力,加强上课所讲的内容得以锻炼也方便自己以 ...

  3. 滴滴推理引擎IFX:千万规模设备下AI部署实践

    桔妹导读:「滴滴技术」将于本月开始,联合各技术团队为大家带来精彩分享.你想了解的技术干货,深度专访,团队及招聘将于每周三与你准时见面.本月为「滴滴云平台事业群分享月」,在今天的内容中,云平台事业群-机 ...

  4. Vue Cli 3.x项目如何部署到IIS子站点下

    Vue Router在IIS下的部署参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB% ...

  5. vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决

    一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...

  6. 解决Vue项目打包之后放到nginx下刷新就报错404的问题

    最近跟着某机构的教学视频敲了一遍vue项目,但是在windows环境下部署的时候就懵逼了放到nginx下正常跑没问题,但是刷新之后就报404错误 前端项目构建vue 脚手架版本 是@vue/cli 4 ...

  7. nginx~linux下的部署

    一些概念     Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄 ...

  8. nginx下根据指定路由重定向

    前言: 最近在搭建vue后台,后端接口是PHP写的,线上构建好之后,需要请求其他域名下的接口,开发环境已经使用proxytable解决了接口问题,为了开发和生成的代码一致, 编译后的代码,放在ngin ...

  9. ThinkJS前端搭配vue时的Nginx配置

    Thinkjs 作为奇舞团开源的nodejs mvc框架之一,引起了很多NodeJS程序员的亲赖.但是其关于静态文件处理部分支持不够完善,主要是体现在SPA单页应用,之前在ThinkJS 2.*版本时 ...

随机推荐

  1. WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放

    WinForm 实现主程序(exe)与其关联类库(*.dll)分开存放    开发环境:   Microsoft Windows 7 SP1 Microsoft.NET Framework 4.0 ( ...

  2. Directx11教程(16) D3D11管线(5)

    原文:Directx11教程(16) D3D11管线(5) 本章我们学习VS中具体做些什么事情? 首先再看看我们的VS shader代码: Clolor.vs - PixelInputType Col ...

  3. KiCad EDA 如何修改 Pcbnew 线路板的背景色?

    KiCad EDA 如何修改 Pcbnew 线路板的背景色? 关于背景色,传统的原理图是白色,线路板是黑色. EDA 软件 类型 颜色 Protel 原理图 浅黄色 Protel PCB 黑色 Orc ...

  4. spring自动扫描的注解@Component @Controller @Service @Repository

    @Component @Controller @Service @Repository的作用 1.@controller 控制器(注入服务)2.@service 服务(注入dao)3.@reposit ...

  5. 洛谷 P1119 灾后重建 最短路+Floyd算法

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 总结 题面 题目链接 P1119 灾后重建 题目描述 B地区在地震过后,所有村 ...

  6. eclipse Some projects cannot be imported because they already exist in the workspace

    archive file 档案文件 删除对应的文件即可

  7. 基于日志服务的GrowthHacking(1):数据埋点和采集(APP、Web、邮件、短信、二维码埋点技术)

    数据质量决定运营分析的质量 在上文中,我们介绍了GrowthHacking的整体架构,其中数据采集是整个数据分析的基础,只有有了数据,才能进行有价值的分析:只有高质量的数据,才能驱动高质量的运营分析. ...

  8. 应用中弹出 WiFi 提示框的方法

    如果 iOS 程序中用到了 WiFi,想有 WiFi 提示,只需要在 .plist 文件中加入如下 Key/Value 即可: 键名:ApplicationusesWi-Fi 值:YES 键名:SBU ...

  9. ansible基础☞第一条命令

    我的两个测试机: 系统: ubuntu 16.04.2 ansible-master: 192.168.0.107 ansible-slave: 192.168.0.108 ansible版本: ro ...

  10. python print函数