【AWS Amplify】React開発でAWS Amplifyを使ってみた

はじめに

最近、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）

使い方は公式を見るのが早いと思う。
https://aws.amazon.com/jp/getting-started/hands-on/build-react-app-amplify-graphql/module-one/

かなり簡単なので、ここでは概要のみ。

1. Githubと連携
2. フロントエンドのビルド設定の確認
3. ビルドのボタン押す

ハマったとこ

上記の2番で少しハマった。
ビルド設定用ファイル（amplify.yml）は自動的に作成されるが、そのまま実行するとうまくいかなかった。
※デプロイまでは完了したが、ドメインにアクセスすると404エラー。
ログを見ると、「No index.html detected in deploy folder:...」というエラーが出ていたので、ビルドした後のファイル読みこめてないじゃんってなった。

以下のようにファイルを変更すると、正常に動作した。

amplify.yml

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プロジェクト配下まで移動
2. ライブラリのインストール
   を行った。

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

• baseDirectory
  ビルドにて生成されたファイルの場所を指定。
  私の場合は、react配下のbuildを指定した。

これでビルドデプロイが成功すると、無事AWS Apmlifyから提供されるドメインにてアプリが確認できる。
iPhone実機から自分のアプリを確認できたので、よかった。
もっと使い道は多いと思うので、後におべんきょします。