From f97998bf86000399380566819df9c09432730914 Mon Sep 17 00:00:00 2001
From: FranGuam <frankguansy@icloud.com>
Date: Thu, 22 Aug 2024 23:31:36 +0800
Subject: [PATCH] feat(06): upgrade to https

---
 frontend/.env                    |  6 +--
 frontend/public/config.js        |  2 +-
 server/nginx/README.md           | 82 ++++++++++++++++++++++++++++++++
 server/nginx/docker-compose.yml  |  9 ++++
 server/nginx/nginx.conf.template | 27 +++++++++++
 5 files changed, 122 insertions(+), 4 deletions(-)
 create mode 100644 server/nginx/README.md
 create mode 100644 server/nginx/docker-compose.yml
 create mode 100644 server/nginx/nginx.conf.template

diff --git a/frontend/.env b/frontend/.env
index 5dc12e5..6b25edb 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,3 +1,3 @@
-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
+REACT_APP_BACKEND_URL=https://workshop.eesast.com
+REACT_APP_HASURA_HTTPLINK=https://workshop.eesast.com/v1/graphql
+REACT_APP_HASURA_WSLINK=wss://workshop.eesast.com/v1/graphql
diff --git a/frontend/public/config.js b/frontend/public/config.js
index 1cf5dcb..4babf9b 100644
--- a/frontend/public/config.js
+++ b/frontend/public/config.js
@@ -1 +1 @@
-export const apiUrl = "http://152.136.170.99:20248";
+export const apiUrl = "https://workshop.eesast.com";
diff --git a/server/nginx/README.md b/server/nginx/README.md
new file mode 100644
index 0000000..df7bbcb
--- /dev/null
+++ b/server/nginx/README.md
@@ -0,0 +1,82 @@
+# 域名、HTTPS 和反向代理设置方法
+
+1. 向域名提供商（如腾讯云）购买域名（注：由于这是学习型工程，大家可以挑最便宜的域名，一般 10 元左右可以包年，次年续费可能要贵一些；所有的域名在技术上都是一样的，只有好听与否的差异）
+
+2. 配置 DNS 解析记录。一般域名提供商会连带提供简单的 DNS 解析服务，设置一条解析到你部署后端用到的服务器的 IPv4 地址（A 记录）即可，其他设置可按需选择
+
+3. 等待十几分钟 DNS 传播，此时你应当已经可以通过如下 URL 访问后端服务（仅将 IP 地址改为域名）
+
+   ```http
+   POST http://<your-domain>:20248/user/login
+   ```
+
+4. 接下来，我们希望使用 HTTPS 通信（TLS/SSL 加密）来使访问更安全，需要生成 SSL 证书（即带有授权的一对密钥）。我们使用 Let's Encrypt 提供的免费证书及其自助签发软件 certbot
+
+   ```bash
+   sudo apt-get install certbot
+   ```
+
+5. 安装完成后，运行以下命令即可生成 SSL 证书（如果生成失败，可能是未放通 80 端口，请根据报错信息调整）
+
+   ```bash
+   sudo certbot certonly --standalone -d <your-domain>
+   ```
+
+   证书生成在`/etc/letsencrypt/live/<your-domain>/`文件夹下，其中`privkey.pem`为私钥、`fullchain.pem`包含公钥。这些文件实际上是指向`/etc/letsencrypt/archive`目录下存储的真实证书的链接，由 certbot 定期更新从而指向最新的证书，在 docker 中使用证书必须将这两个目录都映射到容器内。
+
+6. 接下来，我们使用 Nginx(via Docker)来提供 HTTPS 和反向代理服务，请确保服务器安装了 docker、docker compose
+
+   ```bash
+   # 确认是否已安装
+   docker -v
+   docker compose version
+   # docker 安装方法：https://docs.docker.com/engine/install/
+   # docker compose 安装方法： https://docs.docker.com/compose/install/
+   ```
+
+7. 在本地电脑的仓库中使用 scp 或其他工具将`docker-compose.yml`和`nginx.conf`复制到服务器任意文件夹
+
+   ```bash
+   cd ./server/nginx
+   scp ./docker-compose.yml <username>@<ip-address>:<directory>/docker-compose.yml
+   scp ./nginx.conf.template <username>@<ip-address>:<directory>/nginx.conf
+   ```
+
+8. 在服务器上修改`nginx.conf`，正确填写域名和服务器 IP 地址
+
+   ```bash
+   vim ./nginx.conf
+   ```
+
+9. 在该文件夹中执行 docker compose
+
+   ```bash
+   docker compose up -d
+   ```
+
+10. 如果后续拉取镜像时遇到网络问题，可以配置 docker hub 的国内镜像源（[Docker Hub 国内镜像源配置 - 飞仔 FeiZai - 博客园 (cnblogs.com)](https://www.cnblogs.com/yuzhihui/p/17461781.html)）
+
+11. 如果提示 Permission denied，可以 sudo 运行，也可以将本用户添加到 docker 用户组
+
+    ```bash
+    sudo gpasswd -a <username> docker
+    newgrp docker
+    ```
+
+12. 确认 docker 容器已启动
+
+    ```bash
+    docker ps
+    ```
+
+13. 查找对应的 Docker ID，查看其日志。若没有报错，则说明成功启动
+
+    ```bash
+    docker logs <docker-id>
+    ```
+
+14. 此时，你应当可以通过如下 URL 访问后端服务（将 http 改为 https，且不需要端口号）
+
+    ```http
+    POST https://<your-domain>/user/login
+    ```
diff --git a/server/nginx/docker-compose.yml b/server/nginx/docker-compose.yml
new file mode 100644
index 0000000..f4f9373
--- /dev/null
+++ b/server/nginx/docker-compose.yml
@@ -0,0 +1,9 @@
+services:
+  nginx:
+    image: nginx:stable-alpine
+    ports:
+      - 443:443
+    restart: always
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf
+      - /etc/letsencrypt:/etc/letsencrypt
diff --git a/server/nginx/nginx.conf.template b/server/nginx/nginx.conf.template
new file mode 100644
index 0000000..1c2c91e
--- /dev/null
+++ b/server/nginx/nginx.conf.template
@@ -0,0 +1,27 @@
+events {
+  worker_connections 1024;
+}
+
+http {
+  server {
+    listen 443 ssl; # listen to IPv4, with SSL
+    listen [::]:443 ssl; # listen to IPv6, with SSL
+
+    server_name <your-domain>; # domain name
+
+    ssl_certificate /etc/letsencrypt/live/<your-domain>/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/<your-domain>/privkey.pem;
+
+    location / {
+      proxy_pass http://<ip-address>:20248; # proxy to backend server
+      client_max_body_size 100M; # allow large file upload
+    }
+
+    location /v1/graphql {
+      proxy_pass http://<ip-address>:20247; # proxy to hasura graphql endpoint
+      # Important: Do not add / to the end of URL, ref: https://blog.csdn.net/q1298252589/article/details/120729989
+      proxy_set_header Upgrade $http_upgrade; # enable websocket
+      proxy_set_header Connection "upgrade"; # enable websocket
+    }
+  }
+}