在Docker中安装Nginx并实现前端在服务器部署

最新推荐文章于 2024-06-18 18:45:50 发布
最新推荐文章于 2024-06-18 18:45:50 发布
阅读量1.3k 收藏 12
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43453221/article/details/109526736
版权

作为一个前端，代码写完，最后部署到服务器，这是一个必须要了解的过程，今天，我就在docker 中安装nginx 并部署做一个简单的笔记。
首先我在某云中有个云服务器，并登陆
在这里插入图片描述

文章目录

前言

提示：我服务器装的是Linux的，要如何安装 Docker，要如何在Docker中安装 Nginx，请自己度一下。
安装Docker可以参考
在Docker中安装 Nginx可以参考

一、确认环境？

  1. 启动启动 Docker
 sudo systemctl start docker

在这里插入图片描述

  1. 查看是否已安装了 nginx：

                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  攻城猴
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    12
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
Docker之Nginx部署前端项目

				
			

			

				

					qq_65345936的博客
				

				

					01-12
					
					1121
					
				

			

		

		

			
				
nginx+tomcat实现反向代理及均衡nginx+html静态服务器。

			
		

	



                

              
                



	

		

			

				
					
docker+daocloud实现前端项目自动构建部署

				
			

			

				

					01-10
				

			

		

		

			
				
首先需要在服务器上进行docker、nginx、node等的安装。便于进行后续的操作。 通过docker拉取nginx镜像，命令docker pull nginx 通过vue-cli初始化一个项目 可以通过vue init webpack 项目名称初始化一个项目，这里...

			
		

	



                


  
              

                


	

		

			

				
					
Docker 安装 Nginx 容器部署前端项目

				
			

			

				

					FLGB
				

				

					03-19
					
					1862
					
				

			

		

		

			
				
docker运行nginx镜像时，设置端口映射，则只有该映射端口起作用，nginx配置的其他端口无效。所以想要多个端口起效果，启动时要用–net host （先删除容器后重新生成），并且修改配置文件中的root路径，再次访问成功加载首页。docker下的nginx只能读到挂载路径下面的文件（到对应目录下查看文件已经存在了（划红线的）删除成功后，重新生成容器并进行目录挂载映射。我们拉去1.24.0的nginx镜像。在对应挂在目录下创建监听文件。

			
		

	





	

		

			

				
					
Docker部署nginx和前端项目

				
			

			

				

					dongcsdn123的博客
				

				

					08-09
					
					1606
					
				

			

		

		

			
				
Docker部署nginx和前端项目

			
		

	



		

			
		



	

		

			

				
					
Docker 安装 Nginx 部署前端项目_docker安装nginx

					
最新发布

				
			

			

				

					2401_84419493的博客
				

				

					06-18
					
					284
					
				

			

		

		

			
				
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

			
		

	





	

		

			

				
					
Docker + nginx 部署前端项目--记录

				
			

			

				

					HumorMrChen的博客
				

				

					04-11
					
					2257
					
				

			

		

		

			
				
背景: 公司的项目前后端完全分离，所以前端需要独立部署

1、项目结构

  

项目打包后的静态资源在 dist 目录下

2、两个关键的文件 Dockerfile 和 nginx.conf

Dockerfile 放在根目录下

Dockerfile内容如下：


FROM nginx:stable-alpine
COPY dist/ /usr/share/nginx/html/
RUN rm /etc/nginx/conf.d/default.conf
COPY deploy/nginx.co...

			
		

	





	

		

			

				
					
Docker安装Nginx详细步骤

				
			

			

				

					weixin_35749545的博客
				

				

					02-18
					
					909
					
				

			

		

		

			
				
安装Nginx服务器可以使用Docker容器，详细步骤如下：1. 使用docker pull命令从Docker Hub下载Nginx镜像：docker pull nginx2. 使用docker run命令运行Nginx容器：docker run --name my_nginx -d -p 80:80 nginx3. 进入容器：docker exec -it my_nginx /bin/bash4...

			
		

	





	

		

			

				
					
docker运行nginx发布前端项目

				
			

			

				

					占星安啦的博客
				

				

					01-25
					
					6627
					
				

			

		

		

			
				
1.上传nginx镜像到服务器
文档：nginx.tar
链接：https://note.youdao.com/ynoteshare/index.html?id=fe9ea0b1c4008cb5af5a12b2bd45ceac&type=note&_time=1643004358884

这里上传到/home/docker/nginx.tar

2.导入镜像
cd /home/docker
docker load --input nginx.tar

3.创建nginx的配置文件ngin.c

			
		

	





	

		

			

				
					
Docker部署文档.docx

				
			

			

				

					08-30
				

			

		

		

			
				
本文档主要介绍了 Docker 部署文档的目录结构、安装服务、创建数据库、修改配置文件、启动服务、访问管理页面等相关知识点。  一、目录结构  Docker 部署文档的目录结构主要包括 bin、docker-17.03.2、images、...

			
		

	





	

		

			

				
					
docker-for-symfony：用于Symfony 4的Docker堆栈-NGINX PHP7-FPM MySQL ELK Redis RabbitMQ

				
			

			

				

					02-04
				

			

		

		

			
				
