feat(web): dockerize web application #1253

KeisukeYamashita · 2024-10-08T22:12:43Z

Overview

I've Dockerized the web application to be portable and deployable to container runtimes (e.g. Cloud Run, Kubernetes). We aim to host the web on Cloud Run.

What I've done

I've containerised the application and implemented the deployment workflow.

What I haven't done

I haven't decommissioned our GCS stuff yet.
I've implemented it separately from the existing system so that we can deploy, test, and switch over without any impact.

How I tested

I've built in manually:

$ docker build . -t reearth-cms-web && docker run -e AUTH0_AUDIENCE="https://api.cms.dev.reearth.io" -e AUTH0_CLIENT_ID="xxx" -e AUTH0_DOMAIN="https://reearth-dev.auth0.com" -p 8080:8080 reearth-cms-web

Then, I accessed some of the paths and looks okay:

$ curl http://localhost:8080/assets/abap-Eabmoog9.js
$ curl http://localhost:8080/reearth_config.json
$ curl http://localhost:8080

All returned the contents under //usr/share/nginx/html based on the request path.

Screenshot

Which point I want you to review particularly

Memo

Note that I haven't added any cache configurations yet, perf tuning will be another PR.

netlify · 2024-10-08T22:12:57Z

✅ Deploy Preview for reearth-cms ready!

Name	Link
🔨 Latest commit	`d686996`
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-cms/deploys/6705ae5d7cd4e900083f9b34
😎 Deploy Preview	https://deploy-preview-1253--reearth-cms.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

KeisukeYamashita · 2024-10-08T22:14:08Z

.github/workflows/deploy_test.yml


 jobs:
-  deploy_web:
+  # TODO: Remove after dockerizing the web.
+  deploy_web_gcs:


Note
I changed it so that I could remove this block entirely after verifying our new Docker image without renaming the web (Docker) job.

KeisukeYamashita · 2024-10-08T22:16:04Z

web/vite.config.ts

@@ -15,13 +15,6 @@ import { configDefaults } from "vitest/config";

 import pkg from "./package.json";

