docker部署vue项目的实现步骤

赤兔忠诚

材料

1.打包好的vue的dist文件夹
2.docker环境

运行环境结构图

• dist：打包的项目
  
• default.conf: nginx的配置文件
  

1. gzip on; #开启或关闭gzip on off
   
2. gzip_disable "msie6";
   
3. gzip_buffers 4 16k; 
   
4. gzip_comp_level 8; 
   
5. gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
   
6. server {
   
7.     listen       8086;
   
8.     server_name  localhost;
   
9.     #charset koi8-r;
   
10.     access_log  /var/log/nginx/host.access.log  main;
    
11.     error_log  /var/log/nginx/error.log  error;
    
12.     location / {
    
13.         add_header 'Access-Control-Allow-Headers' '*';
    
14.         add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; 
    
15.         add_header 'Access-Control-Allow-Origin' '*';
    
16.         root   /usr/share/nginx/html;
    
17.         index  index.html index.htm;
    
18.         try_files $uri $uri/ /index.html;
    
19.     }
    
20.     #error_page  404              /404.html;
    
21.     # redirect server error pages to the static page /50x.html
    
22.     #
    
23.     error_page   500 502 503 504  /50x.html;
    
24.     location = /50x.html {
    
25.         root   /usr/share/nginx/html;
    
26.     }
    
27. }

复制代码

Dockerfile：docker运行命令配置文件

1. FROM nginx:latest
   
2. COPY dist/  /usr/share/nginx/html/
   
3. COPY default.conf /etc/nginx/conf.d/default.conf

复制代码

说明书内容

1.构建镜像：

1. docker build -t vue-app .

复制代码

2.运行镜像：

1. docker run -d -p 8011:8086 --name vue-container vue-app

复制代码

浏览地址：本地ip+8011
3.一定要有网没网的话先要构建一个离线的nginx镜像
docker save -o和docker load -i是Docker命令，用于将Docker镜像保存到文件和加载镜像文件到Docker中。下面我会解释这两个命令的作用和用法。
docker save -o命令：

1. docker save -o <output_file.tar> <image_name:tag>

复制代码

这个命令用于将指定的Docker镜像保存到一个输出文件中。<output_file.tar>是你希望保存镜像的文件路径和名称，例如my_image.tar。<image_name:tag>是要保存的Docker镜像的名称和标签，例如ubuntu:latest。
例如：

1. docker save -o my_image.tar ubuntu:latest

复制代码

docker load -i命令：

1. docker load -i <input_file.tar>

复制代码

这个命令用于从一个输入文件中加载Docker镜像到Docker中。<input_file.tar>是包含要加载的镜像的文件路径和名称，例如my_image.tar。
例如：

1. docker load -i my_image.tar

复制代码

使用这两个命令可以方便地将Docker镜像导出到文件并在其他机器或环境中加载。请注意，在使用docker load -i命令加载镜像之前，确保在目标机器上已经安装了Docker，并且有足够的权限来加载镜像。
到此这篇关于docker部署vue项目的实现步骤的文章就介绍到这了,更多相关docker部署vue内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/server/2935912x0.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！