From b67e770e439808c709a5b47b863b2444d78bd5d1 Mon Sep 17 00:00:00 2001 From: FranGuam Date: Thu, 22 Aug 2024 23:31:05 +0800 Subject: [PATCH] feat(06): above the cloud --- frontend/.env | 6 +- frontend/public/config.js | 2 +- server/backend/.local.env.template | 12 ++++ server/backend/README.md | 62 ++++++++++++++++++++ server/backend/docker-compose.yml.template | 10 ++++ server/database/.local.env.template | 1 + server/database/README.md | 66 ++++++++++++++++++++++ server/database/docker-compose.yml | 31 ++++++++++ 8 files changed, 186 insertions(+), 4 deletions(-) create mode 100644 server/backend/.local.env.template create mode 100644 server/backend/README.md create mode 100644 server/backend/docker-compose.yml.template create mode 100644 server/database/.local.env.template create mode 100644 server/database/README.md create mode 100644 server/database/docker-compose.yml diff --git a/frontend/.env b/frontend/.env index c005e86..5dc12e5 100644 --- a/frontend/.env +++ b/frontend/.env @@ -1,3 +1,3 @@ -REACT_APP_BACKEND_URL=http://localhost:8888 -REACT_APP_HASURA_HTTPLINK=https://web-workshop.hasura.app/v1/graphql -REACT_APP_HASURA_WSLINK=wss://web-workshop.hasura.app/v1/graphql +REACT_APP_BACKEND_URL=http://152.136.170.99:20248 +REACT_APP_HASURA_HTTPLINK=http://152.136.170.99:20247/v1/graphql +REACT_APP_HASURA_WSLINK=ws://152.136.170.99:20247/v1/graphql diff --git a/frontend/public/config.js b/frontend/public/config.js index 3f16e1e..1cf5dcb 100644 --- a/frontend/public/config.js +++ b/frontend/public/config.js @@ -1 +1 @@ -export const apiUrl = "http://localhost:8888"; +export const apiUrl = "http://152.136.170.99:20248"; diff --git a/server/backend/.local.env.template b/server/backend/.local.env.template new file mode 100644 index 0000000..6b8dcf6 --- /dev/null +++ b/server/backend/.local.env.template @@ -0,0 +1,12 @@ +HASURA_GRAPHQL_ENDPOINT=
:/v1/graphql +HASURA_GRAPHQL_ADMIN_SECRET= + +JWT_SECRET= + +EMAIL_HOST=smtp.163.com +EMAIL_PORT=465 +EMAIL_SECURE=true +EMAIL_ADDRESS= +EMAIL_PASSWORD= + +FILE_DIR=/data/upload diff --git a/server/backend/README.md b/server/backend/README.md new file mode 100644 index 0000000..1fcd1a3 --- /dev/null +++ b/server/backend/README.md @@ -0,0 +1,62 @@ +# 后端(via Docker)设置步骤 + +1. 确保服务器安装了 docker、docker compose + + ```bash + # 确认是否已安装 + docker -v + docker compose version + # docker 安装方法：https://docs.docker.com/engine/install/ + # docker compose 安装方法： https://docs.docker.com/compose/install/ + ``` + +2. 在本地电脑的仓库中使用 scp 或其他工具将`docker-compose.yml`和`.local.env`复制到服务器任意文件夹 + + ```bash + cd ./server/backend + scp ./docker-compose.yml.template @:/docker-compose.yml + scp ./.local.env.template @:/.local.env + ``` + +3. 在服务器上修改`docker-compose.yml`，正确填写 Docker Hub 或 Github Container Registry 的 Docker Tag，形如`/:latest`或`ghcr.io//:latest` + + ```bash + vim ./docker-compose.yml + ``` + +4. 在服务器上修改`.local.env`，与本地`/backend/.local.env`内容相同，新增了一个`FILE_DIR`，一般不需要修改 + + ```bash + vim ./.local.env + ``` + +5. 在该文件夹中执行 docker compose + + ```bash + docker compose up -d + ``` + +6. 如果后续拉取镜像时遇到网络问题，可以配置 docker hub 的国内镜像源（[Docker Hub 国内镜像源配置 - 飞仔 FeiZai - 博客园 (cnblogs.com)](https://www.cnblogs.com/yuzhihui/p/17461781.html)） + +7. 如果提示 Permission denied，可以 sudo 运行，也可以将本用户添加到 docker 用户组 + + ```bash + sudo gpasswd -a docker + newgrp docker + ``` + +8. 确认 docker 容器已启动 + + ```bash + docker ps + ``` + +9. 查找对应的 Docker ID，查看其日志。若出现`Server running at http://localhost:8888/`，则说明成功启动 + + ```bash + docker logs + ``` + +10. 使用 Postman 执行任意请求（需要换成`
:`，给出的`docker-compose.yml`使用端口 20248），若行为表现与本地后端相同，则说明部署成功 + +11. 如果无法访问，且服务器在国内地域（或在国外地域但其他网站访问正常），则很可能是服务器端口没放通，新增规则放通 TCP 协议的 20248 端口即可 diff --git a/server/backend/docker-compose.yml.template b/server/backend/docker-compose.yml.template new file mode 100644 index 0000000..c155bab --- /dev/null +++ b/server/backend/docker-compose.yml.template @@ -0,0 +1,10 @@ +services: + backend: + image: + restart: always + ports: + - 20248:8888 + env_file: + - .local.env + volumes: + - /data/upload:/data/upload diff --git a/server/database/.local.env.template b/server/database/.local.env.template new file mode 100644 index 0000000..e776a33 --- /dev/null +++ b/server/database/.local.env.template @@ -0,0 +1 @@ +HASURA_GRAPHQL_JWT_SECRET={"type":"HS256", "key": ""} diff --git a/server/database/README.md b/server/database/README.md new file mode 100644 index 0000000..d842cb0 --- /dev/null +++ b/server/database/README.md @@ -0,0 +1,66 @@ +# Hasura(via Docker)设置步骤 + +> 如果你已经使用 hasura.io 官网创建 Hasura 服务和数据库、并且希望继续使用，则以下内容不是必需的，在前端和后端的`.env`文件中填写 hasura.io 提供的 endpoint 和 secret 即可 + +1. 确保服务器安装了 docker、docker compose + + ```bash + # 确认是否已安装 + docker -v + docker compose version + # docker 安装方法：https://docs.docker.com/engine/install/ + # docker compose 安装方法： https://docs.docker.com/compose/install/ + ``` + +2. 创建`/data/postgresql`文件夹或其他用于存储数据库数据的文件夹（并相应修改`docker-compose.yml`中的挂载点） + + ```bash + mkdir /data/postgresql + ``` + +3. 在本地电脑的仓库中使用 scp 或其他工具将`docker-compose.yml`和`.local.env`复制到服务器任意文件夹 + + ```bash + cd ./server/database + scp ./docker-compose.yml @:/docker-compose.yml + scp ./.local.env.template @:/.local.env + ``` + +4. 在服务器上修改`.local.env`，正确填写 JWT secret（详见`/tutorials/04-Backend.md`） + + ```bash + vim ./.local.env + ``` + +5. 在该文件夹中执行 docker compose + + ```bash + docker compose up -d + ``` + +6. 如果后续拉取镜像时遇到网络问题，可以配置 docker hub 的国内镜像源（[Docker Hub 国内镜像源配置 - 飞仔 FeiZai - 博客园 (cnblogs.com)](https://www.cnblogs.com/yuzhihui/p/17461781.html)） + +7. 如果提示 Permission denied，可以 sudo 运行，也可以将本用户添加到 docker 用户组 + + ```bash + sudo gpasswd -a docker + newgrp docker + ``` + +8. 确认 docker 容器已启动 + + ```bash + docker ps + ``` + +9. 浏览器访问`
:/console`，给出的`docker-compose.yml`使用端口 20247 + +10. 如果无法访问，且服务器在国内地域（或在国外地域但其他网站访问正常），则很可能是服务器端口没放通，新增规则放通 TCP 协议的 20247 端口即可 + +11. 使用`docker-compose.yml`中定义的`HASURA_GRAPHQL_ADMIN_SECRET`登录 Hasura 后台 + +12. 在 Data 标签页连接数据库（Connect Database），选择 Postgres，点击 Connect Existing Database + +13. 数据库名称随意自取，使用环境变量连接数据库（Connect Database via Environment variable），环境变量是之前`docker-compose.yml`中定义的`PG_DATABASE_URL`，其他设置无需调整，点击 Connect Database + +14. 数据库连接完成，后续操作参照`/tutorials/03-Database.md` diff --git a/server/database/docker-compose.yml b/server/database/docker-compose.yml new file mode 100644 index 0000000..5bd5b0f --- /dev/null +++ b/server/database/docker-compose.yml @@ -0,0 +1,31 @@ +# https://github.com/hasura/graphql-engine/blob/stable/install-manifests/docker-compose/docker-compose.yaml +services: + postgres: + image: postgres:15 + restart: always + volumes: + - /data/postgresql:/var/lib/postgresql/data + environment: + POSTGRES_PASSWORD: mypostgrespassword + graphql-engine: + image: hasura/graphql-engine:v2.40.0 + ports: + - 20247:8080 + restart: always + environment: + ## postgres database to store Hasura metadata + HASURA_GRAPHQL_METADATA_DATABASE_URL: postgres://postgres:mypostgrespassword@postgres:5432/postgres + ## this env var can be used to add the above postgres database to Hasura as a data source. this can be removed/updated based on your needs + PG_DATABASE_URL: postgres://postgres:mypostgrespassword@postgres:5432/postgres + ## enable the console served by server + HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console + ## enable debugging mode. It is recommended to disable this in production + # HASURA_GRAPHQL_DEV_MODE: "true" + HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log + ## uncomment next line to run console offline (i.e load console assets from server instead of CDN) + # HASURA_GRAPHQL_CONSOLE_ASSETS_DIR: /srv/console-assets + ## uncomment next line to set an admin secret + HASURA_GRAPHQL_ADMIN_SECRET: myhasuragraphqladminsecret + env_file: + # JWT secret, optional. Use https://jwtsecret.com/generate to generate a base64 secret + - .local.env