[AIRFLOW-3906] Add npm compile to docker file

[ffinfo]

Make sure you have checked all steps below.

Jira

• My PR addresses the following Airflow Jira issues and references them in the PR title.
  • https://issues.apache.org/jira/browse/AIRFLOW-3906

Description

Adding nom, compile step to Dockerfile

Tests

• My PR adds the following unit tests OR does not need testing for this extremely good reason:

Commits

• My commits all reference Jira issues in their subject lines, and I have squashed multiple commits if they address the same issue. In addition, my commits follow the guidelines from "How to write a good git commit message":
  1. Subject is separated from body by a blank line
  2. Subject is limited to 50 characters (not including Jira issue reference)
  3. Subject does not end with a period
  4. Subject uses the imperative mood ("add", not "adding")
  5. Body wraps at 72 characters
  6. Body explains "what" and "why", not "how"

Documentation

• In case of new functionality, my PR adds documentation that describes how to use it.
  • When adding new operators/hooks/sensors, the autoclass documentation generation needs to be added.

Code Quality

• Passes flake8

[codecov-io]

Codecov Report

Merging #4724 into master will increase coverage by 0.15%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #4724      +/-   ##
==========================================
+ Coverage   74.29%   74.44%   +0.15%     
==========================================
  Files         450      450              
  Lines       28970    28970              
==========================================
+ Hits        21522    21567      +45     
+ Misses       7448     7403      -45

Impacted Files	Coverage Δ
airflow/www/views.py	76.27% <0%> (+0.21%)	⬆️
airflow/bin/cli.py	67.22% <0%> (+0.41%)	⬆️
airflow/www/app.py	97.32% <0%> (+0.89%)	⬆️
airflow/operators/docker_operator.py	97.7% <0%> (+1.14%)	⬆️
airflow/contrib/hooks/gcp_dataflow_hook.py	75.75% <0%> (+1.21%)	⬆️
airflow/task/task_runner/base_task_runner.py	79.31% <0%> (+1.72%)	⬆️
airflow/hooks/dbapi_hook.py	79.03% <0%> (+2.41%)	⬆️
airflow/_vendor/slugify/slugify.py	60.63% <0%> (+4.25%)	⬆️
airflow/contrib/hooks/pinot_hook.py	82.5% <0%> (+5%)	⬆️
airflow/hooks/hdfs_hook.py	92.5% <0%> (+60%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 71140dd...02d1dea. Read the comment docs.

[Fokko]

@verdan PTAL

[jmcarp]

Do we want to add the node runtime to the image, or just the compiled assets? If just the assets, this might be a good use case for multi-stage builds.

[Fokko]

@ffinfo can you pick up @BasPH his comments so we can get this in? Having a UI makes testing a lot easier.

@jmcarp Good point, maybe create a ticket for multistage Docker builds? There is also a multi-layered version here: #4543

[ffinfo]

@jmcarp You know this exists? https://cwiki.apache.org/confluence/display/AIRFLOW/AIP-10+Multi-layered+official+Airflow+image

@Fokko I this is ready for merge now

[zhongjiajie]

Could we set env in L19 rather than L55?

[ashb]

-1 to doing it this way: Having Node and all of the node_modules in the final image isn't great.

Instead we should use a multi-stage docker file so this line becomes:

COPY --from=assert-builder /opt/airflow/airflow/www/static/dist /opt/airflow/airflow/www/static/dist

And then earlier in the docker file we have (i.e. right at the start)

FROM node as asset-builder
COPY ./airflow/www/package*json /opt/airflow/airflow/www/package.json
RUN npm install
COPY ./airflow/www/static/ /opt/airflow/airflow/www/static/
RUN npm run prod

[zhongjiajie]

Same as @jmcarp said in #4724 (comment)

[Fokko]

Thanks @ffinfo for picking this up.

To avoid a scope creep, I'll merge this one, and I've created a new ticket for turning this into a multi stage build: https://issues.apache.org/jira/browse/AIRFLOW-3976

I would like merge this so I have a working UI again.