AWS Amplify Hostingでアプリをビルド、デプロイ、ホスティングする

#AWS

#AWS Amplify

yukoyagi

2023.09.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、yagiです。

今回は、AWS Amplify HostingでGithubと連携してReactアプリをデプロイする手順を記載したいと思います。 CI/CD環境も同時に構築できるので利用しています。

現在はこのようなCI/CD環境を同時に構築できHostingできるサービスが沢山あると思いますが、さまざまな事情で、そこからAWSへ移行したいなどの要件も増えているかとおもいます。

なお、AWS Amplify はデフォルトでは npm ci を利用するように amplify.yaml にコマンドが記載されていますが、今回は代わりに yarn を利用しました。

すでに別環境で動いているコードを移行することになるため、細かいアプリのバージョンなどを合わせる必要がありました。

そのため、デフォルトの Amplify.yaml を書き換えたり、パッケージのバージョンなどを指定する必要があったため、そのあたりも含めて記載したいと思います。

AWS Amplifyとは？

AWS Amplify は、フロントエンドのウェブ/モバイルデベロッパーが AWS でフルスタックアプリケーションを簡単に構築、出荷、ホストできるようにする完全なソリューションであり、ユースケースの進化に合わせて幅広い AWS サービスを活用できる柔軟性を備えています。クラウドの専門知識は不要。

Amplifyにはアプリケーションのバックエンドを構築したり、フロントエンドのUI構築したりする機能もありますが、今回はWebアプリケーションをホスティングする機能を使いたいと思います。

使ってみる

AWS Amplifyのコンソールへ移動し、新しいアプリケーションからウェブアプリケーションをホストをクリックします。

今回はGithubリポジトリにある既存のコードをから、ビルド、デプロイ、ホストしたいので、Githubを選択して、続行をクリックします。

リポジトリとブランチを選択して次へを押下します。もしプルダウンに表示されない場合は、Githubのアクセス許可を表示をクリックします。

Githubのアクセス許可を表示をクリックした場合は、Github側でアクセス権の更新を行います。選択したリポジトリにアクセス権限を付与したいリポジトリのみが含まれていることを確認して、 Update access を押下します。

ビルドの設定画面で、編集をクリックして amplify.yaml を編集します。

参考までに、以下のように書き換えています。なおテストセクションは今回省いています。

amplify.yaml

version: 1.0
frontend:
  phases:
    preBuild:
      commands:
        - 'nvm use "${VERSION_NODE_16}"'
        - 'yarn install'
    build:
      commands:
        - 'yarn run build'
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - 'node_modules/**/*'

編集が終わったら、保存をクリックします。

その下の、ライブパッケージの更新でパッケージとバージョンを指定できます。

Node.jsのバージョンを 16.17.1 を利用する必要があったので、追加しています。