向React API客户端添加Keycloak认证功能
截止日期：2023年4月21日
在之前的工作中，我们已经为Go的API服务器实现了GET/POST/PATCH/DELETE功能，并为React的API客户端实现了GET功能。
另外，上次我们还尝试在React中实现了Keycloak认证。
本次，我们计划为React的API客户端添加Keycloak认证功能。
在React应用程序中添加GET按钮。
在添加Keycloak认证之前，我们需要对React应用进行一些修改。
之前我们在执行React时会发送GET请求，但这次我们希望在点击GET按钮后显示请求结果。
我们将需要更新代码（Github上的App.js代码链接）。
const fetchData = async () => {
// const response = await axios.get("http://54.199.172.102:8080/health_data");
const response = await axios.get("http://localhost:8080/health_data");
setGetData(response.data);
};
return (
<>
<button onClick={fetchData}>GET</button>
为了添加Keycloak认证，需要更新代码。
将其安装在 React 文件夹中。
% yarn add keycloak-js @react-keycloak/web react-router-dom
更新以下文件（Github代码存储库：qiita20230416a）
– index.js
– App.js
– Keycloak.js
– Nav.js
使用本地Docker启动带有Keycloak认证的React API客户端和Go API服务器。
启动Keycloak服务器容器
% docker run -d -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin --name keycloak jboss/keycloak
设定将保持不变。
启动Go API服务器的容器
将端口号设为8081，以确保与Keycloak服务器不同。
% pwd
/***/go-api
% docker build -t go-api20230416:1.0 .
% docker run -it --name go-api -p 8081:8081 go-api20230416:1.0
启动React API客户端容器
% pwd
/***/react
% docker build -t react-api20230416:1.0 .
% docker run -it --name react-api -p 3000:3000 react-api20230416:1.0
检查Docker容器
有三个容器立在那里。
% docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e53dffe32045 react-api20230416:1.0 "yarn start" 2 hours ago Up 3 seconds 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp react-api
b7c24b6b8eb4 go-api20230416:1.0 "go run main.go" 2 hours ago Up 13 seconds 0.0.0.0:8081->8081/tcp, :::8081->8081/tcp go-api
5d817cac1909 jboss/keycloak "/opt/jboss/tools/do…" 45 hours ago Up 19 seconds 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp, 8443/tcp keycloak
请在浏览器中确认。
在AWS EC2上使用Docker进行启动
我們接下來在 EC2 上試著運行 Docker。
将EC2的IP地址应用到代码中
config.AllowOrigins = []string{"http://54.95.36.175:3000"}
const response = await axios.get("http://54.95.36.175:8081/health_data");
const keycloak = new Keycloak({
url: "http://52.196.53.235:8080/auth",
创建一个图像文件
% pwd
/***/go-api
% docker build -t go-api20230416:2.0 .
% pwd
/***/react
% docker build -t react-api20230416:2.0 .
将图像文件导出为.tar文件
ryo@Ryo-MacBook-Pro react % docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
react-api20230416 2.0 6bb3b8f485a6 28 minutes ago 1.55GB
go-api20230416 2.0 046c2858bc27 29 minutes ago 501MB
% docker save -o react-api20230416.tar react-api20230416:2.0
% docker save -o go-api20230416.tar go-api20230416:2.0
将.tar文件复制到EC2上
% scp -i ~/.aws/docker20230223.pem ./react-api20230416.tar ubuntu@54.95.36.175:/home/ubuntu
% scp -i ~/.aws/docker20230223.pem ./go-api20230416.tar ubuntu@54.95.36.175:/home/ubuntu
在EC2上将.tar文件转换为镜像文件。
我在EC2上工作。
% ssh ubuntu@54.95.36.175 -i ~/.aws/docker20230223.pem
$ docker load -i react-api20230416.tar
$ docker load -i go-api202330416.tar
$ docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
react-api20230416 2.0 6bb3b8f485a6 4 hours ago 1.55GB
go-api20230416 2.0 046c2858bc27 4 hours ago 501MB
搭建Keycloak服务器容器
$ docker run -d -p 8080:8080 -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin --name keycloak jboss/keycloak
$ docker exec -it keycloak bash
# Admin CLI コマンドで「SSL required」を「NONE」に変更
# Keycloakのデフォルト設定だと「SSL required」項目により、SSL通信が必須
# HTTP通信で使うために設定を変更
# 管理者ID（ここではadmin）で認証情報を設定する
$ /opt/jboss/keycloak/bin/kcadm.sh config credentials --server http://localhost:8080/auth --realm master --user admin --password admin
# レルム「master」のSSL requiredを「NONE」に変更
$ /opt/jboss/keycloak/bin/kcadm.sh update realms/master -s sslRequired=NONE
$ exit
之后，将按照以前的步骤创建Remul、user和client。然而，在user创建完成后，在用户登录之前，需要将Realm”test_realm”配置为可以通过HTTP访问。
$ docker exec -it keycloak bash
# Admin CLI コマンドで「SSL required」を「NONE」に変更
# Keycloakのデフォルト設定だと「SSL required」項目により、SSL通信が必須
# HTTP通信で使うために設定を変更
# 管理者ID（ここではadmin）で認証情報を設定する
$ /opt/jboss/keycloak/bin/kcadm.sh config credentials --server http://localhost:8080/auth --realm test_realm --user admin --password admin
# レルム「master」のSSL requiredを「NONE」に変更
$ /opt/jboss/keycloak/bin/kcadm.sh update realms/test_realm -s sslRequired=NONE
$ exit
我們完成 Keycloak 的設定後，接下來將繼續進行。
搭建Go API服务器的容器
$ docker run -dit --name go-api -p 8081:8081 go-api20230416:2.0
搭建一个用于React API客户端的容器。
$ docker run -dit --name react-api -p 3000:3000 react-api20230416:2.0
$ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
5652d679a7b8 react-api20230416:2.0 "yarn start" 7 seconds ago Up 5 seconds 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp react-api
1a556a7f10b7 go-api20230416:2.0 "go run main.go" 40 seconds ago Up 38 seconds 0.0.0.0:8081->8081/tcp, :::8081->8081/tcp go-api
63f11eb12279 jboss/keycloak "/opt/jboss/tools/do…" 2 minutes ago Up 2 minutes 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp, 8443/tcp keycloak
请使用浏览器访问并确认。
重建EC2实例
EC2 的选择
安装 Docker 到 EC2
% ssh ubuntu@35.77.214.212 -i ~/.aws/docker20230223.pem
# パッケージをアップデート
$ sudo apt-get update
# 必要なパッケージをインストール
$ sudo apt-get -y install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
# Docker のオフィシャルGPGキーを追加
$ curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
# Dockerダウンロードサイトを aptリポジトリに追加
$ sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
# Docker Engine一式をインストール
$ sudo apt-get update
$ sudo apt-get install -y docker-ce docker-ce-cli containerd.io
# ubuntuユーザーでdockerを利用できるようにします
$ sudo gpasswd -a ubuntu docker
# 一旦ログオフします
$ exit
登录并确认Docker已经安装。
% ssh ubuntu@35.77.214.212 -i ~/.aws/docker20230223.pem
$ docker --version
Docker version 23.0.4, build f480fb1
确认行动
以上の作業により、EC2上のDockerでkeycloakコンテナ、Go APIサーバーのコンテナ、およびReact APIクライアントのコンテナを立ち上げ、正常に動作を確認しました（コードのリポジトリはGitHubのqiitq20230421に置かれています）。
次は、React APIクライアントに作成、更新、削除の機能を追加し、さらにkeycloakの認可機能を組み込んでいきたいと考えています。
以下是参考翻译的中文版本：
请提供一个选项。
添加GET按钮的参考
学习使用React来理解AxiosPOST请求。
Keycloak认证添加的参考资料
如何禁用最新版Keycloak的SSL？
更改SSL required设置
尝试使用ALB+EC2配置搭建Keycloak
为了能够进行HTTPS连接，希望将ALB设置为SSL终止。将使用ACM证书管理器来管理证书。创建ACM时，使用Route53更为方便，因此也会使用Route53。
使用样例应用程序测试Keycloak的单点登录功能
如果使用默认设置启动Keycloak，则只能通过本地的“http://localhost:8080/auth”进行访问，无法通过外部的远程机器进行访问。如果希望从Keycloak的启动服务器以外的机器上的Web浏览器进行远程访问，则在执行”bin/standalone.sh”时需要使用以下方式添加”-b”选项进行启动。
作为管理员登录Keycloak时出现”HTTPS required”的提示
