|
| 1 | +## How to Build LitmusPortal Docker Images? |
| 2 | + |
| 3 | +The litmusportal runs on top of Kubernetes and is built on a set of docker containers it provides you the flexibility to build a custom image to visualize/check |
| 4 | +your changes. Here are the components for which you can create your custom Docker images from this repository: |
| 5 | + |
| 6 | +- GraphQL Server |
| 7 | +- Cluster Agents: Subscriber, Event Tracker |
| 8 | +- Web UI (Frontend) |
| 9 | + |
| 10 | +Follow the given steps to build custom Docker images: |
| 11 | + |
| 12 | +**Clone litmus repository** |
| 13 | + |
| 14 | +- We need to clone (forked or base) the litmus repository and make the required changes (if any). |
| 15 | + |
| 16 | +```bash |
| 17 | +git clone http://github.com/litmuschaos/litmus |
| 18 | +cd litmus/litmus-portal |
| 19 | +``` |
| 20 | + |
| 21 | +- The litmus portal component also supports the multiarch builds that are the builds on different `OS` and `ARCH`. Currently, the images are tested to be working |
| 22 | + for `linux/amd64` and `linux/arm64`builds. |
| 23 | + |
| 24 | +#### Docker Image Build Tunables |
| 25 | + |
| 26 | +<table> |
| 27 | + <tr> |
| 28 | + <th> Variables </th> |
| 29 | + <th> Description </th> |
| 30 | + <th> Example </th> |
| 31 | + </tr> |
| 32 | + <tr> |
| 33 | + <td> REPONAME </td> |
| 34 | + <td> Provide the DockerHub user/organisation name of the image. </td> |
| 35 | + <td> <code>REPONAME=example-repo-name</code> <br> used as <code>example-repo-name/litmusportal-server:ci</code></td> |
| 36 | + </tr> |
| 37 | + <tr> |
| 38 | + <td> IMAGE_NAME </td> |
| 39 | + <td> Provide the custom image name for the specific component. </td> |
| 40 | + <td> <code>IMAGE_NAME=example-image-name</code> <br> used as <code>litmuschaos/example-image-name:ci</code></td> |
| 41 | + </tr> |
| 42 | + <tr> |
| 43 | + <td> IMAGE_TAG </td> |
| 44 | + <td> Provide the custom image tag for the specific build. </td> |
| 45 | + <td> <code>IMAGE_TAG=example-tag</code> <br> used as <code>litmuschaos/litmusportal-server:example-tag</code></td> |
| 46 | + </tr> |
| 47 | + <tr> |
| 48 | + <td> PLATFORMS </td> |
| 49 | + <td> Provide the target platforms for the image as CSV. <br>The tested ones are <code>linux/amd64</code> and <code>linux/arm64</code> </td> |
| 50 | + <td> <code>PLATFORMS=linux/amd64,linux/arm64</code></td> |
| 51 | + </tr> |
| 52 | + <tr> |
| 53 | + <td> DIRECTORY </td> |
| 54 | + <td> Provide the directory according to the component directory structure. </td> |
| 55 | + <td> Different <code>DIRECTORY</code> values are:<br> |
| 56 | + <li> <b>GraphQL Server:</b> "graphql-server" <br> |
| 57 | + <li> <b>Subscriber:</b> "cluster-agents/subscriber" <br> |
| 58 | + <li> <b>Event Tracker:</b> "cluster-agents/event-tracker" <br> |
| 59 | + <li> <b>Frontend:</b> N/A</td> |
| 60 | + </tr> |
| 61 | +</table> |
| 62 | + |
| 63 | +### For AMD64 Build |
| 64 | + |
| 65 | +- To build only amd64 image export the variables from the above table. |
| 66 | +- Run `make push-portal-component-amd64` |
| 67 | + |
| 68 | +- For frontend image export the `timestamp` env with the current time and run `make push-frontend-amd64`. |
| 69 | + |
| 70 | +OR |
| 71 | + |
| 72 | +- Fill the ENVs from the above table in the given command and execute it. |
| 73 | + |
| 74 | +```bash |
| 75 | +cd ${DIRECTORY} |
| 76 | +docker build . -f Dockerfile -t ${REPONAME}/${IMAGE_NAME}:${IMG_TAG} --build-arg TARGETARCH=amd64 |
| 77 | +docker push ${REPONAME}/${IMAGE_NAME}:${IMG_TAG} |
| 78 | +``` |
| 79 | + |
| 80 | +For frontend image: |
| 81 | + |
| 82 | +```bash |
| 83 | +cd frontend |
| 84 | +docker build . -f Dockerfile -t $(REPONAME)/$(IMAGE_NAME):${IMG_TAG} --build-arg TARGETARCH=amd64 --build-arg REACT_APP_KB_CHAOS_VERSION=${IMG_TAG} \ |
| 85 | +--build-arg REACT_APP_BUILD_TIME="${timestamp}" --build-arg REACT_APP_HUB_BRANCH_NAME="v1.13.x |
| 86 | +
|
| 87 | +docker push $(REPONAME)/$(IMAGE_NAME):$(IMG_TAG) |
| 88 | +``` |
| 89 | +
|
| 90 | +### For building multi-arch images |
| 91 | +
|
| 92 | +- For building multi-arch image setup [docker buildx](https://docs.docker.com/buildx/working-with-buildx/) in your system. You can also check out this [blog](https://dev.to/uditgaurav/multiarch-support-in-litmuschaos-34da) for the same. |
| 93 | +
|
| 94 | +- Once the docker buildx is setup export all the target platforms on which you want to deploy your images as a CSV Like `export PLATFORMS=linux/amd4,linux/arm64` along with the ENVs mentioned |
| 95 | + in the above table. |
| 96 | +- Build and push the multi-arch image using: |
| 97 | +
|
| 98 | +```bash |
| 99 | +make push-portal-component |
| 100 | +``` |
| 101 | +
|
| 102 | +- For frontend image export the `timestamp` ENV with the current time and run `make push-frontend`. |
| 103 | +
|
| 104 | +OR |
| 105 | +
|
| 106 | +- Fill the ENVs from the above table in the given command and execute it. |
| 107 | +
|
| 108 | +```bash |
| 109 | +cd ${DIRECTORY} |
| 110 | +docker buildx build -f Dockerfile --progress plane --push --no-cache --platform ${PLATFORMS} -t ${REPONAME}/$(IMAGE_NAME):$(IMG_TAG} . |
| 111 | +``` |
| 112 | +
|
| 113 | +For frontend image: |
| 114 | +
|
| 115 | +```bash |
| 116 | +cd ${DIRECTORY} |
| 117 | +docker buildx build . -f Dockerfile --progress plane --push --no-cache --platform ${PLATFORMS} -t ${REPONAME}/${IMAGE_NAME}:${IMG_TAG} \ |
| 118 | +--build-arg REACT_APP_KB_CHAOS_VERSION=${IMG_TAG} --build-arg REACT_APP_BUILD_TIME="${timestamp}" --build-arg REACT_APP_HUB_BRANCH_NAME="v1.13.x" |
| 119 | +``` |
0 commit comments