Docker打包vue项目镜像(生产环境)

Docker打包vue项目镜像

一、第一步 

新建一个文件夹,在该文件夹目录下,新建一个nginx配置文件,代码如下:

default.conf

server {
listen 80;
server_name localhost; # docker服务宿主机的ip
 
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
 
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}

二、第二步

在该文件夹目录下,在建一个Dockerfile文件

Dockerfile

FROM nginx
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/

三、第三步

把vue项目打包后的dist文件夹拷贝到该文件夹目录下

1ea17817cd9247e088080eeabe7f7ff0.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Docker 是一种流行的容器技术,可以用来部署不同的应用程序,包括前端应用程序。Vue 是一种流行的前端框架,用于构建现代化的 SPA 单页面应用程序。当我们使用 Docker 来部署 Vue 应用程序时,我们需要将 Vue 应用程序打包Docker 镜像中,并设置端口映射以便能够通过 Web 浏览器访问该应用程序。 Vue 应用程序通常使用 Node.js 作为运行时环境,因此我们可以使用 Node.js Docker 镜像来部署 Vue 应用程序。下面是一个示例 Dockerfile: ``` FROM node:14.16.0-alpine3.13 WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 8080 8081 8082 CMD ["npm", "run", "serve"] ``` 在上面的 Dockerfile 中,我们首先从 Node.js 14.16.0-alpine3.13 镜像中构建一个容器。工作目录被设置为 /app。然后我们将 package.json 和 package-lock.json 文件复制到容器中,并运行 npm install 安装所有依赖。复制所有其他文件后,我们设置 EXPOSE 指令以将端口 8080、8081 和 8082 映射到宿主环境。最后,我们可以使用 CMD 指令启动和运行 Vue 应用程序。 在 Docker 容器中运行 Vue 应用程序后,我们可以使用 docker run 命令将容器映射到计算机上的端口。例如,如果我们在本地计算机上使用端口 8000 作为映射端口,我们可以运行以下命令: ``` docker run -p 8000:8080 -p 8001:8081 -p 8002:8082 vue-app ``` 在上述命令中,-p 选项指定了端口映射。我们将容器中端口 8080、8081 和 8082 映射到宿主计算机上的端口 8000、8001 和 8002。vue-app 是我们构建的 Docker 镜像的名称。 总结来说,我们可以使用 Docker 容器来部署 Vue 应用程序,并使用端口映射将容器中的端口映射到宿主计算机上的端口。因此,我们可以在一个计算机上同时运行多个 Vue 应用程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

volodyan

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值