Nginx详细安装步骤（附部署前端Vue项目）

最新推荐文章于 2024-08-11 23:15:31 发布
最新推荐文章于 2024-08-11 23:15:31 发布
阅读量810 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34658021/article/details/102938196
版权
本文详细介绍了在服务器上安装Nginx的步骤，包括下载安装包，安装依赖，解压并配置，以及启动Nginx。同时，还提供了解决Nginx代理Vue项目时遇到403错误的方法，即修改nginx.conf中启动用户。
摘要由CSDN通过智能技术生成

由于公司项目前后端分离，使用docker部署后端springboot项目了，前端的vue也需要使用到一个容器去承载，然而后端打包之后是一个文件夹直接请求一个html页面，所以选用Nginx代理跳转静态页面

首先，我们先去Nginx官网http://nginx.org/en/download.html下载一个nginx安装包

下载完之后通过Xftp将文件上传到服务器上边去。

下载之前我们需要确保系统已经安装了g++,gcc, openssl-devel、pcre-devel和zlib-devel软件。如果没有，安装命令如下：

yum -y install zlib zlib-devel openssl openssl--devel pcre pcre-devel

等待提示选择y之后，我们进入到nginx安装包的存放路径执行解压命令

tar -zxvf nginx-1.4.7.tar.gz

之后我们当前目录会多出一个nginx-1.4.7的文件夹，进入该文件夹，执行如下命令

配置命令：./configure
编译命令：make
安装命令：make install

执行以上命令之后检验nginx是否已经安装成功


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  秃头工程师
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
web服务器nginx+部署前端vue项目

				
			

			

				

					03-22
				

			

		

		

			
				
#### 三、部署前端 Vue 项目至 Nginx  假设我们需要将一个基于 Vue.js 的前端项目部署到 Nginx 上，下面是一些基本的步骤：  1. **准备环境**：  - 安装 Nginx。确保你的系统上已经安装了 Nginx 服务器。  - 准备好...

			
		

	



                

              
                



	

		

			

				
					
yum安装nginx，并部署前端vue项目到虚拟机上运行

				
			

			

				

					weixin_44728473的博客
				

				

					07-06
					
					1481
					
				

			

		

		

			
				
yum安装nginx，并部署前端vue项目到虚拟机上运行
1.搜索一下有没有nginx，命令如下
yum search nginx2.查询nginx要安装的版本，命令如下
whereis nginx3.安装nginx，命令如下
yum install nginx.x86_644.移除nginx，命令如下
yum remove nginx5.打开目录，命令如下
cd /usr/sbin
6.启动，命令如下
./nginx7.查看nginx进程，命令如下
ps -aux |grep nginx

.......

			
		

	



                


  
              

                


	

		

			

				
					
Linux安装Nginx并部署Vue项目

				
			

			

				

					stu_kk的博客
				

				

					12-11
					
					913
					
				

			

		

		

			
				
Linux安装Nginx并部署Vue项目记录

			
		

	





	

		

			

				
					
nginx在同一域名下部署多个vue项目

					
最新发布

				
			

			

				

					IICOOM的博客
				

				

					08-11
					
					432
					
				

			

		

		

			
				
本文介绍使用nginx服务器在下如何部署多个前端项目，在vue3使用vite打包时配置文件vite.config.ts中的base的配置方式，以及vue-router中history的配置方式，以及如何在nginx中配置才能使前端项目正常解析等关键步骤，结束你在前端项目部署时的苦恼。

			
		

	



		

			
		



	

		

			

				
					
Neginx配置

				
			

			

				

					wujianjun6932的专栏
				

				

					03-08
					
					1141
					
				

			

		

		

			
				
./configure \
--prefix=/usr/local/nginx \
--pid-path=/var/run/nginx/nginx.pid \
--lock-path=/var/lock/nginx.lock \
--error-log-path=/var/log/nginx/error.log \
--http-log-path=/var/log/nginx/acces

			
		

	





	

		

			

				
					
手把手教 Nginx 部署 Vue 项目

					
热门推荐

				
			

			

				

					csdn_life18的博客
				

				

					08-06
					
					2万+
					
				

			

		

		

			
				
想必大家一定听说过 Nginx，若没听说过它，那么一定听过它的 同行 Apache 吧！Nginx 同 Apache 一样都是一种 Web 服务器。如果你还是对它不够了解，可以自己去深入的学习一下 Nginx 相关的知识，这里不做过多的介绍了，今天我们就来聊聊使用 Nginx 如何来部署我们开发好的前端 Vue 项目。......

			
		

	





	

		

			

				
					
Nginx部署Vue前端项目

				
			

			

				

					he先森的博客
				

				

					12-01
					
					4195
					
				

			

		

		

			
				
系统环境：Mac Pro—10.15.7版本Nginx版本：1.19.6。

			
		

	





	

		

			

				
					
使用Nginx部署Vue前端项目

				
			

			

				

					阿锦的博客
				

				

					12-14
					
					1848
					
				

			

		

		

			
				
使用Nginx部署前端Vue项目或者静态网页

			
		

	





	

		

			

				
					
nginx下部署vue项目的方法步骤

				
			

			

				

					09-29
				

			

		

		

			
				