【标题】"docker-for-symfony：用于Symfony 4的Docker堆栈-NGINX PHP7-FPM MySQL ELK Redis RabbitMQ" 提供了一种高效的方法，将Symfony 4应用程序部署在基于Docker的环境中。这个堆栈包含了多个关键组件，确保了...

			
		

	





	

		

			

				
					
zulip:在渲染上部署Zulip

				
			

			

				

					04-02
				

			

		

		

			
				
 该存储库中的代码将在Render上创建以下组件： Zulip Web /应用程序服务器，其中包含： NGINX：前端Web服务器，为Django和Tornado提供静态资产和代理Django：主要的网络应用服务器龙卷风：用于维持持久客户端连接的...

			
		

	





	

		

			

				
					
bitnami-docker-wordpress-nginx：使用NGINX的WordPress Bitnami Docker映像

				
			

			

				

					02-05
				

			

		

		

			
				
本文将深入探讨"bitnami-docker-wordpress-nginx"，这是一个专为WordPress设计的Bitnami Docker映像，利用高效能的NGINX服务器作为前端Web服务器。这个映像旨在提供一个简洁、安全且易于部署的WordPress环境，尤其...

			
		

	





	

		

			

				
					
Nginx+Docker部署前端vue项目（Nginx配置）

				
			

			

				

					Eistert
				

				

					11-08
					
					3017
					
				

			

		

		

			
				
刚开始能启动前端项目，接口也能正常返回200的code.
但是接口老是报错
We‘re sorry but xxxx doesn‘t work properly without JavaScript enabled


网上搜了一下，结合自己分析。就是web项目Nginx配置有问题。
大概的方向是没有配置vue项目中的反向代理地址
原先的Nginx的default.conf文件内容是这样的
server {
    listen       80;
    server_name  xxx.xxx.xxx.

			
		

	





	

		

			

				
					
docker 安装nginx 并部署

					
热门推荐

				
			

			

				

					ddhsea的博客
				

				

					06-15
					
					6万+
					
				

			

		

		

			
				
安装命令:docker pull nginx

安装完成之后进行测试:

sudo docker run --name nginx-test -p 8081:80 -d nginx



查看docker 镜像进程

sudo docker ps
CONTAINER ID    IMAGE        COMMAND         CREATED  ...

			
		

	





	

		

			

				
					
docker nginx部署web应用_如何使用 Docker 高效部署前端应用

				
			

			

				

					weixin_39636608的博客
				

				

					11-29
					
					286
					
				

			

		

		

			
				
Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，方便运维管理。对开发者也更方便开发，测试与部署。最重要的是，当你面对一个陌生的项目，你可以照着 Dockerfile，甚至不看文档(文档也不一定全，全也不一定对)就可以很快让它在本地跑起来。现在很强调 DevOps 的理念，我把 DevOps 六个大字放在电脑桌面上，格物致知了一天。豁然开朗，DevOps 的意思就是写一个...

			
		

	





	

		

			

				
					
前端oss上传接口_如何使用 docker 高效部署前端

				
			

			

				

					weixin_39530960的博客
				

				

					11-20
					
					179
					
				

			

		

		

			
				
docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，方便运维管理。对开发者也更方便开发，测试与部署。最重要的是，当你面对一个陌生的项目，你可以照着 Dockerfile，甚至不看文档(文档也不一定全，全也不一定对)就可以很快让它在本地跑起来。现在很强调 devops 的理念，我把 devops 六个大字贴在电脑屏幕上，格物致知了一天。豁然开朗：devops 的意思就是写一个 Dock...

			
		

	





	

		

			

				
					
docker 安装 nginx 发布Vue项目

				
			

			

				

					Good Luck
				

				

					08-02
					
					1万+
					
				

			

		

		

			
				
docker 安装 nginx 发布Vue项目
nginx配置文件、html文件、logs日志文件。

			
		

	





	

		

			

				
					
前端的Docker入门终极指南

				
			

			

				

					大灰狼的小绵羊哥哥的博客
				

				

					11-08
					
					1753
					
				

			

		

		

			
				
从零到一掌握Docker的基本原理与实践操作

			
		

	





	

		

			

				
					
使用Docker快速安装部署nginx

				
			

			

				

					YHJ
				

				

					05-16
					
					3016
					
				

			

		

		

			
				
使用Docker快速安装部署nginx的前提：首先需要确保已经安装了Docker环境

如果没有安装Docker的话，可以参考上一篇的内容：Linux上安装Docker

有了Docker环境后，就可以使用Docker安装部署nginx了

1、随便启动一个nginx实例，只是为了复制出配置


docker run -p80:80 --name nginx -d nginx:1.10

2、将容器内的配置文件拷贝到/mydata/nginx/conf/ 下






	#先创建本地所需要的三个文件夹
.

			
		

	





	

		

			

				
					
docker 部署前端nginx服务详细步骤

				
			

			

				

					05-24
				

			

		

		

			
				
以下是 Docker 部署前端 Nginx 服务的详细步骤：  1. 编写 Dockerfile 文件：  ```dockerfile # 基础镜像 FROM nginx:alpine  # 删除 Nginx 默认配置文件 RUN rm /etc/nginx/conf.d/default.conf  # 将本地 Nginx ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值