Amplify ConsoleでPull Requestでのプレビューを試してみた

こんにちは。
AWSのアップデートをみてたらPull Request単位でのプレビューができると書いてありました。
便利そうだったので試してみたら便利だったので共有したいと思います。

Amplify Projectの作成

この機能を試す前にまずAmplify Projectをさくさく作っていきます。
フレームワークにNuxt.jsを使用してバックエンドなしのシンプルな構成で作ります。

Nuxt.jsプロジェクトの準備

まずはNuxt.jsプロジェクトを作成していきます。

$ npx create-nuxt-app sdx-amplidy-console-101

  create-nuxt-app v2.11.1
  ✨  Generating Nuxt.js project in sdx-amplidy-console-101
  ? Project name sdx-amplidy-console-101
  ? Project description My laudable Nuxt.js project
  ? Author name 37108
  ? Choose the package manager Npm
  ? Choose UI framework None
  ? Choose custom server framework None (Recommended)
  ? Choose Nuxt.js modules Axios, Progressive Web App (PWA) Support
  ? Choose linting tools ESLint, Prettier
  ? Choose test framework Jest
  ? Choose rendering mode Single Page App
  ? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)

プロジェクトが出来上がったらcommitしてGitHubにpushします。
GitHubのリモートリポジトリはよしなにつくっておいてください。

$ git add .
$ git commit -m 'initial commit made by Nuxt.js'

$ git remote add origin https://github.com/xxx/xxx.git
$ git push -u origin master

ひとまずコード側の初期設定は完了です。Amplifyの初期設定をしていきます。

Amplifyの初期設定

今回はマネジメントコンソールからプロジェクトの設定をしていきます。

最初にAmplify Consoleのconnect appをまずは押します。

次に先ほど作成したGitHubリポジトリをソースとするために設定をしていきます。
まずはGit ProviderにGitHubを指定します。
このとき認可が求められた場合は必要に応じて許可しましょう。

次に準備したリポジトリとデプロイするブランチを登録します。
今回はシンプルにmasterを対象とします。

Amplifyがリポジトリをみていい感じにamplify.ymlを出力してくれるので、それを編集してコードに追加します。

コードを追加してリモートリポジトリに変更を反映させる必要があるので一旦マネジメントコンソールから離れます。
今回はbaseDirectoryの部分だけ変更する必要があるのでここをdist/に変更します。
Nuxt.jsの設定を変更している場合などはここを調整する必要があります。

amplify.yml

version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

このコードを書いて反映させます。

$ git add amplify.yml
$ git commit -m "feat: add amplify.yml"
$ git push -u origin master

これが終わったらマネジメントコンソールに戻り設定を進めていきましょう。
次に設定の確認が求められるので確認して、デプロイをするとURLが発行されます。
そのURLに移動するとこのような画面が表示されます。

Previews機能の設定

Amplifyの初期設定が一通り終わったところでPreviews機能を有効化していきます。
Previewsタブから移動して、Previewsを有効にします。

その時にGitHub Appsのインストールが求められるのでインストールしましょう。　　

この画面が出たらInstall GitHub appでインストールをします。

これでPreviews機能が有効になりました。
有効になるとインストールしたリポジトリが表示されます。

最後にManageを押してPull Request Previewsを有効にします。

あとはGitHubでPull Requestを作るだけです。

Pull Requestの作成

適当にブランチを作って変更を加えます。

$ git switch -c feat/change-title

今回はトップに表示される文字を変更したいと思います。
pages/index.vueの9行目を変更しますが長くなるのでscriptとstyleは省略しています。デフォルトのままです。

pages/index.vue

<template>
  <div class="container">
    <div>
      <logo />
      <h1 class="title">
        sdx-amplidy-console-101
      </h1>
      <h2 class="subtitle">
        My awesome Amplify Console Project
      </h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green">
          Documentation
        </a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
        >
          GitHub
        </a>
      </div>
    </div>
  </div>
</template>

あとはこの変更をcommitしてリモートにpushします。

$ git add pages/index.vue
$ git commit -m 'feat: change title'
$ git push -u origin feat/change-title

次にPull Requestを作成します。作成するとPull Request上にAmplifyアプリが動いていることも確認できます。

マネジメントコンソールに戻ってみます。

こちらにはPull Requestのために作成した環境のURLなどが記載されていることが確認できますね。 URLにアクセスするとこのような画面が表示され変更の確認ができます。

またこの環境はPull Requestをmergeしたタイミングで削除されます。

さいごに

サーバレス環境をテストしたり確認したりが簡単にできる機能なので非常に便利だというのが感想です。
またPull Request単位なのでGitHub Flowなどとも非常に相性が良さそうに感じます。

参考

• AWS Amplify Console announces Pull-Request Previews for Fullstack Serverless Applications
• Improve Your App Testing With Amplify Console’s Pull Request Previews and Cypress Testing