时间戳

首页 > 技术文章 > 怎样用Docker部署前端应用

怎样用Docker部署前端应用

wolfstark 2022-02-18 10:26 原文

怎样用Docker部署前端应用

现在微服务盛行，docker作为容器化工具派上了很大的用场，用docker部署应用已经成为大多数devops的首选项。当然docker的用处也不仅仅限于部署，在dev的开发过程中，也能成为很好的工具。例如在开发过程中我们需要用到数据库，并不需要在开发主机上手动安装数据库，你只需要拉取相应的镜像就能使用，省去了繁琐的配置。但本文并不打算介绍这方面的东西。以前在项目上，手动部署过前端，但是并没有使用docker，我们就讨论一下怎么用docker来部署前端应用。

传统前端的部署方式

无论你使用Angular，还是React来开发你的前端应用，最终到部署的时候都需要你打包生成一系列的静态文件，然后将这些文件放到部署机的静态文件夹中。当然还需要你在将nginx配置导向你的静态目录中，才能保证访问部署机能访问到相应的文件。

build

首先我们需要使用node镜像来当作基础镜像，然后将源码拷贝到镜像中，然后使用build命令打包。

FROM node:latest as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

注意在以上的代码里面执行了两次copy，第一次只是拷贝了package.json文件，第二次拷贝了全部的文件。当你的应用需要持续化部署的时候，会很有意义。

比如你的每次提交，都能通过CD部署到dev环境，这时候你可能就需要考虑，是不是我每次提交都需要重新安装依赖。可能在你没有更改package.json文件的时候，你并不希望它执行很耗时的npm install，而且在我们的开发中更改package.json文件的频率并不高。

docker的cache机制，能帮你避免不必要的依赖安装的耗时。当你在你的部署机上第一次构建这个镜像的之后，镜像保存在你的本地，第二次构建的时候，他会根据你COPY指令中对应的内容是否与上一次构建的内容一致来决定是否要启用上一次执行的cache，如果检查到COPY package.json .这一层中，package.json文件和上次没有任何改变，那么接下来的RUN npm install这一层就会使用上一次执行的cache。

所有的指令执行完，就完成了在镜像中打包，所有的静态文件都会在/app/build目录下。
 

部署

当build的步骤执行完，剩下的就是部署了，与传统部署一样我们依旧需要将静态文件通过nginx来部署。

如果我们使用部署机上的nginx，那需要我们将build镜像中的打包好的文件拷贝到部署机的nginx静态目录中，还需要配置nginx的配置文件，然后再将nginx启动。然而我们并不需要这样，我们依旧可以使用docker来完成这些事情。虽然执行的步骤相似，但是比手动操作方便很多。

我们在之前build之后，所有打包好的文件依旧在build镜像中，但是现在我们需要使用nginx镜像来部署，那么要做的第一件事就是将build镜像中的静态文件拷贝到新的nginx镜像中。在dockfile中指定以下的指令就可以完成这件事。

COPY --from=builder /app/build /usr/share/nginx/html
--from=builder的参数表明，copy动作是要从该指令之前build完成的stage中拷贝，等号右边的参数是我们之前的build镜像中指定的名字。/usr/share/nginx/html目录是镜像中nginx使用的静态目录。这样就完成了拷贝。
接下来就是需要配置nginx了，这些配置同样可以放在我们的代码库中，然后拷贝到nginx镜像中替换掉其默认的配置。
 
 server {
        listen       80;
        server_name  localhost;

        location /metadata {
            proxy_pass  http://backend:80;
        }

        location / {
            root   /usr/share/nginx/html;
            index  index.html index.htm;
        }
示例中仅仅给出了http部分一个server简单的配置，其余部分的用默认就好。我们在这里不涉及关于如何配置host让你的ningx镜像通过host名字找到你的后端，我们假设这些配置已经完成，然后简单的配置了代理，将关于/metadata的请求转发到你的后端机器上。接下来就是将你的配置文件拷贝到nginx镜像中了。

COPY nginx.conf /etc/nginx

到这里，所有关于dockerfile的配置都完成了，下面是配置完的完整的dockerfile

FROM node:latest as builder
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build

FROM nginx:latest
COPY nginx.conf /etc/nginx
COPY --from=builder /app/build /usr/share/nginx/html

接下来就是运行了，先build镜像

docker build -t frontend .

在build之后就可以将其运行起来了

docker run --name frontend -p 80:80 frontend:latest

总结

docker部署前端，让我们省去了繁琐的手动操作，这在日常开发的过程中极为总要，我们可以在代码库中就计划好如何部署应用，将部署的操作都命令话，集中成一个脚本就可以帮你完成繁琐的事情，让持续化部署更加简单。docker的配置非常简单，但是在简单之余我们也应该考虑性能，使用多大的镜像，每个stage执行的先后顺序等，这些可能都会影响到部署耗时。然而这些都是需要对docker深入的了解，以及长期的实践经验积累才能做到。

 

原文地址：https://www.jianshu.com/p/08e6f00bb689

推荐阅读