[codex] Move app UI into Leptos and guard app route

.github/workflows/check.yml

@@ -45,7 +45,7 @@ jobs:
             - 'db/litestream.yml'
             - 'cli/run.bash'
             - 'app/**'
-            - 'leptos-browser/**'
+            - 'frontend/**'
             - 'server/**'
             - 'shared-api/**'
             - 'service/**'

Cargo.toml

@@ -6,15 +6,18 @@ members = [
     "db",
     "service",
     "shared-api",
-    "leptos-browser",
+    "frontend",
     "e2e",
 ]
 resolver = "2"
 
 [workspace.dependencies]
+console_log = "1.0.0"
 leptos = { version = "0.8.6", default-features = false }
 leptos_axum = { version = "0.8.6" }
+leptos_meta = { version = "0.8.6", default-features = false }
 leptos_router = { version = "0.8.6", default-features = false }
+log = "0.4.22"
 # exclude = [
 #     "material-yew/build",
 #     "material-yew/usages"
@@ -31,6 +34,7 @@ opt-level = "z"
 panic = "abort"
 
 [[workspace.metadata.leptos]]
+assets-dir = "public"
 bin-default-features = false
 bin-features = ["local"]
 bin-package = "server"
@@ -39,11 +43,11 @@ end2end-cmd = "./cli/e2e-local-container.sh --no-server"
 end2end-dir = "."
 lib-default-features = false
 lib-features = ["hydrate"]
-lib-package = "leptos-browser"
+lib-package = "frontend"
 lib-profile-release = "wasm-release"
-name = "leptos-browser"
+name = "frontend"
 reload-port = 18082
 site-addr = "127.0.0.1:18080"
 site-pkg-dir = "pkg"
 site-root = "target/site"
-style-file = "app/style.css"
+style-file = "style/main.scss"

Dockerfile

@@ -40,7 +40,7 @@ RUN \
   for migration in $(find db/migrations -maxdepth 1 -type f -name '*.sql' | sort); do \
     sqlite3 .local/river-dev.db < "${migration}"; \
   done; \
-  DATABASE_URL='sqlite://.local/river-dev.db?mode=rwc' cargo leptos build --release; \
+  DATABASE_URL='sqlite://.local/river-dev.db?mode=rwc' cargo leptos build --release --bin-features ''; \
   mkdir -p /out/site; \
   cp target/release/server /out/server; \
   cp -a target/site/. /out/site/
@@ -71,7 +71,7 @@ ENV BASE_URL=https://river.duxca.com
 ENV LOCAL_CLIENT_ID=local
 ENV LOCAL_CLIENT_SECRET=local
 ENV LOCAL_BASE_URL=http://localhost:8080
-ENV LEPTOS_OUTPUT_NAME=leptos-browser
+ENV LEPTOS_OUTPUT_NAME=frontend
 ENV LEPTOS_SITE_ROOT=target/site
 ENV LEPTOS_SITE_PKG_DIR=pkg
 

Makefile

@@ -4,6 +4,13 @@ SHELL := /usr/bin/env bash
 CARGO_LEPTOS_VERSION := 0.3.6
 SQLX_CLI_VERSION := 0.8.6
 DATABASE_URL ?= sqlite://.local/river-dev.db?mode=rwc
+PROJECT_ID ?= duxca-298210
+REGION ?= asia-northeast1
+IMAGE_REPOSITORY ?= $(REGION)-docker.pkg.dev/$(PROJECT_ID)/cloud-run-source-deploy/litestream-sandbox
+IMAGE_TAG ?= latest
+DEPLOY_METADATA ?= .local/deploy-image-metadata.json
+DEPLOY_TERRAFORM_PLAN ?= ../.local/tfplan
+DEPLOY_TERRAFORM_REFRESH ?= false
 
 .DEFAULT_GOAL := help
 
@@ -23,6 +30,7 @@ help:
 		'  make check             run fmt-check, clippy, and test' \
 		'  make check-ci          run check plus e2e and terraform validation' \
 		'  make terraform-check   run terraform init, validate, and fmt check' \
+		'  make deploy            build, push, and terraform apply from local main checkout' \
 		'  make clean             remove build output'
 
 .PHONY: setup
@@ -90,6 +98,23 @@ terraform-check:
 	terraform -chdir=terraform validate
 	terraform -chdir=terraform fmt -check
 
