Build prod docker image #450

soapy1 · 2024-12-03T22:58:32Z

Description

This updates the release process to build a production conda-store-ui image. Changes include:

creating a prod build target for the conda-store-ui docker image
- uses a static server to run the application
- separates out the build step from the prod image so only the built artifacts are included in the final image
updating the docker compose dev setup to set required env vars, for configuring conda-store-server location, etc

Pull request checklist

Did you test this change locally?
Did you update the documentation (if required)?
Did you add/update relevant tests for this change (if required)?

Additional information

It would be helpful to double check that the ui is working as expected. Especially anything having to do with the react router.

In order to test this, the following commands are useful:

Build the prod image

docker build -t conda-store-server:v1 --target prod .

Set up services (this will also bring up the dev mode ui service on localhost:8000)

docker compose up -d

Run the container

docker run -p 8001:8000 -e 'DEBUG=express:*' -it conda-store-server:v1

Now you can access the prod container at localhost:8001

gabalafou

This direction makes sense to me! We will probably want to make sure to check off some of the boxes for Express.js Production best practices before merging this in.

Marking this request changes because I would really really like to avoid putting a folder named app at the top level.

app/app.js

Dockerfile

docker-compose.yml

app/package.json

app/app.js

gabalafou · 2024-12-06T21:49:57Z

I pushed a commit in order to try building and running the docker container and seeing the effect of setting the environment variable flow through to the app running in the browser

soapy1 · 2024-12-11T23:07:19Z

Ok so, I pushed up a few changes to address the issue around the runtime-config.js not being available when building conda-store-ui for some applications, for example for vendoring into conda-store-server.

Now, by default, when you bundle yarn run webpack:prod bundle you will get the same output as currently exists on the main branch. This is suitable for all existing applications of conda-store-ui, including vendoring into conda-store-server.

If you provide the environment variable STANDALONE (for example STANDALONE=1 yarn run webpack:prod bundle) then the runtime-config.js script will be included in the generated index.html. This is appropriate for use of conda-store-ui as a standalone package. It can be distributed, for example, with a sever that serves a runtime-config.js in order to provide run time configuration to the app.

You can test this out:

# Build the prod image
$ docker build -t conda-store-server:v1 --target prod .

# Set up services (this will also bring up the dev mode ui service on localhost:8000)
$ docker compose up -d

# Run the prod container
$ docker run  -p 8001:8000 -it conda-store-server:v1

# Run the prod container with run time args. Eg. this will set api url to a url that does not exist, and the app will not work
$ docker run  -e REACT_APP_API_URL=oopsidontexist -p 8001:8000 -it conda-store-server:v1

Now you can access the prod container at localhost:8001 and the dev container at localhost:8000. Inspect the network tab to verify that everything is loading correctly. Or, inspect with curl:

$ curl localhost:8000
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>conda-store</title>
    
  <script defer src="/main.js"></script></head>
  <body>
  </body>
</html>%                                                                             

$ curl localhost:8001
<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>conda-store</title><script src="runtime-config.js"></script><script defer="defer" src="main.js"></script><link href="main.css" rel="stylesheet"></head><body></body></html>%

@gabalafou @trallard what do you think of this approach? Does this stray too far from already defined patterns?

app/serve.js

gabalafou

This looks good to me.

Just waiting to see the "app" folder renamed to "server."

Also I should mention that I'm really not qualified to review the workflow file, but it looks reasonable to me.

Dockerfile

app/serve.js

docker-compose.yml

webpack.config.js

Co-authored-by: gabalafou <gabriel@fouasnon.com>

gabalafou

This is in great shape.

I found one error that has to be fixed, it was my fault, I forgot to quote the values from process.env 😬

server/README.md

server/package.json

server/serve.js

Co-authored-by: gabalafou <gabriel@fouasnon.com>

gabalafou

Thanks @soapy1 !

soapy1 added 2 commits December 3, 2024 14:37

Set config for ui server with available env vars

c672e76

Separate dev and prod build image

f170320

gabalafou requested changes Dec 6, 2024

View reviewed changes

gabalafou reviewed Dec 6, 2024

View reviewed changes

app/app.js Outdated Show resolved Hide resolved

gabalafou reviewed Dec 6, 2024

View reviewed changes

app/app.js Outdated Show resolved Hide resolved

trallard added the type: enhancement 💅🏼 New feature or request label Dec 10, 2024

soapy1 commented Dec 27, 2024

View reviewed changes

app/serve.js Outdated Show resolved Hide resolved

soapy1 mentioned this pull request Dec 27, 2024

conda-store helm chart conda-incubator/conda-store#1032

Open

7 tasks

gabalafou requested changes Dec 31, 2024

View reviewed changes

Dockerfile Show resolved Hide resolved

app/serve.js Outdated Show resolved Hide resolved

docker-compose.yml Show resolved Hide resolved

webpack.config.js Show resolved Hide resolved

soapy1 and others added 9 commits December 31, 2024 10:29

Mount env file to get settings into ui container

3576016

Setup thin server

219f4a3

Configure webpack to use custom index.html

e778d33

Update app/app.js

2d4dfdf

Co-authored-by: gabalafou <gabriel@fouasnon.com>

Generate config

abde25c

Add compression middleware

5039694

Add compression to server

d5300fd

Optionally build webpack that set's up runtime-config loading

cba889d

Rename app/ -> server/

01926a2

soapy1 force-pushed the release-docker-image branch from 85f1151 to 01926a2 Compare December 31, 2024 18:29

soapy1 changed the title ~~Release docker image~~ Build prod docker image Dec 31, 2024

soapy1 added 2 commits December 31, 2024 10:54

Add docs/comments to describe new functionality

9c292da

Merge branch 'main' into release-docker-image

5028bd5

soapy1 marked this pull request as ready for review December 31, 2024 18:54

soapy1 requested a review from gabalafou December 31, 2024 18:55

soapy1 mentioned this pull request Dec 31, 2024

Add workflows to publish docker container on release #451

Merged

3 tasks

gabalafou reviewed Jan 1, 2025

View reviewed changes

Apply suggestions from code review

48dd6f7

Co-authored-by: gabalafou <gabriel@fouasnon.com>

soapy1 requested a review from gabalafou January 1, 2025 16:47

gabalafou approved these changes Jan 2, 2025

View reviewed changes

soapy1 merged commit 9fbbc8e into conda-incubator:main Jan 2, 2025
6 checks passed

soapy1 deleted the release-docker-image branch January 2, 2025 15:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Build prod docker image #450

Build prod docker image #450

soapy1 commented Dec 3, 2024 •

edited

Loading

gabalafou left a comment

gabalafou commented Dec 6, 2024

soapy1 commented Dec 11, 2024

gabalafou left a comment

gabalafou left a comment

gabalafou left a comment

Build prod docker image #450

Build prod docker image #450

Conversation

soapy1 commented Dec 3, 2024 • edited Loading

Description

Pull request checklist

Additional information

gabalafou left a comment

Choose a reason for hiding this comment

gabalafou commented Dec 6, 2024

soapy1 commented Dec 11, 2024

gabalafou left a comment

Choose a reason for hiding this comment

gabalafou left a comment

Choose a reason for hiding this comment

gabalafou left a comment

Choose a reason for hiding this comment

soapy1 commented Dec 3, 2024 •

edited

Loading