Skip to content

终端用户使用界面部署

Jump to bottom
supinyu edited this page May 27, 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部署

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地址

image

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

image

4、默认用户名密码

userName "bi_example@amazon.com"

password "HiGenBI@2024"

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

image

Clone this wiki locally