+.PHONY: deploy
+deploy:
+	mkdir -p .local
+	gcloud auth configure-docker '$(REGION)-docker.pkg.dev'
+	docker buildx build \
+		--push \
+		--tag '$(IMAGE_REPOSITORY):$(IMAGE_TAG)' \
+		--metadata-file '$(DEPLOY_METADATA)' \
+		.
+	CF_TOKEN="$${CLOUDFLARE_API_TOKEN:-$$(python3 -c 'import pathlib, tomllib; print(tomllib.load(open(pathlib.Path.home() / ".cf/config.toml", "rb"))["access_token"])')}"; \
+		CONTAINER_IMAGE='$(IMAGE_REPOSITORY)'@$$(python3 -c 'import json; print(json.load(open("$(DEPLOY_METADATA)"))["containerimage.digest"])'); \
+		echo "Deploying $${CONTAINER_IMAGE}"; \
+		CLOUDFLARE_API_TOKEN="$${CF_TOKEN}" timeout 5m terraform -chdir=terraform init; \
+		CLOUDFLARE_API_TOKEN="$${CF_TOKEN}" timeout 10m terraform -chdir=terraform plan -refresh=$(DEPLOY_TERRAFORM_REFRESH) -out='$(DEPLOY_TERRAFORM_PLAN)' -var="container_image=$${CONTAINER_IMAGE}"; \
+		CLOUDFLARE_API_TOKEN="$${CF_TOKEN}" timeout 20m terraform -chdir=terraform apply -refresh=$(DEPLOY_TERRAFORM_REFRESH) -auto-approve '$(DEPLOY_TERRAFORM_PLAN)'; \
+		terraform -chdir=terraform output -raw cloud_run_url
+
 .PHONY: clean
 clean:
 	cargo clean

app/Cargo.toml

@@ -7,6 +7,7 @@ version = "0.1.0"
 leptos = { workspace = true, default-features = false }
 leptos-leaflet = { version = "0.10.2", default-features = false }
 leptos_axum = { workspace = true, optional = true }
+leptos_meta = { workspace = true, default-features = false }
 leptos_router = { workspace = true, default-features = false }
 model = { path = "../model" }
 serde = { version = "1", features = ["derive"] }
@@ -16,4 +17,4 @@ shared-api = { path = "../shared-api", default-features = false }
 [features]
 default = []
 hydrate = ["leptos/hydrate", "leptos/islands", "leptos-leaflet/hydrate", "shared-api/hydrate"]
-ssr = ["leptos/ssr", "leptos/islands", "leptos_router/ssr", "dep:leptos_axum", "shared-api/ssr"]
+ssr = ["leptos/ssr", "leptos/islands", "leptos_meta/ssr", "leptos_router/ssr", "dep:leptos_axum", "shared-api/ssr"]

app/src/lib.rs

@@ -1,34 +1,36 @@
 mod pages;
 
 use leptos::prelude::*;
+use leptos_meta::{MetaTags, Stylesheet, Title, provide_meta_context};
 use leptos_router::{
     StaticSegment,
     components::{Route, Router, Routes},
 };
 
-pub use pages::{AccountContext, AuthProviders, HomePage, LoginPage, MapPage};
+pub use pages::{
+    AccountContext, AdminPage, AdminPageData, AuthProviders, HomePage, HomePageData, LoginPage,
+    MapPage,
+};
 
 pub fn shell(options: LeptosOptions) -> impl IntoView {
-    let css_path = format!("/app{}", options.css_path());
     view! {
         <!DOCTYPE html>
         <html lang="ja">
             <head>
                 <meta charset="utf-8"/>
                 <meta name="viewport" content="width=device-width, initial-scale=1"/>
-                <title>"river.duxca.com Leptos map"</title>
+                <MetaTags/>
                 <link
                     rel="stylesheet"
                     href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-                    integrity="sha256-p4NxAoJBhIINfQfb3HYJZqd6ZewBskNiyxNV1lvTlZBo="
+                    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
                     crossorigin=""
                 />
                 <script
                     src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
                     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
                     crossorigin=""
                 ></script>
-                <link rel="stylesheet" href=css_path/>
                 <AutoReload options=options.clone()/>
                 <HydrationScripts options=options.clone() root="/app"/>
             </head>
@@ -41,10 +43,16 @@ pub fn shell(options: LeptosOptions) -> impl IntoView {
 
 #[component]
 pub fn App() -> impl IntoView {
+    provide_meta_context();
+
     view! {
-        <Router base="/app">
+        <Stylesheet id="leptos" href="/app/pkg/frontend.css"/>
+        <Title text="river.duxca.com Leptos map"/>
+        <Router>
             <Routes fallback=|| view! { <p>"ページが見つかりません"</p> }>
-                <Route path=StaticSegment("") view=MapPage/>
+                <Route path=StaticSegment("") view=HomePage/>
+                <Route path=StaticSegment("login") view=LoginPage/>
+                <Route path=StaticSegment("app") view=MapPage/>
             </Routes>
         </Router>
     }