chore: add ssr placeholder in index.html

This commit is contained in:
Steven
2023-12-14 23:29:42 +08:00
parent 6763dab4e5
commit 6cf7192d6a
9 changed files with 47 additions and 29 deletions

1
.gitignore vendored
View File

@ -6,7 +6,6 @@ tmp
# Frontend asset # Frontend asset
web/dist web/dist
server/dist
# build folder # build folder
build build

View File

@ -15,7 +15,7 @@ FROM golang:1.21-alpine AS backend
WORKDIR /backend-build WORKDIR /backend-build
COPY . . COPY . .
COPY --from=frontend /frontend-build/web/dist ./server/dist COPY --from=frontend /frontend-build/web/dist ./server/frontend/dist
RUN CGO_ENABLED=0 go build -o memos ./bin/memos/main.go RUN CGO_ENABLED=0 go build -o memos ./bin/memos/main.go

View File

@ -56,12 +56,12 @@ Memos should now be running at [http://localhost:3001](http://localhost:3001) an
## Building ## Building
Frontend must be built before backend. The built frontend must be placed in the backend ./server/dist directory. Otherwise, you will get a "No frontend embeded" error. Frontend must be built before backend. The built frontend must be placed in the backend ./server/frontend/dist directory. Otherwise, you will get a "No frontend embeded" error.
### Frontend ### Frontend
```powershell ```powershell
Move-Item "./server/dist" "./server/dist.bak" Move-Item "./server/frontend/dist" "./server/frontend/dist.bak"
cd web; pnpm i --frozen-lockfile; pnpm build; cd ..; cd web; pnpm i --frozen-lockfile; pnpm build; cd ..;
Move-Item "./web/dist" "./server/" -Force Move-Item "./web/dist" "./server/" -Force
``` ```

View File

@ -85,16 +85,16 @@ if (!$?) {
} }
Write-Host "`nBacking up frontend placeholder..." -f Magenta Write-Host "`nBacking up frontend placeholder..." -f Magenta
Move-Item "$repoRoot/server/dist" "$repoRoot/server/dist.bak" -Force -ErrorAction Stop Move-Item "$repoRoot/server/frontend/dist" "$repoRoot/server/frontend/dist.bak" -Force -ErrorAction Stop
if (!$?) { if (!$?) {
Write-Host -BackgroundColor red -ForegroundColor white "Could not backup frontend placeholder. See above." Write-Host -BackgroundColor red -ForegroundColor white "Could not backup frontend placeholder. See above."
Exit 1 Exit 1
} }
Write-Host "Moving frontend build to ./server/dist..." -f Magenta Write-Host "Moving frontend build to ./server/frontend/dist..." -f Magenta
Move-Item "$repoRoot/web/dist" "$repoRoot/server/" -Force -ErrorAction Stop Move-Item "$repoRoot/web/dist" "$repoRoot/server/" -Force -ErrorAction Stop
if (!$?) { if (!$?) {
Write-Host -BackgroundColor red -ForegroundColor white "Could not move frontend build to /server/dist. See above." Write-Host -BackgroundColor red -ForegroundColor white "Could not move frontend build to /server/frontend/dist. See above."
Exit 1 Exit 1
} }
@ -126,15 +126,15 @@ Write-Host "Backend built!" -f green
Write-Host "`nFrontend build took $($frontendTime.TotalSeconds) seconds." -f Cyan Write-Host "`nFrontend build took $($frontendTime.TotalSeconds) seconds." -f Cyan
Write-Host "Backend builds took $($backendTime.TotalSeconds) seconds." -f Cyan Write-Host "Backend builds took $($backendTime.TotalSeconds) seconds." -f Cyan
Write-Host "`nRemoving frontend from ./server/dist ..." -f Magenta Write-Host "`nRemoving frontend from ./server/frontend/dist ..." -f Magenta
Remove-Item "$repoRoot/server/dist" -Recurse -Force -ErrorAction SilentlyContinue Remove-Item "$repoRoot/server/frontend/dist" -Recurse -Force -ErrorAction SilentlyContinue
if (!$?) { if (!$?) {
Write-Host -BackgroundColor red -ForegroundColor white "Could not remove frontend from /server/dist. See above." Write-Host -BackgroundColor red -ForegroundColor white "Could not remove frontend from /server/frontend/dist. See above."
Exit 1 Exit 1
} }
Write-Host "Restoring frontend placeholder..." -f Magenta Write-Host "Restoring frontend placeholder..." -f Magenta
Move-Item "$repoRoot/server/dist.bak" "$repoRoot/server/dist" -Force -ErrorAction Stop Move-Item "$repoRoot/server/frontend/dist.bak" "$repoRoot/server/frontend/dist" -Force -ErrorAction Stop
if (!$?) { if (!$?) {
Write-Host -BackgroundColor red -ForegroundColor white "Could not restore frontend placeholder. See above." Write-Host -BackgroundColor red -ForegroundColor white "Could not restore frontend placeholder. See above."
Exit 1 Exit 1

View File

@ -93,13 +93,13 @@ echo -e "\033[32mFrontend built!\033[0m"
cd $repo_root cd $repo_root
echo -e "\n\033[35mBacking up frontend placeholder...\033[0m" echo -e "\n\033[35mBacking up frontend placeholder...\033[0m"
mv -f "$repo_root/server/dist" "$repo_root/server/dist.bak" mv -f "$repo_root/server/frontend/dist" "$repo_root/server/frontend/dist.bak"
if [ $? -ne 0 ]; then if [ $? -ne 0 ]; then
echo -e "\033[0;31mFailed to backup frontend placeholder! Exiting.\033[0m" echo -e "\033[0;31mFailed to backup frontend placeholder! Exiting.\033[0m"
exit 1 exit 1
fi fi
echo -e "\033[35mMoving frontend build to ./server/dist...\033[0m" echo -e "\033[35mMoving frontend build to ./server/frontend/dist...\033[0m"
mv -f "$repo_root/web/dist" "$repo_root/server/" mv -f "$repo_root/web/dist" "$repo_root/server/"
if [ $? -ne 0 ]; then if [ $? -ne 0 ]; then
echo -e "\033[0;31mFailed to move frontend build! Exiting.\033[0m" echo -e "\033[0;31mFailed to move frontend build! Exiting.\033[0m"
@ -129,16 +129,16 @@ done
echo -e "\033[32mBackend built!\033[0m" echo -e "\033[32mBackend built!\033[0m"
echo -e "\n\033[35mRemoving frontend from ./server/dist...\033[0m" echo -e "\n\033[35mRemoving frontend from ./server/frontend/dist...\033[0m"
rm -rf $repo_root/server/dist rm -rf $repo_root/server/frontend/dist
if [ $? -ne 0 ] if [ $? -ne 0 ]
then then
echo -e "\033[93mCould not remove frontend from /server/dist.\033[0m" echo -e "\033[93mCould not remove frontend from /server/frontend/dist.\033[0m"
exit 1 exit 1
fi fi
echo -e "\033[35mRestoring frontend placeholder...\033[0m" echo -e "\033[35mRestoring frontend placeholder...\033[0m"
mv $repo_root/server/dist.bak $repo_root/server/dist mv $repo_root/server/frontend/dist.bak $repo_root/server/frontend/dist
if [ $? -ne 0 ] if [ $? -ne 0 ]
then then
echo -e "\033[93mCould not restore frontend placeholder.\033e[0m" echo -e "\033[93mCould not restore frontend placeholder.\033e[0m"

View File

@ -6,6 +6,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memos</title> <title>Memos</title>
<!-- memos.metadata -->
</head> </head>
<body> <body>
<p>No frontend embeded.</p> <p>No frontend embeded.</p>

View File

@ -1,9 +1,10 @@
package server package frontend
import ( import (
"embed" "embed"
"io/fs" "io/fs"
"net/http" "net/http"
"strings"
"github.com/labstack/echo/v4" "github.com/labstack/echo/v4"
"github.com/labstack/echo/v4/middleware" "github.com/labstack/echo/v4/middleware"
@ -14,16 +15,10 @@ import (
//go:embed dist //go:embed dist
var embeddedFiles embed.FS var embeddedFiles embed.FS
func getFileSystem(path string) http.FileSystem { //go:embed dist/index.html
fs, err := fs.Sub(embeddedFiles, path) var rawIndexHTML string
if err != nil {
panic(err)
}
return http.FS(fs) func Serve(e *echo.Echo) {
}
func embedFrontend(e *echo.Echo) {
// Use echo static middleware to serve the built dist folder // Use echo static middleware to serve the built dist folder
// refer: https://github.com/labstack/echo/blob/master/middleware/static.go // refer: https://github.com/labstack/echo/blob/master/middleware/static.go
e.Use(middleware.StaticWithConfig(middleware.StaticConfig{ e.Use(middleware.StaticWithConfig(middleware.StaticConfig{
@ -33,6 +28,10 @@ func embedFrontend(e *echo.Echo) {
})) }))
assetsGroup := e.Group("assets") assetsGroup := e.Group("assets")
assetsGroup.Use(middleware.GzipWithConfig(middleware.GzipConfig{
Skipper: defaultAPIRequestSkipper,
Level: 5,
}))
assetsGroup.Use(func(next echo.HandlerFunc) echo.HandlerFunc { assetsGroup.Use(func(next echo.HandlerFunc) echo.HandlerFunc {
return func(c echo.Context) error { return func(c echo.Context) error {
c.Response().Header().Set(echo.HeaderCacheControl, "max-age=31536000, immutable") c.Response().Header().Set(echo.HeaderCacheControl, "max-age=31536000, immutable")
@ -44,6 +43,23 @@ func embedFrontend(e *echo.Echo) {
HTML5: true, HTML5: true,
Filesystem: getFileSystem("dist/assets"), Filesystem: getFileSystem("dist/assets"),
})) }))
registerRoutes(e)
}
func registerRoutes(e *echo.Echo) {
e.GET("/m/:memoID", func(c echo.Context) error {
indexHTML := strings.ReplaceAll(rawIndexHTML, "<!-- memos.metadata -->", "<meta name=\"memos-memo-id\" content=\""+c.Param("memoID")+"\">"+"\n")
return c.HTML(http.StatusOK, indexHTML)
})
}
func getFileSystem(path string) http.FileSystem {
fs, err := fs.Sub(embeddedFiles, path)
if err != nil {
panic(err)
}
return http.FS(fs)
} }
func defaultAPIRequestSkipper(c echo.Context) bool { func defaultAPIRequestSkipper(c echo.Context) bool {

View File

@ -16,6 +16,7 @@ import (
apiv1 "github.com/usememos/memos/api/v1" apiv1 "github.com/usememos/memos/api/v1"
apiv2 "github.com/usememos/memos/api/v2" apiv2 "github.com/usememos/memos/api/v2"
"github.com/usememos/memos/plugin/telegram" "github.com/usememos/memos/plugin/telegram"
"github.com/usememos/memos/server/frontend"
"github.com/usememos/memos/server/integration" "github.com/usememos/memos/server/integration"
"github.com/usememos/memos/server/profile" "github.com/usememos/memos/server/profile"
"github.com/usememos/memos/server/service/backup" "github.com/usememos/memos/server/service/backup"
@ -83,7 +84,7 @@ func NewServer(ctx context.Context, profile *profile.Profile, store *store.Store
s.ID = serverID s.ID = serverID
// Serve frontend. // Serve frontend.
embedFrontend(e) frontend.Serve(e)
// Serve swagger in dev/demo mode. // Serve swagger in dev/demo mode.
if profile.Mode == "dev" || profile.Mode == "demo" { if profile.Mode == "dev" || profile.Mode == "demo" {

View File

@ -7,7 +7,8 @@
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="manifest" href="/manifest.json" /> <link rel="manifest" href="/manifest.json" />
<title>memos</title> <title>Memos</title>
<!-- memos.metadata -->
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>