在vue-app目录下创建一个名为Dockerfile的文件,内容如下: # 使用node作为基础镜像FROMnode:14ASbuild# 设置工作目录WORKDIR/app# 复制package.json和package-lock.jsonCOPYpackage*.json ./# 安装依赖RUNnpm install# 复制项目文件COPY. .# 构建项目RUNnpm run build# 使用nginx来提供服务FROMnginx:alpine# 复制构...
在Dockerfile中部署Nginx和Vue应用,通常涉及以下几个步骤。以下是一个详细的指南,包括Dockerfile的编写、Nginx配置的设置、Docker镜像的构建、容器的运行以及测试步骤。 1. 编写Dockerfile以构建包含Nginx和Vue应用的镜像 首先,我们需要在Dockerfile中定义基础镜像、复制Vue应用的构建产物、安装Nginx并配置它。 Dockerfile ...
编译项目得到dist文件夹 npm run build 1. 4.编写Dockerfile文件 直接在src同级目录下,新建名为Dockerfile的文件, 编写Dockerfile文件,Dockerfile文件,具体怎么写,参考Docker Dockerfile | 菜鸟教程,下面是例子 # Docker image for vue application # VERSION 1.0.0 # Author: Kannokaze ### 基础镜像,使用nginx镜...
1. npm build 打包vue项目生成dist目录文件 2. 编写Dockerfile文件 FROM nginx:1.20 COPY dist /usr/share/nginx/html/dist COPY nginx/default.conf /etc/nginx/conf.d/default.conf EXPOSE 80 3. 编写启动脚本 #! /bin/bash echo "demo-vue..." sleep 3 docker stop demo-vue sleep 2 docker rm demo...
docker images#删除镜像docker rmi -f 镜像ID 查看容器内nginx配置 #进入前面建好的容器docker exec -it 容器ID bash#容器内部执行,进入项目文件存放位置cd /usr/share/nginx/html/#容器内部执行,查看nginx配置是否正确more /etc/nginx/conf.d/default.conf...
一、前端VUE与Nginx打成docker镜像 1.资源需求 dist:VScode编译vue的资源 Dockerfile:打镜像需要的资源 nginx.conf:根据需求配置的Nginx配置文件 2.Dockerfile内容 FROM nginx RUNmkdir/app COPY ./dist /app COPY ./nginx.conf /etc/nginx/nginx.conf ...
目前在公司维护的测试工具平台,有时候前端需要更新,改完前端 Vue 项目之后,还得在执行 npm run build 打包整个项目,再把打包好的整个项目拷贝过去后端项目中,这一步骤非常繁琐且不符合前后端分离的思想;为此考虑使用 Nginx 部署前端项目,后期可以配合 rancher 进行 CICD。
Vue 对于Vue3 项目,可以使用 Vite 构建和打包,并通过 Nginx 对外提供服务 首先添加一个 Nginx 的配置文件 代码语言:conf 复制 worker_processes 4; events { worker_connections 1024; } http { server { listen 8080; root /usr/share/nginx/html/app; ...
可以看到,上面的两个步骤,使用了不同的环境,打包静态资源的时候是在 node 环境,而最终的运行环境是 nginx 基础镜像中,所以这很符合多阶段构建的场景。 多阶段构建步骤 Dockerfile 中的 multi-stage 特性允许在一个 Dockerfile 引用多个基础镜像,可以对每个引用的镜像进行单独的操作,然后可以将每个镜像中的文件等内容...
使用Dockerfile构建vue开发的前端镜像 vue开发的前端,当我们通过npm run build打包出静态文件包后,只需要将静态文件包放在nginx下就可以运行了。 准备Dockerfile文件 # 基础镜像使用nginx:1.22.0FROM nginx:1.22.0# 复制静态文件到镜像中WORKDIR /usr/share/nginx/html/COPY dist /usr/share/nginx/html/# 复制ngi...