-let commitHash = "";
-try {
-  commitHash = execSync("git rev-parse HEAD").toString().trimEnd();


Tip
Because we built in Docker, it has no Git information.

netlify · 2024-10-08T22:17:09Z

✅ Deploy Preview for reearth-cms ready!

Name	Link
🔨 Latest commit	`692d31f`
🔍 Latest deploy log	https://app.netlify.com/sites/reearth-cms/deploys/67065e3ecf16df000932ec4d
😎 Deploy Preview	https://deploy-preview-1253--reearth-cms.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

KeisukeYamashita · 2024-10-08T22:39:31Z

web/.dockerignore

@@ -0,0 +1,11 @@
+*


Tip
Allow listing is always good and safe.

KeisukeYamashita · 2024-10-08T22:40:58Z

web/Dockerfile

+# Default to Cloud Run port.
+# Ref: https://cloud.google.com/run/docs/reference/container-contract#port
+ENV PORT=8080
+
+# Defaults Google Cloud Load Balancer header.
+# Ref: https://cloud.google.com/load-balancing/docs/https#target-proxies
+ENV REAL_IP_HEADER=X-Forwarded-For


Note
IMHO, vendor-specific configurations should be configurable since we are an OSS product; in this case, we can pass -e to override on execution.

Signed-off-by: KeisukeYamashita <[email protected]>

KeisukeYamashita · 2024-10-08T22:50:13Z

web/docker/nginx.conf.template

+log_format json escape=json '{'
+  '"body_bytes_sent": "$body_bytes_sent",'
+  '"http_referer": "$http_referer",'
+  '"http_user_agent": "$http_user_agent",'
+  '"remote_ip": "$remote_addr",'
+  '"remote_user": "$remote_user",'
+  '"request": "$request",'
+  '"request_id": "$request_id",'
+  '"request_method": "$request_method",'
+  '"request_time": "$request_time",'
+  '"request_uri": "$request_uri",'
+  '"server_name": "$server_name",'
+  '"status": "$status",'
+  '"time": "$time_iso8601"'
+'}';


I accessed the container via curl and it will be like this:

{"body_bytes_sent": "739","http_referer": "","http_user_agent": "curl/8.7.1","remote_ip": "xxx.xxx.xxx.xxx","remote_user": "","request": "GET / HTTP/1.1","request_id": "fde3377155ab9765825dff57cb2a83f6","request_method": "GET","request_time": "0.000","request_uri": "/","server_name": "_","status": "200","time": "2024-10-08T22:48:41+00:00"}

web/vite.config.ts

Co-authored-by: rot1024 <[email protected]>

rot1024 · 2024-10-09T08:17:01Z

.github/workflows/deploy_test.yml

+
+      - uses: google-github-actions/auth@v2
+        with:
+          credentials_json: ${{ secrets.GCP_SA_KEY }}


Workload Identity is not used... Later we want to change

Signed-off-by: KeisukeYamashita <[email protected]>

KeisukeYamashita self-assigned this Oct 8, 2024

github-actions bot added web ci labels Oct 8, 2024

KeisukeYamashita commented Oct 8, 2024

View reviewed changes

KeisukeYamashita force-pushed the dockerize-web branch 4 times, most recently from b81e328 to d98eddd Compare October 8, 2024 22:33

KeisukeYamashita commented Oct 8, 2024

View reviewed changes

web/.dockerignore

@@ -0,0 +1,11 @@

*

Copy link

Contributor Author

KeisukeYamashita Oct 8, 2024 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tip
Allow listing is always good and safe.

KeisukeYamashita commented Oct 8, 2024

View reviewed changes

KeisukeYamashita force-pushed the dockerize-web branch from d98eddd to ea3302e Compare October 8, 2024 22:41

feat(web): dockerize the application

7fa43b3

Signed-off-by: KeisukeYamashita <[email protected]>

KeisukeYamashita force-pushed the dockerize-web branch from ea3302e to 7fa43b3 Compare October 8, 2024 22:48

KeisukeYamashita commented Oct 8, 2024

View reviewed changes

KeisukeYamashita marked this pull request as ready for review October 8, 2024 22:53

KeisukeYamashita requested review from nourbalaha and rot1024 as code owners October 8, 2024 22:53

rot1024 changed the title ~~feat(web): dockerize application~~ feat(web): dockerize web application Oct 9, 2024

rot1024 reviewed Oct 9, 2024

View reviewed changes

web/vite.config.ts Outdated Show resolved Hide resolved

Update web/vite.config.ts

7dfaef9

Co-authored-by: rot1024 <[email protected]>

rot1024 approved these changes Oct 9, 2024

View reviewed changes

rot1024 reviewed Oct 9, 2024

View reviewed changes

KeisukeYamashita added 3 commits October 9, 2024 10:20

Merge branch 'main' into dockerize-web

f78159c

feat(web): revert commithash retrieval with git

600b186

Signed-off-by: KeisukeYamashita <[email protected]>

fix(web): json stringify commitHash in vite

692d31f

Signed-off-by: KeisukeYamashita <[email protected]>

KeisukeYamashita merged commit 4e7f550 into main Oct 9, 2024
8 checks passed

KeisukeYamashita deleted the dockerize-web branch October 9, 2024 11:14

KeisukeYamashita mentioned this pull request Oct 9, 2024

ci: add web-build to deploy-test workflow's dependencies #1255

Merged

This was referenced Oct 18, 2024

ci: add deploy Re:Earth CMS Web to Cloud Run workflow eukarya-inc/PLATEAU-VIEW-3.0#346

Merged

ci: update Cesium ION token of reearth-cms-web Cloud Run service #1275

Merged

KeisukeYamashita mentioned this pull request Nov 4, 2024

ci(web): dockerize web application reearth/reearth-visualizer#1222

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(web): dockerize web application #1253

feat(web): dockerize web application #1253

KeisukeYamashita commented Oct 8, 2024 •

edited

Loading

netlify bot commented Oct 8, 2024 •

edited

Loading

KeisukeYamashita Oct 8, 2024

KeisukeYamashita Oct 8, 2024

netlify bot commented Oct 8, 2024 •

edited

Loading

KeisukeYamashita Oct 8, 2024 •

edited

Loading

KeisukeYamashita Oct 8, 2024

KeisukeYamashita Oct 8, 2024

rot1024 Oct 9, 2024

feat(web): dockerize web application #1253

feat(web): dockerize web application #1253

Conversation

KeisukeYamashita commented Oct 8, 2024 • edited Loading

Overview

What I've done

What I haven't done

How I tested

Screenshot

Which point I want you to review particularly

Memo

netlify bot commented Oct 8, 2024 • edited Loading

✅ Deploy Preview for reearth-cms ready!

KeisukeYamashita Oct 8, 2024

Choose a reason for hiding this comment

KeisukeYamashita Oct 8, 2024

Choose a reason for hiding this comment

netlify bot commented Oct 8, 2024 • edited Loading

✅ Deploy Preview for reearth-cms ready!

KeisukeYamashita Oct 8, 2024 • edited Loading

Choose a reason for hiding this comment

KeisukeYamashita Oct 8, 2024

Choose a reason for hiding this comment

KeisukeYamashita Oct 8, 2024

Choose a reason for hiding this comment

rot1024 Oct 9, 2024

Choose a reason for hiding this comment

KeisukeYamashita commented Oct 8, 2024 •

edited

Loading

netlify bot commented Oct 8, 2024 •

edited

Loading

netlify bot commented Oct 8, 2024 •

edited

Loading

KeisukeYamashita Oct 8, 2024 •

edited

Loading