Use traefik to expose the web frontend

[ctgraham]

Migrated from: https://github.com/Caligula1022/ccvg_integral/issues/2

To make the Docker deployment entirely self contained, good practice is to use a container which publicly presents ports 80 and 443.

Please add a traefik container to expose ports 80 and 443, mapping to the frontend's web port.

The selection of an SSL certificate for port 443 should be part of the environment configuration.

From a production deployment, the only exposed ports and names should be that of the frontend (angular app) on 80 and 443, and the same for the backend API. We'll want to remove the other ports and names for production purposes. A common way to do this is to maintain a docker compose file dedicated to development and a compose file which is dedicated to production.

We will also want to migrate the traefik hostname to be an environment variable: https://github.com/ulsdevteam/ccvgd-integral/blob/dae9c2993059c0a6ba2c4d81187b8e101e288821/docker-compose.yml#L43

This will allow you to configure the name as angular.docker.localhost for your development purposes, but for a production configuration we would add an actual DNS name in place as the environment variable.

Finally, the current traefik configuration does bring up the site on port 80 (HTTP) but does not map port 443 (HTTPS) to the angular container. You can leave the SSL certificate as the self-signed certificate for your development purposes; good practice would be to also allow traefik to mount an SSL certificate installed on the docker host via an environment variable.

[Caligula1022]

I tried to add a self-signed ssl certificate for https access. But for some reason, I have to specify the port to get successful access. For example, if I use "angular.docker.localhost", the page automatically goes to "https://angular.docker.localhost:433" and I can't access it unless I use "angular.docker.localhost:4200". For https is similar, I have to use "https://angular.docker.localhost:80" to access.

[Caligula1022]

By the way, I would like to ask if you have time to have a zoom meeting with me. I have some questions that I'm confused about and would like to ask.

[ctgraham]

We can chat via Zoom. Can you share your questions via email, or share them here in the GitHub issues so I can make sure we have the right folks invited?

[ctgraham]

For the work you have already tried, best practice is to push it to a feature branch on GitHub (either on your own personal repo, or on this repo) and then make a pull request into this repo's main branch. This allows for review and discussion of the changes, even if they are not really ready for merging.

[Caligula1022]

Thanks for your suggestions. I'll make an issue list asap.

[Caligula1022]

Questions list:

1. How to map the 433 port to angular correctly? I can access the webpage with https://angular.docker.localhost:80, but 433 cannot.
2. Why I have to specify the port when I pass the apiUrl to angular containner? e.g. I can't use ccvg.docker.localhost directly, but have to use ccvg.docker.localhost:5050. Is this related with the port I exposed in backend part?
3. How to eliminate 5050 port for backend? Or, how to use 80 and 433 for backend container?
4. Should nginx and traefik exist both? Or just one of them?
5. Can I specify port in env file? e.g. BACKEND_PORT=5050

Thanks for your time.

[Caligula1022]

By the way, when will you have time for this meeting?

[Caligula1022]

I tested your commit. it seems that if we don't specify the port for the api_url, the front end doesn't get the data to display.

[ctgraham]

Did you add the new item "API_DOMAIN" to .env? I didn't mention this explicitly.

Did you accept the browser security warning for the untrusted certificate for the domain without the port specified? I have to navigate directly to the API URL in the browser to even see the warning.

If neither of the above applies, please share the specific failure message.

[Caligula1022]

Yes, I added it. And yes, I accept the browser security warning for the untrusted certificate for the domain without the port specified. I can use only "ccvg.docker.localhost" to see the warning. The problem is that the frontend cannot access the data via the url.

No data here.

And I also cannot get respond in postman using this apiurl.

Then, I checked the docker container, and the ccvg container has a random port.

If I send post to apiurl with this port, data will show.

[ctgraham]

The Network tab in the web inspector in your browser can give additional info on the browser-based failure.

In the first postman example, you are getting an SSL error. Are you POSTing to http or to https?

In the port 63797 example, you are POSTing directly against the container, and bypassing traefik entirely.

[Caligula1022]

Sorry, I didn't notice the ssl error. No problem for postman.

[ctgraham]

I think we need to disable the middleware if you don't want to use https: https://github.com/ulsdevteam/ccvgd-integral/blob/efea346fc6aed79de81a239d956f6cce09dc6f83/docker-compose.yml#L20-L21

[Caligula1022]

http works. Thanks!

[Caligula1022]

Does it meet the deployment criteria now?

[ctgraham]

I'm having trouble with the certificates. The file traefik/tls.yaml appears to be ignored. When you inspect the certificate it is a self-signed Traefik certificate, not the cert.crt provided in certs/.

Similarly, applying production certificates is ignored by the traefik configuration.

Traefik debug reports:

time="2022-10-07T20:44:22Z" level=debug msg="No default certificate, generating one" tlsStoreName=default

[Caligula1022]

I'll try to see what I can do to solve the ignorance. The certification in 'certs/' is from openssl.

[ctgraham]

I have a tentative solution here: https://github.com/ulsdevteam/ccvgd-integral/pull/7

[ctgraham]

Resolved by #7.