在React开发中尝试使用AWS Amplify

3 年 ago
科, 颖
1 minute

首先

我最近在用React进行个人开发，想要从实际设备上确认iPhone布局，所以我在寻找一种可以轻松部署开发分支的方法。
结果，我发现了一个叫做AWS Amplify的服务，并尝试使用了一下。
它非常方便，所以我想写一些关于它的内容。
需要注意的是，我只是部署了前端部分。

AWS Amplify是什么?

当你访问AWS网页时，上面写着“能够在几小时内构建完整的网页应用和移动应用。容易上手，也容易扩展。”

我不知道是否考虑了像这样的情况来使用，但是因为能够轻松地进行构建和部署，所以我尝试了一下。以下是链接。AWS Apmlify。

嘗試著的目錄結構

以下是我个人开发项目的目录结构。在处理AWS Amplify构建文件路径时遇到了一点小问题，为了确保准确性与大家共享一下。

root/
  ┝ main/react/
          ┝　src/ 
            　┝ components/
                　┝ assets/
                　┝ components/
                　┝ index.tsx　など
                　┝ App.tsx　など
            　┝ node_modules 
            　┝ public/

※細かい部分は省略

React的建構方法

在中国最好的做法是查看官方指南。

因为非常简单，所以这里只提供概述。

    1. 在Github上与其进行连接

 

    1. 确认前端构建设置

 

    点击构建按钮

一头栽进去

我在第2个问题上遇到了一点困难。
虽然构建配置文件（amplify.yml）会自动生成，但直接运行却不起作用。
*部署已经完成，但访问域时出现404错误。
查看日志时，发现出现了“在部署文件夹中未检测到index.html”的错误，意味着构建后的文件没有被加载。

按照以下的方式修改文件后，程序正常运行。

version: 1
frontend:
  phases:
    # IMPORTANT - Please verify your build commands
    preBuild:
      commands:
        - cd src/main/react
        - npm ci
    build:
      commands:
        - 'npm run build'
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: ./src/main/react/build
    files:
      - '**/*'
  cache:
    paths: []
    • preBuild

 

    • ビルド前に設定することを記載。

 

    私の場合は、
    1. 我进入了 react 项目下面，

 

    并进行了库的安装。

build
ビルド方法を記載。
私の場合は、’npm run build’を記載した。
これを叩くと、react配下にbuildフォルダが作成される。

baseDirectory
ビルドにて生成されたアプトプットの場所を指定。
私の場合は、react配下のbuildを指定した。

当构建部署成功后，可以在由AWS Amplify提供的域名上确认应用程序是否可见。
由于能够从iPhone设备上确认自己的应用程序，所以很好。
我认为它有更多的用途，所以以后会继续学习。

bannerAds