AWS Amplify JavaScript Gitpod 自动设置答案

【问题标题】：AWS Amplify JavaScript Gitpod automatic setupAWS Amplify JavaScript Gitpod 自动设置
【发布时间】：2023-04-03 14:15:02
【问题描述】：

我正在尝试使用 Gitpod 设置 AWS Amplify JavaScript 项目，这样当我启动新工作区时，我不必手动执行 amplify-cli 步骤（添加 IAM 用户，生成 aws-exports.js文件等）。

到目前为止，我已经成功地在机器上成功installaws-cli 和amplify-cli（我将在任务初始化时将此添加到我的.gitpod.yml 文件中）

$ npm install @aws-amplify/cli
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"
unzip awscliv2.zip
sudo ./aws/install

所以我可以添加

$ export AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
$ export AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
$ export AWS_DEFAULT_REGION=us-west-2

环境变量到gitpod variables，但是在运行例如amplify pull 时，我看不到[默认] 用户，因为我在本地设置运行它时通常会看到。

【问题讨论】：

标签： javascript vue.js aws-amplify gitpod

【解决方案1】：

我已经开始工作了，首先我使用Gitpod account settings 为amplify 设置添加了这些环境变量：

AWS_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
AWS_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
AWS_DEFAULT_REGION=us-west-2
AWS_AMPLIFY_PROJECT_NAME=headlessProjectName
AWS_AMPLIFY_APP_ID=amplifyServiceProjectAppId

前三个是 IAM 用户凭证和配置，后两个是特定于 Amplify 的，可以在 Amplify 项目的 AWS 控制台中找到。

之后，我为 Gitpod 自定义 Docker 映像创建了一个 Dockerfile（由 @Pauline 建议）和一个 bash 脚本，该脚本创建 ~/.aws 配置文件并以无头模式运行 amplify pull。

.gitpod.dockerfile

FROM gitpod/workspace-full

# install aws-cli v2
RUN sudo curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip" \
  && unzip awscliv2.zip \
  && sudo ./aws/install

# install amplify-cli
RUN sudo curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

这将在 docker 映像上预安装 aws-cli 和 amplify-cli，以便它们可以在工作区中使用。另外不要忘记将 docker 配置添加到 .gitpod.yml 文件的顶部：

.gitpod.yml

image:
  file: .gitpod.Dockerfile

此时，我正在以一种在启动新工作区时无需手动选择 amplify-cli 选项的方式设置 Amplify。在开始时指定的环境变量的帮助下，魔术发生在自定义 bash 脚本中：

amplify-pull.bash

#!/bin/bash
set -e
IFS='|'

# Specify the headless amplify pull parameters
# https://docs.amplify.aws/cli/usage/headless/#amplify-pull-parameters
VUECONFIG="{\
\"SourceDir\":\"src\",\
\"DistributionDir\":\"dist\",\
\"BuildCommand\":\"npm run-script build\",\
\"StartCommand\":\"npm run-script serve\"\
}"
AWSCLOUDFORMATIONCONFIG="{\
\"configLevel\":\"project\",\
\"useProfile\":false,\
\"profileName\":\"default\",\
\"accessKeyId\":\"$AWS_ACCESS_KEY_ID\",\
\"secretAccessKey\":\"$AWS_SECRET_ACCESS_KEY\",\
\"region\":\"$AWS_DEFAULT_REGION\"\
}"
AMPLIFY="{\
\"projectName\":\"$AWS_AMPLIFY_PROJECT_NAME\",\
\"appId\":\"$AWS_AMPLIFY_APP_ID\",\
\"envName\":\"dev\",\
\"defaultEditor\":\"code\"\
}"
FRONTEND="{\
\"frontend\":\"javascript\",\
\"framework\":\"vue\",\
\"config\":$VUECONFIG\
}"
PROVIDERS="{\
\"awscloudformation\":$AWSCLOUDFORMATIONCONFIG\
}"

# Create AWS credential file inside ~/.aws
mkdir -p ~/.aws \
&& echo -e "[default]\naws_access_key_id=$AWS_ACCESS_KEY_ID\naws_secret_access_key=$AWS_SECRET_ACCESS_KEY" \
>> ~/.aws/credentials

# Create AWS config file ~/.aws
echo -e "[default]\nregion=$AWS_DEFAULT_REGION" >> ~/.aws/config

# Run amplify pull in Headless mode, 
# this also generates thw aws-exports.js file inside /src
amplify pull \
--amplify $AMPLIFY \
--frontend $FRONTEND \
--providers $PROVIDERS \
--yes

我使用 Vue 作为我的前端示例，因此需要根据项目类型更改这些值。其余参数非常简单，有关无头模式的更多信息可以在here 找到。如前所述，我还在amplify pull 命令之前创建aws config files。

这就是最终的.gitpod.yml 文件的样子

.gitpod.yml

image:
  file: .gitpod.dockerfile
  
tasks:
  - name: Amplify pull dev
    command: |
      bash amplify-pull.bash
      gp sync-done amplify
  
  - name: Install npm packages, run dev
    init: yarn install
    command: |
      gp sync-await amplify
      yarn serve
    
ports:
  - port: 8080
    onOpen: open-preview

在使用 gp sync 运行开发服务器之前，我也在等待 Amplify 拉取完成。

【讨论】：