前后端分离之前端部署(nginx多多端口配置)

摘要:
这里我们只讨论nginx-nginx是什么。请自行搜索。这里我们描述如何为多个nginx配置多端口映射。

如果vue项目最终打包生成了一个dist文件夹,那我们应该怎么处理这个文件夹呢?有两种思路:

一、非完全前后端分离项目

  我们可以自己在本地开发,使用后端的接口,开发完成后,我们将打包生成的dist文件夹丢给后端,依赖后端部署,反正都是静态文件,只是最终和后端放一个服务器了。

二、完全前后端分离项目

  我们可以自己在本地开发,使用后端的接口,开发完成后,我们将打包生成的dist文件夹丢给自己的静态文件服务器。

  然后问题来了,我们该怎么搭建自己的静态文件服务器呢?

  这里我们只讨论nginx

  nginx是什么请自行搜索,我们这里讲述如何配置多个nginx的多端口映射。

步骤如下:

1、首先你得有个nginx的环境吧,这很简单,从官网随便下载一个nginx就好了,解压后如下

  前后端分离之前端部署(nginx多多端口配置)第1张

2、打开conf文件夹,在里面新建一个conf.dev文件夹,这里存放每个开发人员自己nginx配置及默认的nginx配置

  如下,我在conf.dev文件夹下面新建了一个配置文件:demo.conf,这个文件里面注意的有:端口号,域名,域名及端口指向的静态文件根目录,及一些路由映射关系

  前后端分离之前端部署(nginx多多端口配置)第2张

3、修改主配置文件如下,这里主要是将默认的server配置移除,以及从conf.dev文件夹引入所有配置文件,移除了可不能丢啊,得找个地方放

  前后端分离之前端部署(nginx多多端口配置)第3张

4、在conf.dev文件夹下新建默认的server文件

  前后端分离之前端部署(nginx多多端口配置)第4张

  可以看到,这里是将主配置文件中的server配置拉过来了

5、根目录建立demo文件夹

  别忘了我们的设置

  前后端分离之前端部署(nginx多多端口配置)第5张

  demo里面随便存放一个index.html

6、重启nginx

7、配置host文件(127.0.0.1为test.demo.com),不会的可以参考我的配置host文件步骤。

  访问:"test.demo.com:7777/",就能看到你的index.html内容啦。

 

  

 

  

 

  

 

 

  

免责声明:文章转载自《前后端分离之前端部署(nginx多多端口配置)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Hive入门C#常见错误解决方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Nginx配置https兼容http

现象 如果一个https站点里面有引用一些http的静态资源,图片可以正常加载,但是js文件、css文件就会加载失败,如下图: 原因 为了解释这个问题,首先要理解一下Mixed Content的概念:HTTPS 网页中加载的 HTTP 资源被称之为 Mixed Content(混合内容),不同浏览器对 Mixed Content 有不一样的处理规则。 忽...

前端工程化,组件化,模块化,层次化

个人认为:前端发展的导向是前端工程化,智能化,模块化,组件化,层次化。 一个项目的开发逐渐在人工智能+物联网的时代,走向以下的五化     原因: Web前端页面的开发必然与DOM进行交互操作,前端框架的一次次更新,是从满足目前的业务需求到提升效率的阶段,慢慢走向改善性能的阶段(开发和部署环境优化,代码优化,网站性能优化,数据优化,页面优化等等)。 1.前...

Debian 环境安装新版 nginx

在 Debian 系统中,我们可以通过 apt-get 安装系统自带的 nginx,这样安装的 nginx 版本略旧。Nginx 官网提供了一些编辑绎好的 deb 安装包,我们只需更新安装源,就可以通过 apt-get 来安装最新的稳定版 Nginx 了。  加载安装源并导入key $ echo deb http://nginx.org/packages...

二、Nginx配置实例

Nginx配置实例 一、反向代理 实例一 1、实现效果 打开浏览器,在浏览器地址栏输入地址 www.123.com ,跳转到linux系统tomcat主页面中。 2、准备工作 在linux系统中安装tomcat,使用默认端口8080 3、访问过程分析 在浏览器地址栏输入地址,请求nginx反向代理服务器,nginx帮助我们将请求转发到linux中的tomc...

linux 命令收集 阿里云nginx升级等 查看磁盘空间 版本等

—————————————————— 查磁盘 df -h此命令直观的呈现出磁盘大小有多少Gdf -hl文件系统 容量 已用 可用 已用% 挂载点/dev/hdb2 75G 75G 0 100% /就是HD硬盘借口的第二个硬盘(b)上,里面的第二个分区(2),容量是75G,用了75G,可用是0,因此利用率是100%, 他被挂载到根分区目录上(/)。 http...

71款开源项目

71款开源项目 百度,一家让人既爱又恨的企业,血友吧贴吧被卖,魏则西事件的持续发酵,一时间将百度推到了舆论的风口浪尖上。是非对错,我们在这里也不多做评判,本文呢为大家整理了百度开源的70+项目,看看有没有感兴趣的。本文内容综合整理自oschina、github。 1. JavaScript图表库 ECharts ECharts开源来自百度商业前端数据可视化...