feat(06): above the cloud

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

frontend/public/config.js

@@ -1 +1 @@
-export const apiUrl = "http://localhost:8888";
+export const apiUrl = "http://152.136.170.99:20248";

server/backend/.local.env.template

@@ -0,0 +1,12 @@
+HASURA_GRAPHQL_ENDPOINT=<address>:<port>/v1/graphql
+HASURA_GRAPHQL_ADMIN_SECRET=<secret>
+
+JWT_SECRET=<same as in the hasura environment variable>
+
+EMAIL_HOST=smtp.163.com
+EMAIL_PORT=465
+EMAIL_SECURE=true
+EMAIL_ADDRESS=
+EMAIL_PASSWORD=
+
+FILE_DIR=/data/upload

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 <username>@<ip-address>:<directory>/docker-compose.yml
+   scp ./.local.env.template <username>@<ip-address>:<directory>/.local.env
+   ```
+
+3. 在服务器上修改`docker-compose.yml`，正确填写 Docker Hub 或 Github Container Registry 的 Docker Tag，形如`<username>/<repo-name>:latest`或`ghcr.io/<username>/<repo-name>: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 <username> docker
+   newgrp docker
+   ```
+
+8. 确认 docker 容器已启动
+
+   ```bash
+   docker ps
+   ```
+
+9. 查找对应的 Docker ID，查看其日志。若出现`Server running at http://localhost:8888/`，则说明成功启动
+
+   ```bash
+   docker logs <docker-id>
+   ```
+
+10. 使用 Postman 执行任意请求（需要换成`<address>:<port>`，给出的`docker-compose.yml`使用端口 20248），若行为表现与本地后端相同，则说明部署成功
+
+11. 如果无法访问，且服务器在国内地域（或在国外地域但其他网站访问正常），则很可能是服务器端口没放通，新增规则放通 TCP 协议的 20248 端口即可

server/backend/docker-compose.yml.template

@@ -0,0 +1,10 @@
+services:
+  backend:
+    image: <your-docker-tag>
+    restart: always
+    ports:
+      - 20248:8888
+    env_file:
+      - .local.env
+    volumes:
+      - /data/upload:/data/upload

server/database/.local.env.template

@@ -0,0 +1 @@
+HASURA_GRAPHQL_JWT_SECRET={"type":"HS256", "key": "<your-secret>"}

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 <username>@<ip-address>:<directory>/docker-compose.yml
+   scp ./.local.env.template <username>@<ip-address>:<directory>/.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 <username> docker
+   newgrp docker
+   ```
+
+8. 确认 docker 容器已启动
+
+   ```bash
+   docker ps
+   ```
+
+9. 浏览器访问`<address>:<port>/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`

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