创建Dockerfile 在vue-app目录下创建一个名为Dockerfile的文件,内容如下: # 使用node作为基础镜像FROMnode:14ASbuild# 设置工作目录WORKDIR/app# 复制package.json和package-lock.jsonCOPYpackage*.json ./# 安装依赖RUNnpm install# 复制项目文件COPY. .# 构建项目RUNnpm run build# 使用nginx来提供服务FROMnginx:...
cdmy-vue-appnpmrun build 1. 2. 构建完成后,Vue 项目的静态文件将保存在dist文件夹中。 创建Dockerfile 在项目根目录下创建一个名为Dockerfile的文件,内容如下: # 使用官方 Nginx 镜像FROMnginx:alpine# 将构建的 Vue 项目复制到 Nginx 的公共文件夹COPY./dist /usr/share/nginx/html# 替换默认的 Nginx ...
在Dockerfile中部署Nginx和Vue应用,通常涉及以下几个步骤。以下是一个详细的指南,包括Dockerfile的编写、Nginx配置的设置、Docker镜像的构建、容器的运行以及测试步骤。 1. 编写Dockerfile以构建包含Nginx和Vue应用的镜像 首先,我们需要在Dockerfile中定义基础镜像、复制Vue应用的构建产物、安装Nginx并配置它。 Dockerfile ...
一、打包vue项目 npm run build 二、docker网上拉取nginx镜像 docker pull nginx 三、vue项目打包文件放到服务器上,创建 dockerfile(参考第八点,将nginx配置文件放置在宿主机,通过dockerfile复制到镜像指定文件) [root@VM-12-13-centos vue]# mkdir dockerHRSass [root@VM-12-13-centos vue]# cd dockerHRSass...
用vue cli 创建一个vue项目,修改一下创建出来的项目,在页面上写一个前端接口请求,构建一版线上资源 ,基于nginx docker镜像构建成一个前端工程镜像,然后基于这个前端工程镜像,启动一个容器 vuenginxcontainer。 启动一个基于 node 镜像的容器 nodewebserver,提供后端接口。
dockerfile: Dockerfile # 指定容器名称 container_name: eam-application # 重启机制 restart: always # hub地址,image版本 image: eam-application privileged: true volumes: - ../eam:/eam:rw - /etc/localtime:/etc/localtime # 访问端口 ports: ...
如我的目录是:/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包: 代码语言:javascript 复制 npm run build 会自动生成 dist 文件夹 。 4. 在任意目录下新建文件 dockerfile 。内容如下: 代码语言:javascript 复制 # 设置基础镜像FROMnginx ...
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..." ...
https://github.com/Mary5haw/vue-docker-nginx 项目中已经保存所有代码,只需按下面步骤运行即可启动。 新建Vue项目后,主要新建配置了nginx和Dockerfile文件,其他其实和正常搭建运行Vue项目没有变化。 将vue项目配合nginx在docker中打包运行 项目运行步骤 # 打开docker #下载docker中下载nginx docker pull nginx # 安装...