-
Notifications
You must be signed in to change notification settings - Fork 63
Improve Dockerfile
and enable pipeline to automate docker image generation
#388
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Very excited to see the GitHub action for publishing images Ronny!
The Dockerfile you edited is used in development. We will need separate Dockerfiles for development and production. Please make two Dockerfiles with different names, restoring the original, and perhaps moving them into a docker/
directory.
Please see my note about the get-translations
script too.
* main: Replace PDM logo (#411) Add playwright e2e tests (#394) Update breakpoints to the new Tailwind config (#408) Create a global audio player (amongst many smaller improvements) (#399) Create Skeleton components (#392) Tailwind breakpoints (#403) Avoid error using only local translation files (#367) Add base Button component (#372) Use Tailwind RTL styles everywhere (#355) Add a dependencies section and remove the redundant title (#379) 🔄 Synced file(s) with WordPress/openverse (#384) Fix filters not being set on SSR (#386)
…low the use of this stage
Details of features integrated in latest commits:
To improve: A couple of points I'm still considering we can improve:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
RE core-js
: I'm confused why we have it declared as an explicit dependency. We don't reference it anywhere in the app as far as I can tell, and it would be included anyway as a dependency of several other (mostly storybook as far as I can tell) libraries.
Added a new stage called dev, with this method we don't need to create an additional file with different name, we just indicate the target in our docker-compose.yml file. The team only need to run docker compose build in their local machines to make this working.
This is really cool! I didn't know it was possible to do that but it is so much nicer than maintaining separate files for each environment.
# copy the nuxt configuration file | ||
COPY --from=builder /usr/app/nuxt.config.js . | ||
|
||
# copy distribution directory with the static content | ||
COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt | ||
|
||
# copy some files required by nuxt.config.js | ||
COPY --from=builder /usr/app/src/locales /usr/app/src/locales | ||
COPY --from=builder /usr/app/src/utils /usr/app/src/utils |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is so cool!
Dockerfile
Outdated
# production | ||
# == | ||
# application package (for production) | ||
FROM node:16 AS app |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we use node-alpine
for the app (result) image so that the final payload is smaller? I'm not totally sure we need the regular node
image at all but if we can get away with using node-alpine
for the release at least that would be nice.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@sarayourfriend done, tests worked perfectly
|
* Remove `nuxt-ssr-cache` and `patch-package` * Correct dependencies placement * Change `dropdown.spec.js` to use testing-library * Add `VIcon` to stubs in audio-track.spec.js This removes its warnings when running the test. * Bump node version to 16.13.0 on ci workflow * Keep prettier at v2.2.1 * Move `vue-i18n-extract` and `babel-jest` to devDependencies
@rbadillap could you add some testing instructions here? I tried testing this two ways and ran into issues. By the way, I tried with node:16 and node:16-alpine and get the same results:
front on ci/pipelines +0/-0 [$] via v16.13.0
❯ docker-compose up
[+] Building 2.7s (6/9)
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 1.81kB 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 430B 0.0s
=> [internal] load metadata for docker.io/library/node:16 1.1s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> ERROR [internal] load build context 1.5s
=> => transferring context: 16.20MB 1.5s
=> CANCELED [dev 1/4] FROM docker.io/library/node:16@sha256:580a0850049c59a48f06090edd48c9f966c5e6572bbbabc369ba3ecbc4855dba 1.5s
=> => resolve docker.io/library/node:16@sha256:580a0850049c59a48f06090edd48c9f966c5e6572bbbabc369ba3ecbc4855dba 0.0s
=> => sha256:bbdd5360e7c6d855d09d5bb772bdb8d96e2252ba210a5939638d8fa9305418b9 7.62kB / 7.62kB 0.0s
=> => sha256:d3a9ec6dcb7756c65db951b3a0723ca0e49e83b344f01f9eff4c1dddf626f521 2.21kB / 2.21kB 0.0s
=> => sha256:626979e62c56e192812e818d52b82f063d9f9514b1b7bae14e534e4a7c98117a 18.87MB / 49.22MB 1.5s
=> => sha256:134a528370d5dcbf5b6ba2d8c20f576504448e8f2d1debb5d2a4950a38a3ff2d 7.70MB / 7.70MB 0.5s
=> => sha256:92e12e3364b52ad043d8e79f750863ed4ca2878c4fdf45ded974508febc55fdd 9.77MB / 9.77MB 0.6s
=> => sha256:580a0850049c59a48f06090edd48c9f966c5e6572bbbabc369ba3ecbc4855dba 1.21kB / 1.21kB 0.0s
=> => sha256:1a7f2500f9574b0a495bfb031c2d52e83c96dd545ef2185737f8032567e70677 15.73MB / 52.17MB 1.5s
=> => sha256:16922d4fa4f2c649c56a586e06135309b0cc7e160a17c909e5eb349988df61aa 15.73MB / 183.99MB 1.5s
------
> [internal] load build context:
------
canceled
front on ci/pipelines +0/-0 [$] via v16.13.0 took 3s
❯ docker-compose up
[+] Building 110.1s (9/9) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 1.82kB 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 35B 0.0s
=> [internal] load metadata for docker.io/library/node:16 0.2s
=> [dev 1/4] FROM docker.io/library/node:16@sha256:580a0850049c59a48f06090edd48c9f966c5e6572bbbabc369ba3ecbc4855dba 14.9s
=> => resolve docker.io/library/node:16@sha256:580a0850049c59a48f06090edd48c9f966c5e6572bbbabc369ba3ecbc4855dba 0.0s
=> => sha256:d3a9ec6dcb7756c65db951b3a0723ca0e49e83b344f01f9eff4c1dddf626f521 2.21kB / 2.21kB 0.0s
=> => sha256:bbdd5360e7c6d855d09d5bb772bdb8d96e2252ba210a5939638d8fa9305418b9 7.62kB / 7.62kB 0.0s
=> => sha256:626979e62c56e192812e818d52b82f063d9f9514b1b7bae14e534e4a7c98117a 49.22MB / 49.22MB 2.6s
=> => sha256:134a528370d5dcbf5b6ba2d8c20f576504448e8f2d1debb5d2a4950a38a3ff2d 7.70MB / 7.70MB 0.7s
=> => sha256:92e12e3364b52ad043d8e79f750863ed4ca2878c4fdf45ded974508febc55fdd 9.77MB / 9.77MB 0.7s
=> => sha256:580a0850049c59a48f06090edd48c9f966c5e6572bbbabc369ba3ecbc4855dba 1.21kB / 1.21kB 0.0s
=> => sha256:1a7f2500f9574b0a495bfb031c2d52e83c96dd545ef2185737f8032567e70677 52.17MB / 52.17MB 4.1s
=> => sha256:16922d4fa4f2c649c56a586e06135309b0cc7e160a17c909e5eb349988df61aa 183.99MB / 183.99MB 8.7s
=> => sha256:84cc5e80e64366a68273e2ac1ca25095412df33cb46159d00b8a87993fbecf8c 4.09kB / 4.09kB 2.8s
=> => sha256:83f93887ffb88aa526b22aab7eda03959f4bcd05f9f5ba3956a4ddc1be3d7afc 33.49MB / 33.49MB 4.9s
=> => extracting sha256:626979e62c56e192812e818d52b82f063d9f9514b1b7bae14e534e4a7c98117a 3.2s
=> => sha256:914230f868db471e02be87534053a8a49c54657e093c419893e1021e955e0fe5 2.27MB / 2.27MB 4.5s
=> => sha256:b39fc254b321c6e3013710f7943fee19573b2d372fbdb8c13997bc9bdfa55b94 453B / 453B 4.6s
=> => extracting sha256:134a528370d5dcbf5b6ba2d8c20f576504448e8f2d1debb5d2a4950a38a3ff2d 0.4s
=> => extracting sha256:92e12e3364b52ad043d8e79f750863ed4ca2878c4fdf45ded974508febc55fdd 0.4s
=> => extracting sha256:1a7f2500f9574b0a495bfb031c2d52e83c96dd545ef2185737f8032567e70677 1.6s
=> => extracting sha256:16922d4fa4f2c649c56a586e06135309b0cc7e160a17c909e5eb349988df61aa 4.3s
=> => extracting sha256:84cc5e80e64366a68273e2ac1ca25095412df33cb46159d00b8a87993fbecf8c 0.1s
=> => extracting sha256:83f93887ffb88aa526b22aab7eda03959f4bcd05f9f5ba3956a4ddc1be3d7afc 0.9s
=> => extracting sha256:914230f868db471e02be87534053a8a49c54657e093c419893e1021e955e0fe5 0.1s
=> => extracting sha256:b39fc254b321c6e3013710f7943fee19573b2d372fbdb8c13997bc9bdfa55b94 0.0s
=> [internal] load build context 7.1s
=> => transferring context: 101.90MB 7.1s
=> [dev 2/4] WORKDIR /usr/app 0.1s
=> [dev 3/4] COPY . /usr/app 0.3s
=> [dev 4/4] RUN npm install 73.1s
=> exporting to image 21.3s
=> => exporting layers 21.3s
=> => writing image sha256:922b39fb6f7e99d735d25f06b52bf51971a8e53b766ea0aa5d5ee8d2af9da547 0.0s
=> => naming to docker.io/library/front_web 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
[+] Running 2/2
⠿ Network front_default Created 0.0s
⠿ Container front-web-1 Created 0.1s
Attaching to front-web-1
front-web-1 |
front-web-1 | > openverse-frontend@2.2.1 dev
front-web-1 | > npm run i18n:get-valid-locales && cross-env ENABLE_AUDIO=true nuxt
front-web-1 |
front-web-1 |
front-web-1 | > openverse-frontend@2.2.1 i18n:get-valid-locales
front-web-1 | > node src/locales/scripts/get-validated-locales
front-web-1 |
front-web-1 | /usr/app
front-web-1 | > Wrote locale metadata for @nuxt/i18n.
front-web-1 | ℹ Merging Tailwind config from ~/../tailwind.config.js
front-web-1 | ✔ Sentry reporting is enabled (client side: enabled, server side: enabled)
front-web-1 | Cache updated from undefined to 2.2.1
front-web-1 | ℹ Listening on: http://172.22.0.2:8433/
front-web-1 | ℹ Preparing project for development
front-web-1 | ℹ Initial build may take a while
front-web-1 | ℹ Discovered Components: .nuxt/components/readme.md
front-web-1 | ✔ Builder initialized
front-web-1 | ✔ Nuxt files generated
front-web-1 | ℹ Compiling Server
front-web-1 | ℹ Compiling Client
front-web-1 | ℹ Compiling Modern
front-web-1 | ✔ Server: Compiled successfully in 35.98s
front-web-1 | ✔ Client: Compiled successfully in 38.54s
front-web-1 |
front-web-1 | WARN Compiled with 1 warnings
front-web-1 |
front-web-1 | "export 'default' (reexported as 'VPopoverContentTypes') was not found in '../../src/components/VPopover/VPopoverContent.types.js'
front-web-1 |
front-web-1 |
front-web-1 | WARN in ./.nuxt/components/index.js
front-web-1 |
front-web-1 | ✔ Modern: Compiled successfully in 38.59s
front-web-1 |
front-web-1 | WARN Compiled with 1 warnings
front-web-1 |
front-web-1 |
front-web-1 | WARN in ./.nuxt/components/index.js
front-web-1 |
front-web-1 | "export 'default' (reexported as 'VPopoverContentTypes') was not found in '../../src/components/VPopover/VPopoverContent.types.js'
front-web-1 |
front-web-1 | ℹ Waiting for file changes
front-web-1 | ℹ Memory usage: 736 MB (RSS: 1.29 GB)
front-web-1 | ℹ Listening on: http://172.22.0.2:8433/
front on ci/pipelines +1/-1 [$!] via v16.13.0
❯ docker build . -f Dockerfile -t front
[+] Building 159.3s (21/21) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 1.83kB 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 35B 0.0s
=> [internal] load metadata for docker.io/library/node:16-alpine 1.0s
=> [internal] load metadata for docker.io/library/node:16 0.6s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [builder 1/6] FROM docker.io/library/node:16@sha256:580a0850049c59a48f06090edd48c9f966c5e6572bbbabc369ba3ecbc4855dba 0.0s
=> [internal] load build context 5.6s
=> => transferring context: 93.08MB 5.1s
=> [app 1/8] FROM docker.io/library/node:16-alpine@sha256:60ef0bed1dc2ec835cfe3c4226d074fdfaba571fd619c280474cc04e93f0ec5b 2.7s
=> => resolve docker.io/library/node:16-alpine@sha256:60ef0bed1dc2ec835cfe3c4226d074fdfaba571fd619c280474cc04e93f0ec5b 0.0s
=> => sha256:60ef0bed1dc2ec835cfe3c4226d074fdfaba571fd619c280474cc04e93f0ec5b 1.43kB / 1.43kB 0.0s
=> => sha256:dfa34389d7202cbe7fa82869b9f4c6743c428e8f624136ea8b1783b7aa854fcd 1.16kB / 1.16kB 0.0s
=> => sha256:36c50d7333516a6caa0ab9889df00d9d09b1f8a7c34f1eb399ded7c1a1916f75 6.55kB / 6.55kB 0.0s
=> => sha256:b0e166648ff59d555a8f6c3dd0f24f730d74951c2ef091cbd9825184c4c980b2 34.87MB / 34.87MB 1.3s
=> => sha256:6d3f0f01fe604d82f6d3c79be141c5eca357aaf3761637c2ff4b7f2195147c6a 2.41MB / 2.41MB 0.4s
=> => sha256:50a2cb941575490726f78d2eb81d4c909b27690959f82028a80beab035034256 450B / 450B 0.2s
=> => extracting sha256:b0e166648ff59d555a8f6c3dd0f24f730d74951c2ef091cbd9825184c4c980b2 0.9s
=> => extracting sha256:6d3f0f01fe604d82f6d3c79be141c5eca357aaf3761637c2ff4b7f2195147c6a 0.1s
=> => extracting sha256:50a2cb941575490726f78d2eb81d4c909b27690959f82028a80beab035034256 0.0s
=> CACHED [builder 2/6] WORKDIR /usr/app 0.0s
=> [app 2/8] WORKDIR /usr/app 0.0s
=> [app 3/8] COPY package*.json . 0.1s
=> [builder 3/6] COPY package*.json . 0.1s
=> [builder 4/6] RUN npm install 68.6s
=> [builder 5/6] COPY . /usr/app 0.3s
=> [builder 6/6] RUN npm run build 44.2s
=> [app 4/8] COPY --from=builder /usr/app/nuxt.config.js . 0.0s
=> [app 5/8] COPY --from=builder /usr/app/.nuxt /usr/app/.nuxt 0.2s
=> [app 6/8] COPY --from=builder /usr/app/src/locales /usr/app/src/locales 0.0s
=> [app 7/8] COPY --from=builder /usr/app/src/utils /usr/app/src/utils 0.0s
=> [app 8/8] RUN npm ci --only=production --ignore-script 32.6s
=> exporting to image 4.1s
=> => exporting layers 4.1s
=> => writing image sha256:1e97a4526998b1b74d4dbdbf491339bc77ee274af0a52ffea8d5551ff8eea841 0.0s
=> => naming to docker.io/library/front 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
front on ci/pipelines +1/-1 [$!] via v16.13.0 took 2m39s
❯ docker run front -p 8443:8443
> openverse-frontend@2.2.1 start
> nuxt start "8443:8443"
FATAL No build files found in /usr/app/8443:8443/.nuxt/dist/server.
Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
Use either `nuxt build` or `builder.build()` or start nuxt in development mode.
at VueRenderer._ready (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:758:13)
at async Server.ready (node_modules/@nuxt/server/dist/server.js:637:5)
at async Nuxt._init (node_modules/@nuxt/core/dist/core.js:482:7)
╭──────────────────────────────────────────────────────────────────────────────╮│ ││ ✖ Nuxt Fatal Error ││ ││ Error: No build files found in /usr/app/8443:8443/.nuxt/dist/server. ││ Use either `nuxt build` or `builder.build()` or start nuxt in ││ development mode. ││ │╰──────────────────────────────────────────────────────────────────────────────╯
|
changes requested are no longer accurate
# install dependencies including local development tools | ||
RUN npm install | ||
|
||
# copy the rest of the content |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This copy command does not copy the node_modules folder because it's in the dockerignore file, right?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Correct, and as per the official docs, if the .dockerignore
file is not present, docker ignores the files present in the .gitignore
I have the same problems as in Zack's comment :( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM for the concept, except some files containing several blank lines at EOF. I did not get the errors when I built the images.
* main: Update Sass breakpoints to match tailwind (#455) Converge `NavSection` components (#454) Use a unique `SearchGridFilter` component (#439) Set explicit ltr direction for pages untranslated in rtl languages (#434) Add VItemGroup component (#410) Update video demos for Meta Search (#420) Fix Search form on smaller viewports (#437) Make Header RTL-compatible (#429) 🔄 Synced file(s) with WordPress/openverse (#449) Removed unused image assets (#404) Restore husky (#444) Bump axios from 0.21.1 to 0.21.2 (#441) Remove husky
@obulat, fixed in the latest commit |
@zackkrida @obulat @sarayourfriend worked in your feedback, fixed the issues when building the image |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is excellent. The new image is much smaller than the original and we now have a unified Dockerfile for development and production 🥳 The new image is much smaller than the original too, coming in at around 452MB
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Awesome!
One question: what is the docker-improvements
branch this PR targets? Should this PR be targeting main?
@sarayourfriend the reason this PR and #415 are based on their own branch is that they rely on the removal of |
|
||
WORKDIR /usr/app | ||
|
||
ENV NODE_ENV=production |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ENV NODE_ENV=production |
We'll actually want to remove this, related to #450. We want to be able to use NODE_ENV as staging
or as production
. Can this be moved to the actions, maybe @rbadillap ? By the way, Nuxt builds the app the same in staging or prod mode, so you don't have to worry about differences in the built files based on this key.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
based on internal conversations, this should be kept as it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is great! Just one comment about environment variables, but mostly because I'm not sure what scope we're looking for 🙂
push: | ||
branches: | ||
- 'main' | ||
- 'ci/*' # branches that follows the pattern ci/* can access this workflow too |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Really solid idea! I always hate troubleshooting issues with commits to main
, this is a great workaround.
# which could cause issues with native binaries such as node_sass. | ||
RUN rm -rf /usr/app/node_modules/ | ||
# disable telemetry when building the app | ||
ENV NUXT_TELEMETRY_DISABLED=1 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this something we're okay having disabled within the container too? I believe if we make this an ARG
, it won't be present for the image's runtime environment (if that's important). 1
Footnotes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we want telemetry disabled both places, that's a great question though.
Description
In this PR I'm implementing the following features:
Dockerfile
to follow common standards and allow us to create a docker image of the application that can be uploaded in a registrypre-build
that runsnpm run lint
to make sure the code follows our existing code standardsbuild
that generates a docker image and pushes in a registry when a pre-released has been createdTesting Instructions