Docker环境运行Vue项目全过程
更新时间：2025年06月21日 10:19:08 作者：°Fuhb
这篇文章主要介绍了Docker环境运行Vue项目全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
1. 打包VUE工程
在vue工程根目录下，执行打包命令
npm run build
随后将生成 dist文件夹，里面的内容就是打包后的文件
2. 创建Nginx配置文件
在vue工程根目录下，创建文件 default.conf，内容如下：
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html/;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
}3. 创建Dockerfile
在vue工程根目录下，创建文件 Dockerfile，内容如下：
FROM nginx MAINTAINER fuhb RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/
说明
- FROM nginx：该镜像是基于nginx:latest镜像构建的
- MAINTAINER fuhb：添加说明
- RUN rm /etc/nginx/conf.d/default.conf：删除nginx自带的default.conf配置文件
- ADD default.conf /etc/nginx/conf.d/：将default.conf复制到/etc/nginx/conf.d/下，用本地的default.conf配置来替换nginx镜像里的默认配置
- COPY dist/ /usr/share/nginx/html/：将项目根目录下dist文件夹（构建之后才会生成）下的所有文件复制到镜像/usr/share/nginx/html/目录下
4. 创建镜像
把dist、default.conf、Dockerfile放在同一个目录下，例如 /usr/local/docker/web/
执行如下命令，注意最后有个点
docker build -t my-web .
执行命令docker images，会发现生成了一份名为 my-web的镜像
5. 创建容器
镜像已经有了，下一步就可以创建并运行容器了，执行如下命令
docker run -d --name my_web -p 10002:80 my-web
然后执行 docker ps -a ，会发现容器成功创建并运行了，此时可以通过10002端口号访问VUE站点。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了docker-compose配置并部署redis服务的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
浅谈Docker Desktop for Linux和Docker Engine
本文主要介绍了Docker Desktop for Linux和Docker Engine区别,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了Docker可视化管理工具DockerUI的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了使用Docker构建一个Git镜像使用clone仓库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
Docker容器只是一个运行于宿主操作系统host OS上的应用进程,所以你需要一个镜像来运行它,Docker镜像以进程的方式运行时就叫做Docker容器,这篇文章主要给大家介绍了关于docker容器状态转换管理命令的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了详解如何使用Docker部署一个web项目并打包成镜像文件,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
今天在修改Docker内部文件的时候,安装vim居然失败了,在执行apt-get update时一直有几个404,解决无果,最后放弃安装vim,将文件拷贝出来修改,所以本文给大家分享一下如何修改Docker内部文件的方法,需要的朋友可以参考下2024-01-01
Docker忽略文件是指在Docker镜像构建过程中,用于忽略指定文件或目录的一种机制,本文主要介绍了Docker中忽略文件的实现,具有一定的参考价值,感兴趣的可以了解一下2023-10-10
这篇文章主要介绍了docker实现重新打tag并删除原tag的镜像，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Docker一行命令完成FTP服务搭建的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
最新评论