在Docker中运行Nginx和Vue

背景

使用Vue框架创建一个网站,掌握如何使用nginx在Docker容器中提供服务。

首先,我们将使用Vue CLI生成入门Vue应用程序,我们将这个应用命名vue-nginx-docker

npx @vue/cli create vue-nginx-docker

创建应用程序后,进入到新的应用程序文件夹

cd vue-nginx-docker

现在我们需要几个文件才能与Docker一起使用:Dockerfile和一个.dockerignore文件。

touch Dockerfile

对于我们的.dockerignore文件,请确保像忽略git一样忽略我们的依赖文件node_modules

echo "node_modules" > .dockerignore

构建Dockerfile

这里我们通过使用Docker的多阶段multi-stage构建完成这个过程:

  • 阶段1:用于构建前端资源的node镜像
  • 阶段2:Nginx阶段为前端资源提供服务的

阶段1:构建前端文件

我们的第一阶段将:

  • 使用node镜像
  • 将我们所有的Vue文件复制到工作目录中
  • 用yarn安装项目依赖项
  • 用yarn构建应用程序
FROM node:10 AS builder
WORKDIR /app
COPY . .
RUN yarn install && yarn build

阶段2:准备Nginx服务

我们的第二阶段将:

  • 使用Nginx镜像
  • 从Nginx镜像中删除所以不需要的静态文件
  • builder我们在第一阶段创建的容器中复制我们的静态文件
  • 为我们的容器指定入口点以运行nginx
FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/dist .
ENTRYPOINT ["nginx", "-g", "daemon off;"]

重要的是,Vue的dist默认将静态资源构建到该文件夹中,因此我们从那里复制文件。如果您的应用由于某种原因将文件构建到另一个文件夹中,请进行相应调整。这里我们就完成整个Dockerfile的内容了:

FROM node:10 AS builder
WORKDIR /app
COPY . .
RUN yarn install && yarn build

FROM nginx:alpine
WORKDIR /usr/share/nginx/html
RUN rm -rf ./*
COPY --from=builder /app/dist .
ENTRYPOINT ["nginx", "-g", "daemon off;"]

现在我们已经组装了Dockerfile,让我们构建一个名为vue-nginx的镜像:

docker build -t vue-nginx .

现在我们的镜像已构建,我们可以使用以下命令启动一个容器,该容器将在端口8080上为我们的应用程序提供服务。

docker run --rm -it -p 8080:80 vue-nginx

然后访问http://localhost:8080即可访问vue应用程序。

云原生生态圈版权声明:
作者:云原生生态圈
文章标题: 在Docker中运行Nginx和Vue
链接:https://devopsman.cn/archives/52
来源:云原生生态圈
投稿联系: cloud.native@qq.com 文章版权归作者所有,未经允许请勿转载。
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录