Skip to content

终端用户使用界面部署

Jump to bottom
supinyu edited this page Jun 19, 2024 · 11 revisions

部署目前有3种方式：

  • Docker镜像部署
  • 部署到Amazon S3，通过Amazon Cloudfront提供访问地址
  • 使用Amplify部署

1、镜像部署

打包成Docker镜像

准备工作

  1. 拿到完成的前端代码。
  2. 有AWS海外区账号，能够访问控制台，（需要访问Amazon ECR、Amazon EKS、Amazon EC2、Amazon IAM）拿到AK SK。
  3. 一台可以正常访问Nodejs、NPM、Docker的电脑（用于打包Docker），或在海外区Amazon EC2开一台Linux 2023的EC2。
  4. 进行UI构建的电脑/EC2，安装Nodejs（version 20.9.0）与Docker，通过aws configure命令将AK SK配置进环境。
# 安装Docker
curl -fsSL https://get.docker.com | bash -s docker

# 安装Nodejs 把下述命令保存进一bash文件 
# 如deploy_dependency.sh 然后 bash ./deploy_dependency.sh

#!/bin/bash
CURRENT_DIR=$(cd $(dirname $0); pwd)
FILE_NAME=node-v20.9.0-linux-x64
wget https://nodejs.org/dist/v20.9.0/${FILE_NAME}.tar.xz
tar -xvf ${FILE_NAME}.tar.xz
cd ${FILE_NAME}/bin
./node -v
sudo ln -s ${CURRENT_DIR}/${FILE_NAME}/bin/node /usr/local/bin/node
sudo ln -s ${CURRENT_DIR}/${FILE_NAME}/bin/npm /usr/local/bin/npm
echo 'Install Nodejs Success'
sudo node -v

打包Docker镜像

  1. 检查Docker暴露的端口 (Dockerfile、nginx.conf）默认8800
  2. 配置后端访问API的环境变量 配置进 .env 文件（前端代码跟目录下）
  3. 控制台创建Amazon ECR 存储库

image

  1. docker build （第九步里执行 platform根据目标运行平台选择 不写默认会遵从构建机的平台 my_tag换成推送命令里的Tag）
# run on linux ec2/lambda/ecs(amd64)
# docker buildx build --platform linux/amd64 --network host -t my_tag .
# run on lambda/macOS(arm64)
# docker buildx build --platform linux/arm64 --network host -t my_tag .

image

  1. docker push （build命令换成第六步里的命令）

image

  1. 推送成功后，就可以在Amazon ECR控制台上看到托管的Docker镜像，随后根据实际情况配置进Amazon EKS运行。

2、部署到Amazon S3，通过Amazon Cloudfront提供访问地址

参考：将基于 React 的单页应用程序部署到 Amazon S3 CloudFront - AWS Prescriptive Guidance 可以使用其中的Cloudformation

逻辑如下：

  1. 准备一台构建环境，已安装Nodejs 20或以上版本。
  2. 进入前端代码跟目录，将服务端API地址写入 .env 文件。
  3. 进入前端代码跟目录，执行npm i && npm run build
  4. 控制台创建一个S3 Bucket，将第三步构建结果（build文件夹里的文件 保留原有目录结构）上传（不要上传build），其余选项按默认即可。
  5. 在S3 Bucket的属性选项卡里，页面最底部，启用静态网站托管，输入index.html。
  6. 控制台打开Cloudfront，创建一个Cloudfront回源第四步创建的S3 Bucket。回到S3 Bucket，权限允许刚刚创建的Cloudfront进行读访问。随后访问Cloudfront地址即可正常显示页面。
  7. 如需限制访问，可以在Cloudfront限制入口IP。

3、使用Amplify部署-使用

3-1、创建Cognito User pool

1、登陆Cognito控制台，点击Create user pool，创建cognito user pool

image

2、选择User name，点击Next

image

3、选择No MFA以及Email if available, otherwise SMS，点击Next

image

4、选择Next

image

5、选择Send Email with cognito，输入IAM role name

image

6、输入User pool name以及App client name，点击Next

image

7、Review所有的信息没有问题后，点击Create user pool创建

8、Amplify部署时需要讲user pool ID和client ID填入环境变量中

image

3-2、部署Amplify

1、登陆Amplify控制台

image

2、请选择右上角的新建应用程序（Create new app），在 Amplify 托管入门页面上，选择 GitHub，然后选择继续（Next）

image

3、 如果这是首次连接 GitHub 存储库，则浏览器会在 GitHub.com 上打开一个新页面，请求允许在您的 GitHub 帐户中进行 AWS Amplify 授权。选择要安装 Amplify GitHub 应用程序的 GitHub 账户。

image

4、您将被重定向到 Amplify 控制台中应用程序的添加存储库分支页面。在最近更新的存储库列表中，选择要连接的存储库的名称。在分支列表中，选择要连接的存储库分支的名称。选择 Next（下一步）。

image

5、在配置构建设置页面上，选择下一步

image

6、在查看页面上，选择保存和部署（Save and deploy）

REACT_APP_BACKEND_URL ： 这个环境变量是后端的API地址(已经废弃)

新的需要设置的环境变量如下：

VITE_BACKEND_URL=
VITE_TITLE=
VITE_LOGO=
VITE_RIGHT_LOGO=
VITE_SQL_DISPLAY=
VITE_COGNITO_REGION=
VITE_COGNITO_USER_POOL_ID=
VITE_COGNITO_USER_POOL_WEB_CLIENT_ID=

具体解释

VITE_BACKEND_URL：后端的api地址

VITE_TITLE：首页左上角的logo文字

VITE_LOGO：首页左上角的logo图标

VITE_RIGHT_LOGO：首页右上角的logo图标，不需要可以不填写

VITE_SQL_DISPLAY：前端是否显示SQL

VITE_COGNITO_REGION：COGNITO配置

VITE_COGNITO_USER_POOL_ID：COGNITO配置

VITE_COGNITO_USER_POOL_WEB_CLIENT_ID：COGNITO配置

image

7、当构建完成后，所有项目将部署到由 Amplify Hosting 管理的托管环境。您可以在 amplifyapp.com 域上查看您的应用程序。

image

4、默认用户名密码

userName "bi_example@amazon.com"

password "HiGenBI@2024"

针对网站的不安全因素，需要设置成True

image

Clone this wiki locally