Docker+Nginx镜像部署 Vue 项目

最新推荐文章于 2024-09-06 15:37:04 发布

原创

最新推荐文章于 2024-09-06 15:37:04 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用Docker和Nginx部署Vue应用。首先，通过执行命令编译打包Vue项目生成dist文件夹。接着，新建Dockerfile并配置Nginx，确保nginx.conf文件正确挂载。然后，执行Docker打包命令生成镜像，并使用-d参数后台运行容器，将端口映射并挂载配置文件。通过检查运行结果和日志，可以确保Vue项目成功部署并正常运行。最后，学习了各种Docker命令，如查看镜像、容器、删除容器和镜像等。

@Docker + Nginx 镜像部署 Vue 项目

一、编译打包Vue项目

进入Vue项目目录，执行命令

yarn build / npm run build

生成dist文件夹

二、构建镜像

新建 Dockerfile

vi Dockerfile

// An highlighted block
#导入nginx镜像
FROM nginx
MAINTAINER soapy <soapy2018@gmail.com>
#把当前打包工程的html复制到虚拟地址
COPY dist/ /usr/share/nginx/html/
#使用自定义nginx.conf配置端口和监听，如果后面启动容器使用挂载方式可以不用执行如下两个命令
RUN rm /etc/nginx/conf.d/default.conf
ADD nginx/default.conf /etc/nginx/conf.d/
RUN /bin/bash -c 'echo init ok!!!'

nginx的主配置在容器的/etc/nginx/nginx.conf，该文件又会include配置文件/etc/nginx/conf.d/default.conf，注意这些目录都是容器的目录，不是服务器的目录。