创建Dockerfile 在vue-app目录下创建一个名为Dockerfile的文件,内容如下: # 使用node作为基础镜像FROMnode:14ASbuild# 设置工作目录WORKDIR/app# 复制package.json和package-lock.jsonCOPYpackage*.json ./# 安装依赖RUNnpm install# 复制项目文件COPY. .# 构建项目RUNnpm run build# 使用nginx来提供服务FROMnginx:...
#在 Dockerfile 所在目录构建镜像dockerbuild-tmy-nginx.# 运行容器dockerrun--namemy-nginx-container-d-p8080:80 my-nginx 1. 2. 3. 4. 5. 上述命令中,我们首先使用docker build命令构建一个名为my-nginx的镜像。然后,使用docker run命令运行一个名称为my-nginx-container的容器,并将容器的 80 端口映射到...
在Vue 项目的根目录下,新建一个Dockerfile,内容如下: # 使用 nginx 作为基础镜像FROMnginx:latest # 删除默认的 nginx 静态文件目录RUNrm -rf /usr/share/nginx/html/*# 复制 Vue 打包后的 dist 文件到 nginx 目录 COPY dist/ /usr/share/nginx/html/ # 复制自定义的 Nginx 配置文件(可选) COPY nginx....
location= /50x.html { root/usr/share/nginx/html; } } 三、编写Dockerfile文件 # 使用nginx镜像 FROM nginx # 作者 MAINTAINER hy # 删除nginx 默认配置 RUN rm/etc/nginx/conf.d/default.conf # 添加我们自己的配置default.conf 在下面 ADDdefault.conf /etc/nginx/conf.d/# 把刚才生成dist文件夹下的...
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..." ...
首先将需要的文件拷贝至要创建dockerfile目录中 这边已经编写好nginx.conf配置文件,到时候直接build成镜像,如下是我nginx的配置文件内容 安装nginx.1.16.1版本,自定义版本 dockerfile内容如下 FROM centos #创建项目所需目录 RUN mkdir -p /www/ctm/xcy-project/yun-app #创建这个目录是为了指定安装nin...为什么...
是基于当前目录的Dockerfile来构建镜像 docker build vuenginxcontainer image 查看本地镜像,运行命令 docker image ls | grep vuenginxcontainer 到此时我们的 vue 应用镜像 vuenginxcontainer 已经成功创建。接下来,我们基于该镜像启动一个docker容器。 4.5 启动 vue app 容器 Docker 容器Container: 镜像运行时的实体...
4. 在任意目录下新建文件 dockerfile 。内容如下: 代码语言:javascript 代码运行次数:0 运行 AI代码解释 # 设置基础镜像FROMnginx # 定义作者MAINTAINERjiangyu #将dist文件中的内容复制到/usr/share/nginx/html/这个目录下面COPYdist//usr/share/nginx/html/ ...
将vue项目打包 npm run build 同级目录下会生成dist文件夹 开始用docker打包vue项目成镜像 前提你的ubuntu环境下有docker 在dist同级目录下创建Dockerfile文件进行写入: FROM nginx EXPOSE 80 COPY /dist /usr/share/nginx/html ENTRYPOINT nginx -g "daemon off;" ...
/root/code/project_frontend/dist 地址为前端Vue项目打包目录 服务器 nginx 默认ip地址 http://10.255.xxx.xxx/ , 默认前端项目页面 问题记录 如果出现访问 http://10.255.xxx.xxx/ 地址页面 403 的情况,一般是由于目录权限问题导致,使用 chmod -R 777 修改对应的目录权限即可 eg. chmod -R 777 /root HTTP...