dockerfile部署前端vue打包的ist文件实战
在Dockerfile中部署前端Vue打包的dist文件
创建一个Dockerfil
在Dockerfile中部署前端Vue打包的dist文件,你需要创建一个Dockerfile,然后在其中定义如何构建你的Docker镜像。
以下是一个基本的示例:
首先,你需要在你的项目根目录下创建一个Dockerfile文件。这个文件会告诉Docker如何构建你的应用的镜像。
# 基于Node的镜像,用于构建我们的前端代码 FROM node:lts-alpine as build-stage # 设置工作目录 WORKDIR /app # 复制package.json和package-lock.json COPY package*.json ./ # 安装依赖 RUN npm install # 复制项目文件 COPY . . # 打包项目 RUN npm run build
创建一个用于运行你的应用的Dockerfile
然后,你需要创建一个用于运行你的应用的Dockerfile。这个文件会从构建阶段复制你的打包文件,并使用nginx来提供这些文件。
# 基于Nginx的镜像,用于运行我们的应用 FROM nginx:stable-alpine as production-stage # 从构建阶段复制打包文件 COPY --from=build-stage /app/dist /usr/share/nginx/html # 暴露80端口 EXPOSE 80 # 启动Nginx CMD ["nginx", "-g", "daemon off;"]
最后,你可以使用以下命令来构建和运行你的Docker镜像:
docker build -t vue-app . docker run -it -p 8080:80 --rm --name vue-app-container vue-app
这样,你的Vue应用就会在Docker容器中运行,你可以通过访问http://localhost:8080来查看你的应用。
以上就是dockerfile部署前端vue打包的ist文件实战的详细内容,更多关于dockerfile部署vue打包dist的资料请关注脚本之家其它相关文章!
相关文章
Docker镜像推送(push)到Docker Hub的实现
这篇文章主要介绍了Docker镜像推送(push)到Docker Hub的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-09-09ubuntu系统使用docker gitlab 磁盘空间满的问题及解决
这篇文章主要介绍了ubuntu系统使用docker gitlab 磁盘空间满的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-05-05
最新评论