Skip to content

终端用户使用界面部署

Jump to bottom
supinyu edited this page May 15, 2024 · 11 revisions

打包成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运行。

部署到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。
Clone this wiki locally