How to compile vue project through docker

Introduction

Nodejs officially provides docker images, and the image comes with npm tools, that is to say, you can compile local front-end projects with docker images. What are the advantages of docker compilation compared to installing nodejs locally?

• You can install multiple versions of nodejs, you can choose to specify the version of nodejs to compile, if you want to build a build platform, this is a very good solution
• No installation, if you need to install multiple versions of nodejs, this advantage is obvious
• Will not pollute the local environment

If you are a personal development, using docker to compile a project is relatively geeky, and there is not much advantage in personal development, but if you want to build a build system, then the docker image solution is your best choice.

achieve

Although nodejs officially provides mirror practice, if the official mirror is used directly, the desired effect cannot be achieved. The reasons are as follows

• The original intention of the nodejs project is to use javascript as a back-end prediction, so the mirror is mainly used for back-end services
• Although the image comes with the npm tool, it cannot be compiled normally due to WORKDIR. After trying various methods, it still cannot be compiled smoothly.
• The cost of doing a secondary build based on the official image is very low, so it is recommended to do a secondary build according to your own needs

Let's first implement a mirror image of npm install

• Prepare Dockerfile

from node:16.3.0
WORKDIR /user/app
ENTRYPOINT ["npm","install"]

WORKDIR must be specified, just mount the project to WORKDIR when using

• Build image

docker build -t node-install:16.3.0 .

• We compile this project A Case Study

➜ docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -it --rm node-install:16.3.0

up to date, audited 615 packages in 12s

1 package is looking for funding
  run `npm fund` for details

63 vulnerabilities (17 low, 17 moderate, 27 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

After successfully completing npm install, we can make another build mirror user build, but we can put install and build into a mirror.

• Prepare the script entrypoint.sh

#!/bin/bash
npm install
npm run build

• Dockerfile

from node
WORKDIR /user/app
COPY entrypoint.sh /
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

• Build mirror

docker build -t node-build:16.3.0 .

• test

➜ docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -it --rm node-build:16.3.0

.....

> build
> cross-env NODE_ENV=production webpack --progress --hide-modules

Hash: a6a2352d086bcda1ccb9                                                           
Version: webpack 2.5.1
Time: 2581ms
   Asset     Size  Chunks             Chunk Names
build.js  87.9 kB       0  [emitted]  main

In this way, we have made a very convenient front-end build image

supplement

As mentioned earlier, because of the WORKDIR relationship, the official mirror cannot be used to compile the project. Later, I learned that docker can specify WORKDIR when it starts, so it can also be compiled by specifying WORKDIR.

docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -w /user/app -it --rm node:16.3.0 npm install

docker run -v /u01/workspace/vue-2.0-simple-routing-example:/user/app -w /user/app -it --rm node:16.3.0 npm run build

reference

• how to use docker to compile java project