Assumes you have an application that has frontend part written on Angular, React, Svetle, Vue or any Javascript framework with some backend.

假设您的应用程序的前端部分是用Angular，React，Svetle，Vue或任何带有后端的Javascript框架编写的。

One of most common use case for that is build one app image like your-app:development included Node & Yarn or NPM like I do this:

最常见的用例之一是构建一个像your-app这样的应用程序映像：开发包含Node＆Yarn或NPM，就像我这样做：

FROM node:14-alpine as node FROM ruby:2.7.0-alpine3.11 as build-base COPY --from=node /usr/local/bin/node /usr/local/bin/ COPY --from=node /opt/yarn-v1.22.4 /opt/yarn-v1.22.4 RUN ln -s /usr/local/bin/node /usr/local/bin/nodejs # Here is you can copy npm from node to build-base if you preffer use it RUN ln -s /opt/yarn-v1.22.4/bin/yarn /usr/local/bin/yarn RUN ln -s /opt/yarn-v1.22.4/bin/yarnpkg /usr/local/bin/yarnpkg RUN node --version RUN mkdir -p /app WORKDIR /app COPY . ./ # install app server deps RUN gem update --system RUN gem install bundler:2.1.4 RUN bundle config --global jobs $(nproc --all) RUN bundle install # install frontend deps RUN yarn install # optinal copy entrypoint inside image # COPY docker/entrypoint.sh /usr/bin/ # RUN chmod +x /usr/bin/entrypoint.sh # ENTRYPOINT ["entrypoint.sh"]

So then usually we build an image like you-app-name:development and use it for up all docker-copmose services.

因此，通常我们会构建一个像you-app-name：development的映像，并将其用于所有docker-copmose服务。

这是用于前端服务的更轻量级的解决方案！ (Here is more lightweight solution to up yo frontend service!)

version: "3.8" volumes: node_modules: services: ui: image: node:14.8.0-alpine3.12 ports: - 3000:8080 working_dir: /app volumes: - ./ui:/app - node_modules:/app/node_modules command: yarn serve

And at your package.json file prepend yarn install at your `“scripts“ -> “serve“ block or whatever you use for starting your frontend. like

然后在package.json文件中，将yarn预先安装在“ scripts”->“ serve”块或用于启动前端的任何位置。 喜欢

Thats it your node_modules is stored inside docker volumes, you can easly switch node version & base image.

就是说，您的node_modules存储在Docker卷中，您可以轻松切换节点版本和基本映像。

Thanks 🙏 for reading.

感谢🙏的阅读。

翻译自: https://medium.com/@r3cha/fastest-way-to-up-you-frontend-app-service-with-docker-docker-compose-5dfce04ecf18