怎样用docker生成前端项目的镜像

本文介绍了如何将Vue项目打包成dist文件夹,并结合nginx配置,通过编写Dockerfile来创建一个包含前端项目的nginx镜像。在镜像中,前端项目位于/usr/share/nginx/customer/dist,且监听8889端口。Dockerfile详细步骤包括基于nginx镜像、创建文件夹、复制配置文件和静态资源、开放端口,最后生成并命名镜像。
摘要由CSDN通过智能技术生成

  前面我已经成功将Vue项目生成的dist文件夹上传服务器,并通过nginx,在服务器搭起了网站,但是小组作业需要把整个项目都放到docker(我这只是项目中customer那部分而已),所以我尝试着生成docker镜像,方便其他组员使用。
  首先我把dist文件夹还有之前修改过的nginx的配置文件nginx.conf放在同一个目录,然后准备在这个目录编写Dockerfile(本目录就只有dist文件夹、nginx.conf、Dockerfile这三样东西),写好之后就可以生成镜像了。
  我最终要得到的镜像是在指定位置放置好了dist文件夹的nginx,这样当别人用这个镜像生成容器,我的前端项目也就直接能跑起来了。
  不知道是不是docker里最新版本的nginx和我在服务器配置的nginx版本不同,我发现它们的文件结构是不一样的,docker里直接安装的nginx配置文件在镜像内的/etc/nginx/nginx.conf位置,具体内容也有所不同,它将原来的nginx.conf的内容分成了两个文件,在其中include了它的另外一部分,不过总体是和之前的nginx.conf等价的,因此我们将之前准备的nginx.conf将镜像内的nginx.conf覆盖也不会出问题,只是资源的路径要做相应改动。由于我打算将项目放在镜像的/usr/share/nginx/customer/dist位置,并开放8889端口,因此nginx.conf部分配置如下:

# yang jianfeng add for web server
server {
    listen
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值