docker部署vue项目包(nginx dist包)

最新推荐文章于 2024-05-30 11:18:27 发布
最新推荐文章于 2024-05-30 11:18:27 发布
阅读量461 收藏 1
点赞数
文章标签： nginx docker vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34843271/article/details/131132383
版权
本文介绍了如何利用Docker获取Nginx镜像，并通过Dockerfile将Vue项目的dist包构建为镜像，进行部署。主要步骤包括创建Dockerfile，配置nginx.conf，复制dist包和配置文件，构建镜像，最后启动镜像完成部署。
摘要由CSDN通过智能技术生成

1. docker获取nginx镜像

docker pull nginx

查看获取的镜像

docker images

在这里插入图片描述

2. 通过dockerfile构建dist镜像包

  1. 在空文件夹下创建Dockerfile文件
  2. 将dist包复制到同级目录
  3. 将nginx配置文件复制到同级目录
    在这里插入图片描述
  4. 编辑Dockerfile文件
# 使用nginx镜像
FROM nginx
# 替换镜像里的配置文件为项目配置文件
COPY nginx.conf /etc/nginx/nginx.conf
# 把dist包添加到镜像里
COPY dist/ /web/dist/

/web/dist/对应nginx.conf里的路径
在这里插入图片描述

  1. 通过命令构建镜像包,注意最后面有个点,web是镜像名称

                

                
                
        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  池鱼o_O
                
              
            

            

                关注
              
            

        

        

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

      

      










                



	

		

			

				
					
使用 docker 打包构建部署 Vue 项目，一劳永逸解决node-sass安装问题

				
			

			

				

					Snow870922的博客
				

				

					08-25
					
					938
					
				

			

		

		

			
				
将项目顶级目录 src 映射到容器中的 /src ,运行刚刚构建的 mynode:14.10.1 镜像并传入打包 vue 相关命令，如果还有下载慢需要加镜像的包，再添加即可。node -vnpm -v构建生成的容器运行完毕，就可以将 dist 下的构建产物进行发布了。

			
		

	



                

              
                



	

		

			

				
					
Docker部署前端dist打包项目

				
			

			

				

					weixin_67511648的博客
				

				

					08-18
					
					894
					
				

			

		

		

			
				
【代码】Docker部署前端dist打包项目。

			
		

	



                


  
              

                


	

		

			

				
					
docker+vue云服务器打包镜像相关操作

					
最新发布

				
			

			

				

					黄钢的博客
				

				

					05-30
					
					1180
					
				

			

		

		

			
				
容器化部署似乎成了当前一个非常主流的趋势，无论是前端还是后端，流行的操作就是给你一个镜像地址，让你自己去拉取镜像并运行镜像。这似乎是运维的工作，但是在没有专有运维的情况下，不得不自己先了解一下。docker相对来说还是比较麻烦的，需要对服务器有一定的了解，还要对Linux命令比较熟练，然而我对这两个都不熟悉，摸索了一段时间，记录一下自己打包docker镜像的完整过程。

			
		

	





	

		

			

				
					
docker打包vue项目

				
			

			

				

					qq_43604300的博客
				

				

					04-25
					
					334
					
				

			

		

		

			
				
在服务器中找一个空白文件夹，将dist文件放到该文件夹下。去浏览器访问浏览器IP:82 看最终效果。使用docker创建nginx镜像。访问4030端口看看是否安装成功。将vue项目打包成dist，命令。创建Dockerfile文件。构建镜像 别忘了最后的 .

			
		

	



		

			
		



	

		

			

				
					
将Vue的dist文件部署到本地Nginx

				
			

			

				

					qq_62479388的博客
				

				

					11-28
					
					847
					
				

			

		

		

			
				
将Vue的dist文件部署到本地Nginx

			
		

	





	

		

			

				
					
Docker打包VUE项目并运行

				
			

			

				

					weixin_41318009的博客
				

				

					07-29
					
					3112
					
				

			

		

		

			
				
COPYnginx/default.conf/etc/nginx/conf.d/default.conf命令的意思是将nginx目录下的default.conf复制到etc/nginx/conf.d/default.conf，用本地的default.conf配置来替换nginx镜像里的默认配置。4、在项目dist同级目录下创建文件nginx文件夹，给nginx文件下创建文件default.conf。FROMnginx该镜像是基于nginxlatest镜像构建的。......

			
		

	





	

		

			

				
					
nginx部署多个vue项目的方法示例

				
			

			

				

					10-14
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。  首先，我们的目标是在同一个域名下部署两个Vue...

			
		

	





	

		

			

				
					
Docker镜像+nginx 部署 vue 项目的方法

				
			

			

				

					01-09
				

			

		

		

			
				
　如果将该dist目录整个传到服务器上，部署成静态资源站点就能直接访问到该项目。  二、获取nginx 镜像 　nginx 是一个高性能的HTTP和反向代理服务器，此处我们选用 nginx 镜像作为基础来构建我们的vue应用镜像。 　...

			
		

	





	

		

			

				
					
利用docker-compsoe部署前后端分离的项目方法

				
			

			

				

					01-10
				

			

		

		

			
				
