Nginx部署前后端项目

已于 2022-02-28 14:07:23 修改
阅读量4k 收藏 8
点赞数
分类专栏： 部署 文章标签： nginx 运维
于 2021-11-10 11:04:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42383970/article/details/121243847
版权

1.背景：

前后端分离的项目在本地开发环境下，node已经做了代理，所以不存在跨域问题，但是打包完之后此代理就失效了（毕竟每个机器也不能装个node），所以就要考虑如何部署了，我们之前投机取巧将后端服务和前端服务放在了一个tomcat下，固定写死后台绑定的地址，也能实现，但是多服务下，貌似就不可行了，所以还是得用代理

2.前端服务

首先将前端服务打包，放在nginx的html目录下

我是放了一个文件夹进去，也就是访问的时候会有netseal前缀

3.后端地址

后端地址直接运行起来就ok，我本地测是放在tomcat下 运行的

4.Nginx配置文件配置

找到此配置文件，编辑配置文件

Nginx配置多端口多项目：nginx 一个端口部署多个vue项目（反向代理） - 丶木木丶丶 - 博客园

即将头秃的程序媛
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
瑞吉外卖项目部署
weixin_69413377的博客
07-22 3262
瑞吉外卖 项目部署
部署前后端分离式nginx配置的完整步骤
09-29
主要给大家介绍了关于如何部署前后端分离式nginx配置的完整步骤，文中通过示例代码介绍的非常详细，对大家学习或者使用nginx具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
如何在linux服务器上用Nginx部署Vue项目，以及如何部署springboot后端项目
qq_44657940的博客
03-13 2422
本文内容记录如何在Linux(Ubuntu)系统上安装Nginx，并部署打包好的Vue前端项目，最后通过浏览器访问。提示：以下是本篇文章正文内容，下面案例可供参考这样前后端项目就都部署运行了。不给过最初还得安装好数据库等一些项目中应用到的软件,才能使得项目正常运行。
使用Nginx部署Vue+SpringBoot前后端分离项目(超详细！)
热门推荐
飞翔的企鹅的博客
09-28 2万+
需要的工具：Xshell 连接远程服务器、Xftp 服务器文件可视化。
【超详细】前后端项目部署(原始Nginx+SpringBoot)
最新发布
Delinquencykee的博客
06-20 954
前后端项目部署（原始Nginx+SpringBoot）
【Linux】关于Nginx的详细使用，部署项目
m0_73647713的博客
11-02 427
Nginx是一个高性能的开源Web服务器和反向代理服务器。它最初由Igor Sysoev在2004年开发，旨在解决C10k问题（即同时处理成千上万个并发连接）。Nginx以其出色的性能、可靠性和灵活性而备受欢迎，并被广泛用于构建高流量的网站、应用程序和服务。高性能：Nginx采用了事件驱动架构，能够高效地处理大量并发连接。它通过使用异步非阻塞I/O模型，有效地管理系统资源，使得请求的响应时间更短且吞吐量更高。反向代理：Nginx可以作为反向代理服务器，将客户端请求转发到后端服务器，并将响应传递回客户端。
linux+nginx+tomcat+vue+后端项目部署
ysfengshu的博客
09-22 958
nginx安装 1.先安装依赖 yum -y install gcc gcc-c++ autoconf automake yum -y install PCRE pcre-devel yum -y install zlib zlib-devel yum -y install openssl openssl-devel 2.安装nginx cd /usr/local/source wget http://nginx.org/download/nginx-1.9.0.tar.gz ...
前后端部署+nginx配置
weixin_46186045的博客
08-09 7827
内容主要包括部署前端项目，nginx安装配置，以及后端项目的打包
详解基于Vue，Nginx的前后端不分离部署教程
10-17
主要介绍了详解基于Vue，Nginx的前后端不分离部署教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nginx代理同域名前后端分离项目的完整步骤
01-08
通过域名后的 url 前缀来区别前后端项目。 以 vue + php 项目为例。直接上 server 模块的 nginx 配置。 server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name demo.com; # 配置项目...
Tomcat+Nginx反向代理部署前后端分离项目解决跨域问题
02-24
最近自己做了一个前后端分离项目，前端采用HBuilderX开发，后端采用IDEA开发，在本地开发也跨域，部署到云服务器也跨域，下面介绍两种解决方案。出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定...
nginx搭建部署前后端项目
xyouzi的博客
07-16 4364
nginx安装 下载依赖环境 yum -y install gcc pcre-devel zlib-devel openssl openssl-devel 安装 cd /usr/local mkdir nginx cd nginx wget http://nginx.org/download/nginx-1.13.4.tar.gz tar -xvf nginx-1.13.4.tar.gz cd nginx-1.13.4 ./configure --prefix=/usr/local/nginx （prefi
nginx 前后端项目
狗蛋的博客
12-25 555
nginx部署前后端分离项目 保证系统安装nginx的前提条件下 将前端代码打包上传至服务器 后端代码打包上传至服务器，端口指定8080 编辑nginx的配置文件nginx.conf location / { root /home/admin/test/dist;#前端代码绝对路径 index index.html index.htm; } location /prod-api/{ #/prod-api为访问后端服务统一前缀 proxy_pass http:
nginx部署前后端分离项目(spring boot + vue)
qq_51088445的博客
11-27 611
部署后端 spring boot 项目部署到服务器上，我们只需打个jar包放到服务器上运行即可。 使用maven打包的方法： 得到一个jar包，上传到服务器上 执行jar的命令: java -jar xxxxx.jar 后台执行 nohup java -jar xxxxx.jar & 部署前端： 在baseUrl 中填写后台的地址。 dev中的 target也填上后台的地址。 然后进入的vue项目的根目录,进入cmd执行 npm run build 得到一个dist文件 将这个
使用nginx代理实现前后端分离开发调试，零基础教程
苛学加记事
04-13 1614
老项目前后端分离开发调试 在前后端没有完全分离部署的情况下，前端人员调试是很不方便的，有的时候本地后端相关配置不正确，会导致无法正常调试，浪费大量时间。 今天就来一起学习一下怎么使用Nginx代理来进行前后端分离开发。 ...
Nginx 前后端分离项目部署配置
Kung's blog column
07-16 2万+
实现前后端分离，可以让前后端独立开发、独立部署、独立单测，双方通过JSON进行数据交互。 对于前端开发人员来说，不用每次调试都需要启动或配置Java/Tomcat运行环境；对于后端开发人员来说 ，也不用在需要往页面注入数据。 一：部署前端资源 前端资源部署在nginx的html文件中； 二：配置前端资源访问路径和默认访问路径 root 是指定项目的根目录，适用与server和l...
前后端分离项目中nginx部署的相关配置
weixin_43860634的博客
09-15 1197
前后端分离项目中nginx部署的相关配置
linux上安装nginx 并配置前后端
小菜鸟--成长之路的博客
07-23 4798
环境准备： 1.因为Nginx依赖于gcc的编译环境，所以，需要安装编译环境来使Nginx能够编译起来。 命令：yum install gcc-c++ 2.Nginx的http模块需要使用pcre来解析正则表达式，需要安装pcre。 命令：yum install -y pcre pcre-devel 3.安装依赖的解压包。 命令：yum install -y zlib zlib-devel 4.ssl 功能需要 openssl 库，安装 openssl。 命令：yum install -y
使用nginx部署前端项目
lianaozhe的博客
11-25 5461
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。
nginx部署前后端项目
08-16
在部署前后端项目时，可以使用nginx作为web服务器来提供前端静态文件和反向代理后端API请求。以下是nginx部署前后端项目的步骤： 1. 首先，确保已经安装了nginx。可以使用以下命令来安装nginx： ``` cd /usr/local mkdir nginx cd nginx wget http://nginx.org/download/nginx-1.13.4.tar.gz tar -xvf nginx-1.13.4.tar.gz cd nginx-1.13.4 ./configure --prefix=/usr/local/nginx make && make install ``` 2. 配置nginx。打开nginx的配置文件`/usr/local/nginx/conf/nginx.conf`，可以使用文本编辑器进行编辑。以下是一个简单的示例配置： ``` http { server { listen 80; server_name example.com; location / { root /path/to/frontend; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend_server; } } } ``` 上述配置中，`/path/to/frontend`是前端静态文件的路径，`http://backend_server`是后端API的地址。根据实际情况进行修改。 3. 测试配置。使用以下命令可以测试nginx的配置是否正确： ``` /usr/local/nginx/sbin/nginx -t ``` 如果配置正确，会显示"nginx: configuration file /usr/local/nginx/conf/nginx.conf syntax is ok"和"nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful"。 4. 启动nginx。使用以下命令可以启动nginx： ``` /usr/local/nginx/sbin/nginx ``` 现在，nginx已经成功部署并开始监听端口80。可以通过访问服务器的IP地址来查看nginx是否正常工作。 注意：以上步骤仅仅是一个简单的示例，实际部署时可能需要根据具体需求进行配置调整。同时，还可以进一步优化nginx的配置，例如启用gzip压缩、设置缓存等，以提高性能和安全性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [nginx搭建部署前后端项目](https://blog.csdn.net/Xyouzi/article/details/118784274)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值