windows下利用Docker部署Vue前端项目

windows下利用Docker部署Vue前端项目

利用Dockerfile方式制作镜像,基础镜像选用最简单的nginx:latest

  1. 安装windows版本的Docker Decktop
  2. 在vue项目中创建Dockerfile配置文件,与vue项目打包后的dist文件夹同级即可。Dockerfile的内容如下:
# 该镜像是基于 nginx:latest 镜像构建的
FROM nginx:latest
# 将项目根目录下 dist 文件夹下的所有文件复制到镜像中 的/usr/share/nginx/html/ 目录下,在nginx的default.conf配置文件中也可看到相关路径配置。
COPY dist/  /usr/share/nginx/html/
# 将 nginx 目录下的 default.conf 文件复制到 etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

3.创建nginx的配置文件nginx/default.conf, dist文件夹同级即可,内容如下:

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       10086;
    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;
    }

    location /prod-api/xx {
        proxy_pass   http://ip:port/xx;
    }
    location /prod-api/xxx {
        proxy_pass   http://ip:port/xx;
    }

    #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;
    }
}
  1. 打开Docker Desktop,选用 Nginx 镜像为基础来构建vue应用镜像,所以先拉取Nginx镜像到本地,在vscode命令窗口输入如下命令:
docker pull nginx
  1. 基于nginx:lastet基础镜像构建Vue应用镜像,命令如下:
docker build -t kbs-ui-docker:1.0.0 .
  1. 基于创建的kbs-ui-docker:1.0.0镜像启动一个 Docker 容器,-v 挂载本地的nginx配置方便修改代理,–restart=always设置容器自启动 命令如下:
docker run -p 10086:10086 -d --name xxx -v E:\\project\\docker\\front\\conf:/etc/nginx/conf.d --restart=always xxx-docker:1.0.0
  1. 将镜像保存成 tar 归档文件发布版本给到实施人员、命令如下:
docker save -o xxx.tar xxx-docker:1.0.0
  1. 具体实施人员将打好的tar包导入docker中,命令如下:
docker load -i xxx.tar
  1. 制作一个docker-build.bat文件方便打包更新tar包,内容如下:
@REM 构建镜像
docker build -t xxx-docker:1.0.0 .
@REM 生成tar包
docker save -o xxx-docker.tar xxx-docker:1.0.0
文档参考

开启docker守护进程

windows下利用Docker部署前端项目

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在Docker部署Vue前端项目,可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Docker。如果没有,请根据你的操作系统安装Docker。 2. 在你的Vue项目根目录下创建一个名为`Dockerfile`的文件。 3. 打开`Dockerfile`文件,并添加以下内容: ```Dockerfile # 使用一个基础的Node镜像作为构建环境 FROM node:14.17.0 as build-stage # 设置工作目录 WORKDIR /app # 拷贝package.json和package-lock.json到工作目录 COPY package*.json ./ # 安装依赖 RUN npm install # 拷贝工程文件到工作目录 COPY . . # 构建项目 RUN npm run build # 使用Nginx作为Web服务器 FROM nginx:1.21.3 # 将构建好的项目拷贝到Nginx的目录下 COPY --from=build-stage /app/dist /usr/share/nginx/html # 配置Nginx,使其能够正确地提供Vue应用程序 COPY nginx.conf /etc/nginx/conf.d/default.conf # 暴露80端口 EXPOSE 80 # 启动Nginx服务 CMD ["nginx", "-g", "daemon off;"] ``` 4. 在Vue项目根目录下创建一个名为`nginx.conf`的文件,并添加以下内容: ``` server { listen 80; server_name localhost; # 配置路由 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } } ``` 5. 现在,使用以下命令构建Docker镜像: ``` docker build -t your_image_name . ``` 确保在命令末尾有一个点,这表示Docker将当前目录作为上下文传递给构建命令。 6. 构建完成后,可以使用以下命令运行Docker容器: ``` docker run -p 8080:80 your_image_name ``` 这将把容器的80端口映射到主机的8080端口。 现在,你的Vue前端项目已经在Docker中成功部署,并且可以通过访问`http://localhost:8080`来访问它。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值