将React的API客户端和Go的API服务器部署到位于EC2上的Docker中
成立日期：2023年3月27日
在之前的版本中，我们已经原型实现了一个Go的API服务器（包括GET、POST、PATCH和DELETE方法）以及一个React的API客户端（只包含GET方法）。这次，我们想把它们放在Docker中尝试一下。
试着将新的React应用程序放入Docker进行练习。
本地创建React应用。
% npx create-react-app docker-react20230325
用样例代码更新App.js。
import React, { useState, useEffect } from "react";
const INITIAL_COUNT = 0;
const SampleComponent = () => {
const [count, setCount] = useState(INITIAL_COUNT);
const callbackFunction = () => {
document.title = `${count} 回クリックされました`;
}
useEffect(callbackFunction, [count]);
const countIncrement = () => {
setCount((prevCount) => prevCount + 1);
};
const countReset = () => {
setCount(INITIAL_COUNT);
};
return (
<div className="App">
<p>現在のカウント数：{count}</p>
<button onClick={countIncrement}>+1 ボタン</button>
<button onClick={countReset}>リセット</button>
</div>
);
};
export default function App() {
return <SampleComponent />;
}
我們試試在本地運行一下。
% yarn install
% yarn start
创建Dockerfile
在 docker-react20230325 文件夹的直接下方创建一个名为 Dockerfile 的文件。
# ベースイメージの作成
FROM node:latest
# コンテナ内で作業するディレクトリを指定
WORKDIR /usr/src/app
# package.jsonとyarn.lockを/usr/src/appにコピー
COPY ["package.json", "yarn.lock", "./"]
# パッケージをインストール
RUN yarn install
# ファイルを全部作業用ディレクトリにコピー
COPY . .
# コンテナを起動する際に実行されるコマンド
ENTRYPOINT [ "yarn", "start" ]
构建图像
% docker build -t test20230325:1.0 .
我们会确认所创建的图像。
% docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
test20230325 1.0 4c6f98c9577a 35 seconds ago 1.46GB
启动容器
% docker run -dit --name sample20230325 -p 3000:3000 test20230325:1.0
% docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
991a053dc232 test20230325:1.0 "yarn start" 8 seconds ago Up 6 seconds 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp sample20230325
我会在AWS上尝试使用Docker进行启动。
将图像转化为文件。
% docker save -o test20230325.tar test20230325:1.0
将已将文件编码为图像的文件传输到 EC2 上。
% scp -i ~/.aws/docker20230223.pem ./test20230325.tar ubuntu@54.168.241.85:/home/ubuntu
在EC2上执行docker load操作。
$ docker load -i test20230325.tar
确认图像可用后，执行操作。尝试使用端口8082。
% docker image ls
% docker run -dit --name sample20230325 -p 8082:3000 test20230325:1.0
用 Docker 在 Go 的 API 服务器上运行。
在本地的 Docker 中执行
代码修改
由于在Docker上无法正常运行，因此我已更新了第103至104行的代码（Github上的代码）。
创建Dockerfile
在 go-api 中创建一个 Dockerfile。
# https://hub.docker.com/_/golang
FROM golang:1.18.1-alpine
WORKDIR /app
# main.go と go.mod と go.sum を /app にコピー
COPY ["main.go", "go.mod", "go.sum", "./"]
# パッケージをインストール
RUN go build
# コンテナを起動する際に実行されるコマンド
CMD ["go", "run", "main.go"]
构建图像
% docker build -t go_test20230326:1.0 .
我要确认一下制作好的形象。
% docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
go_test20230326 1.0 3d7a9e08b500 17 seconds ago 329MB
启动容器
% docker run -it --name go_api -p 8080:8080 go_test20230326:1.0
% docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
3eaec32c28f0 go_test20230326:1.0 "go run main.go" 5 seconds ago Up 3 seconds 0.0.0.0:8080->8080/tcp, :::8080->8080/tcp go_api
使用Docker在EC2上运行Go的API服务器
将图像转化为文件。
% docker image list
REPOSITORY TAG IMAGE ID CREATED SIZE
go_test20230326 1.0 f4b523363243 15 minutes ago 501MB
% docker save -o go_test20230326.tar go_test20230326:1.0
将文件化的镜像传输到 EC2。
% scp -i ~/.aws/docker20230223.pem ./go_test20230326.tar ubuntu@13.115.30.209:/home/ubuntu
在 EC2 上加载 docker。
$ docker load -i go_test20230326.tar
确认图像可用后，执行。尝试使用端口8080。
$ docker image ls
$ docker run -it --name go-api -p 8080:8080 go_test20230326:1.0
在Docker网络中进行通信。
在本地的 Docker 中创建一个 Go API 服务器的容器，并从另一个容器发出请求。
在网络apinet上搭建一个Go的API服务器容器
% docker network create apinet
% docker run -it --name go-api --net apinet go-api20230326:1.0
我会建立一个容器来进行API请求。
% docker run -rm -it --net apinet ubuntu /bin/bash
在容器中安装各种软件并发送API请求以进行确认。
# apt update
# apt -y upgrade
# apt install -y iproute2 iputils-ping curl
# ping -c 4 go-api
# curl http://go-api:8080/health_data
[
{
"id": 1,
"month": 1,
"day": 1,
"weight": 55.5
},
{
"id": 2,
"month": 1,
"day": 2,
"weight": 66.6
},
{
"id": 3,
"month": 1,
"day": 3,
"weight": 77.7
}
在本地的Docker上，创建一个包含Go的API服务器和React的API客户端的容器。
React程序会被加载到本地浏览器并执行，然后从“本地浏览器”向“本地Docker上的Go API服务器”发送请求。
这是Github上的代码存储库链接。
我会创建一个名为apinet的网络。虽然现在不会直接使用它，但将来计划用于数据库连接。
% docker network create apinet
我将启动Go的API服务器容器。
% pwd
/***/go-api
% docker build -t go-api20230327:1.0 .
% docker run -it --name go-api --net apinet -p 8080:8080 go-api20230327:1.0
我会启动React的API客户端容器。
% pwd
/***/react
% docker build -t react-api20230327:1.0 .
% docker run -it --name react-api --net apinet -p 3000:3000 react-api20230327:1.0
我会在AWS EC2上使用Docker搭建一个Go的API服务器和一个React的API客户端。
将EC2的IP地址反映到React代码中。
const response = await axios.get("http://54.199.172.102:8080/health_data");
将EC2的IP地址反映到Go的代码中。
config.AllowOrigins = []string{"http://54.199.172.102:3000"}
将图像文件化并复制到EC2上。
% docker build -t react-api20230327a:1.0 .
% docker build -t go-api20230327a:1.0 .
% docker image ls
REPOSITORY TAG IMAGE ID CREATED SIZE
react-api20230327a 1.0 873f12e8926c 2 hours ago 1.52GB
go-api20230327a 1.0 086fb0816a7c 17 hours ago 501MB
% docker save -o react-api20230327a.tar react-api20230327a:1.0
% docker save -o go-api20230327a.tar go-api20230327a:1.0
% scp -i ~/.aws/docker20230223.pem ./react-api20230327a.tar ubuntu@54.199.172.102:/home/ubuntu
% scp -i ~/.aws/docker20230223.pem ./go-api20230327a.tar ubuntu@54.199.172.102:/home/ubuntu
在 EC2 上使用 docker load
$ docker load -i react-api20230327a.tar
$ docker load -i go-api20270327a.tar
我会在EC2上打开端口3000。
使用EC2来部署容器（Go的API服务器和React的API客户端）。
React的API客户端将使用端口3000。
$ docker network create apinet
$ docker run -it --name go-api --net apinet -p 8080:8080 go-api20230327:1.0
$ docker run -it --name react-api --net apinet -p 3000:3000 react-api20230327a:1.0
我能够从位于EC2上的Docker中访问React，并且能够通过位于EC2上的Docker的Go API服务器进行GET请求。
请参考。
・使用Docker搭建React开发环境
・使用SCP将文件传输到AWS的EC2
・在Ubuntu服务器上安装Nginx
・在EC2上使用https以外部方式访问运行React的npm服务
・Docker入门 | 构建golang和gin的环境
