侧边栏壁纸
博主头像
Monkey部落博主等级

Monkey部落,分享技术、经验、遇到的问题及解决方法,欢迎大家互相讨论分享。

  • 累计撰写 59 篇文章
  • 累计创建 36 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录

Vue项目打包成docker镜像部署

Monkey部落
2022-10-09 / 0 评论 / 1 点赞 / 559 阅读 / 693 字

Vue项目打包成docker镜像部署

一、介绍

我们部署Vue项目,可以build之后,直接放到nginx下面即可,今天给大家介绍创建docker镜像,使用docker镜像启动容器运行部署Vue项目的方式,可以尝试尝试,原理和使用nginx部署一样,不过是使用的docker容器而已,内部还是使用的是nginx作为基础镜像。

二、docker安装

docker安装就不介绍了,不懂的伙伴可以去看我的docker安装文章。之前也写过关于docker介绍、安装的文章,不了解如何安装使用的可以看以往的文章。

三、编写DockerFile

docker安装完成之后,在我们需要部署的项目目录中新建文件dockerFile。文件内容如下:

FROM nginx:latest
LABEL Author xpy
COPY build /usr/share/nginx/html

第一行:设置基础镜像,基础镜像使用nginx

第二行:作者信息

第三行:将build文件夹下面的内容拷贝到/usr/share/nginx/html目录下面(nginx的默认项目路径),其中build文件夹有可能是dist文件夹,如果没有,重新npm run build一下就出来了,也就是我们Vue项目打包之后我们正常使用nginx是拷贝过去的文件夹。

四、创建镜像

docker build -t xxx .

注意:后面的.不能省略,镜像创建成功之后使用docker images即可看到自己创建的镜像

五、启动镜像

docker run -d --name xxx -p 8888:80 xxx

启动命令说明:

-d: 容器后台启动

—name : 容器名称

-p 8888:80 : 将nginx容器的80端口映射到主机的8888端口,我们访问时直接访问主机ip+映射到主机的端口,这里是8888,如果有路径,后面还要带上路径。

xxx : 我们刚刚创建的自己的镜像的名称

六、总结

以上步骤即可帮助我们使用docker容器部署Vue项目,原理其实和我们使用nginx部署Vue是一样的,我们打包自己的镜像使用的基础镜像也是nginx,感兴趣的小伙伴可以自己动手尝试尝试。

关注微信公众号「平哥技术站」, 每日更新,在手机上阅读所有教程,随时随地都能学习。

觉得写的还不错的小伙伴,请作者喝杯咖啡☕ ,支持一下。😊

如有侵权请立即与我们联系,我们将及时处理,联系邮箱:865934097@qq.com。

1

评论区