现在我们有一个前后端分离的项目，前端基于Vue开发、利用Webpakc打包为dist文件夹。后端则是一个Node.js服务，提供API接口，前端和后端是分离的。所以我们肯定是前端项目一个container,后台项目也是一个container。...

			
		

	





	

		

			

				
					
vue微商城项目源码-vue-shop（适用于Node.js 10.x）.zip

				
			

			

				

					06-06
				

			

		

		

			
				
 - 前端：将`npm run build`生成的`dist`目录部署到Web服务器，如Apache、Nginx或云平台的静态网站托管服务。  - 后端：将Node.js服务部署到支持Node.js的服务器，如Heroku、AWS、Docker等。  总结： 这个Vue-shop...

			
		

	





	

		

			

				
					
youngtrip：青年游记Vue Vuetify axios

				
			

			

				

					02-18
				

			

		

		

			
				
开发与部署：前端部署GithubPage（cloudflare CDN加速），放置阿里云docker-compose单主机部署（nginx，gunicore） 通过API提供实时信息来监控cADVisor 编程环境：深度deepin（基于debian），vscode 开发todolist ...

			
		

	





	

		

			

				
					
使用Docker Nginx部署vue项目

				
			

			

				

					weixin_47906106的博客
				

				

					07-20
					
					4173
					
				

			

		

		

			
				
执行完成后，会在Vue项目下会生成一个dist目录，该目录一般包含index.html文件及static目录，static目录包含了静态文件js、css以及图片目录images（如果有图片的话）。Nginx是一个能在Docker容器中运行的HTTP(s)服务器。可以直接打开index.html查看效果，可能会出现各种原因的报错，适当的去解决。将项目上传到服务器后开始构建镜像(我是在服务器上从github上拉去的项目)在项目根目录创建nginx.conf文件。......

			
		

	





	

		

			

				
					
docker部署vue(nginx)

				
			

			

				

					Ye_zb的博客
				

				

					04-25
					
					2635
					
				

			

		

		

			
				
docker部署vue(nginx)

			
		

	





	

		

			

				
					
docker 部署

				
			

			

				

					clks_的博客
				

				

					11-14
					
					216
					
				

			

		

		

			
				
linux环境安装docker

docker 要求运行在centos 7以上，要求系统64位，系统内核版本3.10以上*
	uname -an//查看系统版本
	yum -y install docker//下载安装docker
	service docker start// 启动docker服务
	docker version// 检查docker是否安装成功
	mkdir simpl...

			
		

	





	

		

			

				
					
Docker打包vue项目镜像（生产环境）

				
			

			

				

					qq_37312180的博客
				

				

					10-14
					
					1057
					
				

			

		

		

			
				
通过xsell连接centos服务器，进入刚上传的文件夹，执行打包docker镜像的命令构建镜像。把vue项目打包后的dist文件夹拷贝到该文件夹目录下。在该文件夹目录下，在建一个Dockerfile文件。使用xftp把改文件夹上传至centos服务器。浏览器访问测试：http://IP:8089。生成(启动)一个容器。

			
		

	





	

		

			

				
					
使用docker+nginx容器部署vue项目

				
			

			

				

					wsj1156912876的博客
				

				

					03-01
					
					244
					
				

			

		

		

			
				
将vue项目打包成dist文件，放入服务器 /home/www/dist 目录下。如果更新dist包，需要重启docker里的nginx容器。

			
		

	





	

		

			

				
					
docker下nginx部署vue项目

				
			

			

				

					梦里图绪的博客
				

				

					04-05
					
					1847
					
				

			

		

		

			
				
环境centos7
准备:

安装git
安装nodejs
安装docker



拉取git仓库
cd ~					#进入home目录
git clone *********.sto.git 	#后面是仓库地址


切换分支


cd ~/sto
git branch -a 		#查看分支 以* 开头的是当前分支

*master
  dev
  remotes/origin/HEAD -&gt...

			
		

	





	

		

			

				
					
Vue.js - Vue 项目 dist 利用 Docker 一键部署方案

				
			

			

				

					牧码的博客
				

				

					03-28
					
					941
					
				

			

		

		

			
				
Vue.js - Vue 项目 dist 利用 Docker 一键部署方案

			
		

	





	

		

			

				
					
Docker打包vue项目镜像（开发环境）

				
			

			

				

					qq_37312180的博客
				

				

					10-17
					
					1540
					
				

			

		

		

			
				
docker run -d -p 3006:80 vue_npm_arcgis_image2    #启动（运行）容器。docker build . -t vue_npm_arcgis_image2     #打包成docker镜像。运行npm run docker打包docker镜像并启动（运行）容器。vue_npm_arcgis_image2  镜像名称。浏览器访问http://IP:Port测试。-t  title设置镜像名称。

			
		

	





	

		

			

				
					
CentOS7 使用 Docker 部署 Vue+Nginx 实战指南

				
			

			

				

					
				

			

		

		

			
				
"在CentOS7系统中使用Docker部署Vue.js应用并结合Nginx进行反向代理的步骤"  在本文中，我们将探讨如何在 CentOS7 上利用 Docker 容器化技术部署 Vue.js 应用，并通过 Nginx 进行反向代理。这个过程主要包括以下几个...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值