Investigate how to deploy angular i18n

[wg102]

This ticket is child of StatCan/aaw#1242

The purpose is now that we have the basis of the i18n by angular (without our changes), we will try to get it up into dev. Figure out how to deploy it correctly.

If it ends up not possible, we will need to back down and reset the branch to the previous commit, and make their changes into our code. The codes will then probably be literally too different to ever merge. If we do want such a thing in the future...

Update

• What is the new way of building the application (local and not)
• Do the build (both fr and eng at the same time)
• Python http command
• Manual toggle to fr ui
• Routing logic
• Router logic on cluster
• Check on dev

[wg102]

I am trying to build the application with all the locales
./node_modules/.bin/ng build --prod --localize

Then to go in the dist folder
cd path/to/jupyter/dist/frontend

And run the python
python -m http.server --bind=127.0.0.1 8080

now Just need to navigate to the fr or eng link and the UI shows up

Sites:

• https://dev.to/this-is-angular/maintaining-multi-language-angular-applications-with-i18n-2ccf
• https://angular.io/guide/i18n-common-deploy
• https://dev.to/angular/deploying-an-i18n-angular-app-with-angular-cli-2fb9#:~:text=%20Deploying%20an%20i18n%20Angular%20app%20with%20angular-cli,the%20app%20so%20the%20user%20can...%20More%20 ( A bit too old)

Install NGINX: sudo apt install nginx

[wg102]

Created a k3d cluster based of https://github.com/Collinbrown95/demo-dask-k8s
and https://github.com/StatCan/aws-js-s3-explorer/blob/main/k8s/s3proxy-nginx-cm.yaml

sh -c "$(curl --location https://taskfile.dev/install.sh)" -- -d -b ~/src/local/bin
https://k3d.io/v5.4.6/#install-current-latest-release

Use commands like task k8s:manifest:apply -w to update cluster on file change also need to add sources in the taskfile

[wg102]

After multiple small fixes, the root was not set to the correct url. Hence it did not work.
The html now appears and the redirection seems to behave, but the css does not. it complains about MIME types. I therefore added the test/css type to the complaing files. If this works, it will need to be done on the index.html original file.

[wg102]

The issue was also in nginx-conf file and the root /etc/nginx/html/;

Second trouble is FF. When changing the language, need to change both language possibilities, then reset Cookies (ctrl+shift+r does NOT work)

This have giving me the constant result of when hitting localhost:8080/ being redirected to /fr or /en-US based on the language of my browser. As we wanted.

The first task to do next week will be to figure how to drag this into dev.

[Collinbrown95]

JWA Refactor TODO Items

CC @wg102 @cboin1996

• Take standalone example from repo and integrated it with jupyter-apis repo. Specifically, make k8s folder, taskfile, k3d config, etc. so that we can build jupyter-apis Dockerfile and test locally https://github.com/wg102/k3d-example.

• Update jupyter-apis Dockerfile to include front-end build logic that aligns with KF 1.6 (i.e. ng build --localize=...). Specifically, we need to update the following lines: https://github.com/StatCan/jupyter-apis/blob/main/Dockerfile#L2-L17

• Update jupyter-apis Dockerfile base image to be alpine instead of scratch. Reason is that we need to be able to use cp in init container to move static files into stock NGINX container. https://github.com/StatCan/jupyter-apis/blob/main/Dockerfile#L30

• Remove static file serving logic from golang application (https://github.com/StatCan/jupyter-apis/blob/main/main.go#L250-L263) - reason is that NGINX static file server will handle this concern.

• Update the jupyter-apis deployment (https://github.com/StatCan/aaw-kubeflow-manifests/blob/aaw-dev-cc-00/kustomize/apps/jupyter-web-app/base/deployment.yaml) to reflect the deployment strategy used in https://github.com/StatCan/aws-js-s3-explorer/blob/main/k8s/s3proxy-deploy.yaml. Specifically:

  • Need to add a stock NGINX container that will serve the application built in the dist folder.
  • Need to add an init container based off of the refactored jupyter-apis Docker image - the purpose of this is to do a recursive copy of the dist static files onto the /etc/nginx/html location of the nginx container (this is the default place that nginx serves static files from).
  • Need to add empty volume that gets mounted to both init container and nginx container.
  • Need to do one of the following:
    • Update the jupyter-apis service so that it forwards traffic to port 80 (or whatever port NGINX listens on by default) on pods behind that service; or
    • Update the NGINX container to serve on port 5000 so that the existing jupyter-web-app-service will continue to forward to the correct port.
  • Apply nginx configuration to the deployment as a configmap that gets mounted to the nginx container as a volume to /etc/nginx/nginx.conf

• Change anything that references /en or /fr to /jupyter/en and /jupyter/fr because in central dashboard we will access this via /jupyter prefix.

Testing TODO

• Can we successfully run the 2-container pod (NGINX and golang API) locally (i.e. all AJAX calls from browser are successful, i18n routing works correctly).

[wg102]

1. Get k3d deployment working with manual port-forward on pod.
2. Modify service so that we are forwarding to the right port (the one ngx in listening on by default, prob 8080)
3. Refactor aaw kubeflow manifest deployment, to reflect our local k8s manifest folder
4. Testing against dev.

[wg102]

This ticket is getting closed because the actual investigation part is done. The work will be continued in this ticket: #133