使用Docker将vue前端项目构建成容器镜像并运行

本文主要介绍关于docker,vue.js,容器的知识点，对使用Docker将vue前端项目构建成容器镜像并运行和使用docker部署vue项目有兴趣的朋友可以看下由【雨云21】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的Docker相关技术问题。

使用docker部署vue项目

将项目构建成容器镜像，然后再使用Docker运行该容器镜像

找一个能正常运行的项目

这里提供了一个待办事项项目的源码：https://yuyunyaohui.lanzoul.com/iRG4o06ht6nc，下载后解压：

用前端项目编辑器，比如Visual Studio Code或WebStorm打开：

运行以下命令下载依赖和运行：

npm install --registry=https://registry.npm.taobao.org
npm run dev

运行完成后在浏览器中访问http://localhost:3000/

构建应用的容器镜像

在package.json文件的同级目录下，新建一个Dockerfile文件，注意：该文件没有文件扩展名

FROM node:12-alpine
# Adding build tools to make yarn install work on Apple silicon / arm64 machines
RUN apk add --no-cache python2 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "src/index.js"]

在Dockerfile文件的当前目录打开命令行工具：按住Shift，鼠标右键，选择下图圈起来的其中一个

运行下面的命令：

docker build -t getting-started .

-t 标签 getting-started 自定义标签名 . 表示Docker应该在当前目录找Dockerfile

经过漫长的等待，如上图所示，镜像构建完成，接下来打开Docker Desktop就可以看到该镜像：

启动容器

使用命令启动容器，并指定刚刚创建的镜像的名称（用命令行工具直接运行）：

docker run -dp 3000:3000 getting-started

-d和-p标志着：我们以“分离”模式（在后台）运行新容器，并在主机的 3000 端口和容器的 3000 端口之间创建映射。没有端口映射，我们将无法访问应用程序（直接打开Docker Desktop运行镜像，我们并不能访问他）。

几秒钟后，打开 Web 浏览器访问http://localhost:3000。可以看到我们的应用程序！

打开Docker仪表盘，就发现容器正在运行

如果我将命令改为：

docker run -dp 3001:3000 getting-started

那我们浏览器访问http://localhost:3001/，才能访问到项目，前面这个3001是主机端口，后面那个3000是docker容器端口

本文《使用Docker将vue前端项目构建成容器镜像并运行》版权归雨云21所有，引用使用Docker将vue前端项目构建成容器镜像并运行需遵循CC 4.0 BY-SA版权协议。