docker部署vue项目的实现步骤

材料

1.打包好的vue的dist文件夹

2.docker环境

运行环境结构图

docker部署vue项目的实现步骤

  • dist:打包的项目
  • default.conf: nginx的配置文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
gzip on; #开启或关闭gzip on off
gzip_disable "msie6";
gzip_buffers 4 16k; 
gzip_comp_level 8; 
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;
server {
    listen       8086;
    server_name  localhost;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    location / {
        add_header 'Access-Control-Allow-Headers' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'
        add_header 'Access-Control-Allow-Origin' '*';
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
    #error_page  404              /404.html;
    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Dockerfile:docker运行命令配置文件

1
2
3
FROM nginx:latest
COPY dist/  /usr/share/nginx/html/
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。

例如: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。

例如:docker load -i my_image.tar

使用这两个命令可以方便地将Docker镜像导出到文件并在其他机器或环境中加载。请注意,在使用docker load -i命令加载镜像之前,确保在目标机器上已经安装了Docker,并且有足够的权限来加载镜像。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开支付宝扫一扫,即可进行扫码打赏哦,您的支持,是我继续创作的动力。
点赞 (0)

中和威客保留所有权利,未经本站书面许可不得转载本站内容!文中观点不代表本站立场!

中和威客 服务器 docker部署vue项目的实现步骤 https://www.izhwk.com/archives/281

常见问题
  • 您需要注册成为本站会员,然后再通过会员中心的升级VIP功能,方可成为本站的VIP会员。
查看详情
  • 首先您需要注册成为本站会员,然后到会员中心充值,充值后支付对应资源的查看金额即可查看付费内容。
查看详情

相关文章

评论
暂无评论
docker部署vue项目的实现步骤-海报

分享本文封面