应用八:Vue之在nginx下的部署实践
最近有时间研究了下前端项目如何在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下的部署实践的更多相关文章
- vue项目windowServer nginx下部署
https://www.cnblogs.com/jiangwangxiang/p/8481661.html nginx下载地址 http://nginx.org/en/download.html 下载 ...
- Nginx HTTPS功能部署实践
本文出处:http://oldboy.blog.51cto.com/2561410/1889346 30.1 文档目的 本文目的提高自己文档的写作能力及排版能力,加强上课所讲的内容得以锻炼也方便自己以 ...
- 滴滴推理引擎IFX:千万规模设备下AI部署实践
桔妹导读:「滴滴技术」将于本月开始,联合各技术团队为大家带来精彩分享.你想了解的技术干货,深度专访,团队及招聘将于每周三与你准时见面.本月为「滴滴云平台事业群分享月」,在今天的内容中,云平台事业群-机 ...
- Vue Cli 3.x项目如何部署到IIS子站点下
Vue Router在IIS下的部署参考:https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB% ...
- vue 在nginx下页面刷新出现404问题解决和在nginx下页面加载了js但是页面显示空白问题解决
一.vue 在nginx下页面刷新出现404 在网上翻遍了所有这样问题的解决办法,全都是一个解决办法也是正确的解决办法,(后来在vue官网上关于history方式出现404解决方法也是这样说的),只是 ...
- 解决Vue项目打包之后放到nginx下刷新就报错404的问题
最近跟着某机构的教学视频敲了一遍vue项目,但是在windows环境下部署的时候就懵逼了放到nginx下正常跑没问题,但是刷新之后就报404错误 前端项目构建vue 脚手架版本 是@vue/cli 4 ...
- nginx~linux下的部署
一些概念 Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄 ...
- nginx下根据指定路由重定向
前言: 最近在搭建vue后台,后端接口是PHP写的,线上构建好之后,需要请求其他域名下的接口,开发环境已经使用proxytable解决了接口问题,为了开发和生成的代码一致, 编译后的代码,放在ngin ...
- ThinkJS前端搭配vue时的Nginx配置
Thinkjs 作为奇舞团开源的nodejs mvc框架之一,引起了很多NodeJS程序员的亲赖.但是其关于静态文件处理部分支持不够完善,主要是体现在SPA单页应用,之前在ThinkJS 2.*版本时 ...
随机推荐
- 在Eclipse中添加Tomcat
在Eclipse中开发web或开启web服务需要Tomcat的支持,在添加Tomcat之前要清楚你的Eclipse版本,如果你的Eclipse是javvEE版的就可以直接安装Tomcat,如果不是就需 ...
- Spark day05
Shark Shark是基于Spark计算框架之上且兼容Hive语法的SQL执行引擎,由于底层的计算采用了Spark,性能比MapReduce的Hive普遍快2倍以上,当数据全部load在内存的话,将 ...
- maven的配置和使用
Maven 简介 1.1 Maven 是什么 翻译为“专家”,“内行” Maven是跨平台的项目管理工具.主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.2 为什么使用Maven ...
- 基于jQuery的自定义滚动条
在线演示 本地下载
- 洛谷2254 BZOJ1499 瑰丽华尔兹题解
洛谷链接 BZ链接 一个很容易想到的做法就是用f[i][j][t]表示t时刻在i,j处的可以滑动的最大值 f[i][j][t]=max(f[i][j][t-1],f[*i][*j][t-1]),这样大 ...
- Effective Modern C++:05右值引用、移动语义和完美转发
移动语义使得编译器得以使用成本较低的移动操作,来代替成本较高的复制操作:完美转发使得人们可以撰写接收任意实参的函数模板,并将其转发到目标函数,目标函数会接收到与转发函数所接收到的完全相同的实参.右值引 ...
- 安装vagrant&virtualBox
https://blog.csdn.net/dream_188810/article/details/78218073 VirtualBox是一款开源免费的虚拟机软件(之前一直使用vm,vm功能较多, ...
- thinkphp5.0 composer安装phpmailer
1.安装:composer require phpmailer/phpmailer 2.引入:use PHPMailer\PHPMailer\PHPMailer: 3.调用:$mail = new P ...
- @loj - 2434@ 「ZJOI2018」历史
目录 @description@ @solution@ @accepted code@ @details@ @description@ 九条可怜是一个热爱阅读的女孩子. 这段时间,她看了一本非常有趣的 ...
- LeetCode74 Search a 2D Matrix
Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the follo ...