总结来说，部署Vue项目到Nginx服务器是一个系统化的过程，需要按照步骤逐步进行。首先通过npm构建Vue项目，然后配置Nginx，最后重启服务并测试。这个流程不仅涉及到Vue和Nginx的基本操作，还可能涉及到对网络、...

			
		

	





	

		

			

				
					
vue项目部署到nginx/tomcat服务器的实现

				
			

			

				

					10-16
				

			

		

		

			
				
总结来说，Vue项目部署到Nginx或Tomcat服务器的主要步骤包括修改路由模式、配置服务器以处理history模式下的前端路由、打包Vue项目、在服务器上配置存放静态资源的目录，并确保web.xml中的错误处理设置能正确处理...

			
		

	





	

		

			

				
					
vue前端项目部署之nginx配置.md

				
			

			

				

					03-20
				

			

		

		

			
				
本文将详细介绍如何使用Nginx作为反向代理服务器来部署Vue前端项目，包括具体的步骤以及需要注意的关键点。  #### 二、确认Nginx配置完毕 在开始部署之前，首先要确保Nginx已经正确安装并配置好。可以通过以下方式...

			
		

	





	

		

			

				
					
Vue项目部署Nginx配置文件 SSL

				
			

			

				

					08-11
				

			

		

		

			
				
在部署 Vue 项目时，Nginx 配置文件 `nginx.conf` 的关键设置如下：  1. **基本配置**：  - `server` 块：定义一个监听特定端口（通常是80）的服务器实例。  ```nginx  server {  listen 80;  server_name your...

			
		

	





	

		

			

				
					
使用nginx部署项目流程

				
			

			

				

					m0_53664163的博客
				

				

					01-16
					
					2224
					
				

			

		

		

			
				
配置好路径之后，运行nginx，可以命令行窗口 start nginx运行，也可以双击nginx运行，查看进程是否启动成功（有三个进程）项目中有地图服务，所以把地图资源放在nginx里面了，地图8883端口，当访问8883端口时，转到nginx文件夹中的html文件中。然后将项目npm run build打包，生成dist文件，放到nginx/html路径下。监听本地4001端口，当访问本地4001时，将/api/ 转成 后台的请求路径。这样就可以了，如果请求失败那么就看一下请求路径对应修改配置就行。

			
		

	





	

		

			

				
					
nginx项目部署教程

				
			

			

				

					厚积薄发.
				

				

					11-02
					
					3098
					
				

			

		

		

			
				
当我们的项目开发完毕后，我们需要将项目打包、部署到服务器上，供用户来使用。目前，常见的部署方式有两种：后端部署前后端分离部署。

			
		

	





	

		

			

				
					
Nginx的基本部署

				
			

			

				

					Mapinyi666的博客
				

				

					07-10
					
					6538
					
				

			

		

		

			
				
Nginx（发音为"engine-x"）是一个高性能的开源Web服务器和反向代理服务器，也可以用作负载均衡器、HTTP缓存和邮件代理。它的目标是提供高性能、可扩展性和稳定性，能够处理大量的并发连接。以下是Nginx的一些关键特点和概述：性能优异：Nginx采用事件驱动的异步非阻塞架构，能够在消耗较少的资源下处理大量并发连接。它以较低的内存消耗和更高的并发性能著称。高扩展性：Nginx的架构允许通过多个工作进程处理并发请求，每个进程可以处理多个连接。这使得Nginx能够轻松地扩展和处理高流量负载。

			
		

	





	

		

			

				
					
nginx部署前端vue项目

				
			

			

				

					weisian的博客
				

				

					06-24
					
					1483
					
				

			

		

		

			
				
通常我们会遇到一些前端单独运行的项目，没有后台，我们可以直接通过nginx的代理实现。本例已前端vue项目项目。

1、将前端项目打包程dist包

2、在服务器上部署nginx

（1）、在nginx的官网下载nginx（官网：https://nginx.org/download/）

本例已1.8.1版本为例子

（2）、将tar包上传到/usr/local目录下，解压程文件夹

解压命令：tar -zxvf nginx-1.8.1.tar.gz



（3）、安装nginx的依赖

执行命令：yum 

			
		

	





	

		

			

				
					
前端（vue）部署步骤超详细（Linux nginx部署vue）

				
			

			

				

					qq_43815329的博客
				

				

					05-07
					
					2153
					
				

			

		

		

			
				
安装nginx
1.配置nginx的安装环境
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

2.将nginx安装包（压缩包），移动到/usr/local/下。

3.解压
tar -zxvf nginx-1.19.4.tar.gz

4.cd nginx-1.19.4

5.配置
./configure --prefix=/usr/local/nginx

6. make

7. make install

8. 进入sbin

			
		

	





	

		

			

				
					
【运维】Linux安装Nginx并部署前端项目【内/外网-保姆级教程】

				
			

			

				

					m0_64210833的博客
				

				

					06-06
					
					1万+
					
				

			

		

		

			
				
Linux安装Nginx并部署前端项目的两种方式【内/外网-保姆级教程】

			
		

	





	

		

			

				
					
nginx部署前端项目的详细步骤

				
			

			

				

					铁锤妹妹的博客
				

				

					10-24
					
					2万+
					
				

			

		

		

			
				
在前端开发过程中经常是需要把前端静态资源放到服务器中看效果，这时经常用到nginx来配置。

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值