AmplifyでカスタムドメインSPAの開発環境、CI/CD環境を手軽に構築する

10119 ワード
nuxt.js AWS CICD amplify Vue.js AWS テキストリンク

はじめに

AWSのAmplifyを使って、SPA(今回はNuxt.js)の開発環境、CI/CD環境(+slack通知)を構築してみようと思い、構築までにやったことをまとめました。
Amplifyを使ったことない人、気になっている人などの参考になれば幸いです。

この記事でわかること

  • Nuxt.jsのセットアップ方法
  • Amplifyのプロジェクト作成方法
  • Amplifyでhostingをする方法
  • CI/CDの設定方法
  • デプロイの開始/完了をslack通知/メール通知する方法

環境

% npm --version
7.11.1

% amplify --version
Scanning for plugins...
Plugin scan successful
5.0.1

1. Nuxt.jsのプロジェクト作成

公式：https://ja.nuxtjs.org/docs/2.x/get-started/installation/
create-nuxt-appを使いました。yarnでもnpxでもnpmでも良いと思いますが、yarnで実行しています。

yarn create nuxt-app <project-name>

色々聞かれますが、このあたりは設定したいものを選んでください。
今回は、SPAを作りたいので、Rendering mode: Single Page App を選びます。

% yarn create nuxt-app test-nuxt
yarn create v1.22.10
warning ../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "[email protected]" with binaries:
      - create-nuxt-app
[#######################################################################################################] 540/540
create-nuxt-app v3.6.0
✨  Generating Nuxt.js project in test-nuxt
? Project name: test-nuxt
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: None
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

2. Git リポジトリにPUSH

Git(GithubとかCodecommit等)に新規レポジトリを作成し、1.で作成されたディレクトリの中身をpushします。(手順については割愛します)
1.より先にリポジトリを作成しておいて、空のリポジトリでyarn create nuxt-appを実行してもいいです。

3. Amplifyの初期化

Nuxtプロジェクトのトップディレクトリで、以下のコマンドを実行します。

% amplify init

ここでも色々聞かれるので、質問に答えます。

 % amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project amplifynuxtproject
The following configuration will be applied:

Project information
| Name: amplifynuxtproject
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: none
| Source Directory Path: src
| Distribution Directory Path: dist
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using vue
? Source Directory Path:  .
? Distribution Directory Path: dist
? Build Command:  yarn generate
? Start Command: yarn start
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

Nuxt.jsのSPAの場合、大事なのは、下の質問です。あとは、何でも良い気はしますが、後述のslack通知の設定をする際に、Environment名が少し大事になってきます。

? Source Directory Path: .
? Distribution Directory Path: dist
? Build Command: yarn generate
? Start Command: yarn start

4. Amplifyでhostingの設定をする

以下のコマンドを実行していきます。

 % amplify add hosting
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)


? Choose a type Continuous deployment (Git-based deployments)
? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬──────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                       │
├──────────────┼──────────────────────────────────────────────┤
│ master       │ https://master.d239mln9psta4e.amplifyapp.com │
└──────────────┴──────────────────────────────────────────────┘

ここで、大事なのは、

Choose a type Continuous deployment を選択して、CI/CDの設定をすることです。
後から追加する方法もあると思いますが、いいやり方が見つかりませんでした。

Choose a type Continuous deployment を選択するとAmplifyConsoleが自動で開きます。

最初の画面では、自分の使用しているGitサービスを選択します。

次の画面では、リポジトリの選択とブランチの選択をします。

次の画面では、App name(既に入っている)とEnvironment(プルダウンで選択)、roleを設定します。ここでroleを適切に設定しないとデプロイがうまく行きません。
(自分はそこでハマりました。)

ハマった際に、助けになったサイトはこちらです。
https://docs.aws.amazon.com/amplify/latest/userguide/how-to-service-role-amplify-console.html

上の画面を下にスクロールすると、ビルドの設定ができる項目があります。

変更したい場合は、Editを押せば良いのかと思いましたが、編集できませんでした。(バグだと思います)
変更したい場合は、Downloadボタンを押すと、amplify.ymlをダウンロードすることができ、それをリポジトリのトップに配置すると設定を変更することができます。
→変更しないとビルドは通るけど、画面は表示されないので変更が必要です

amplify.ymlの内容を以下のようにします。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist/
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

確認してデプロイを選択すると、ビルドが始まります。

以上で、ホスティングとCI/CDの設定が完了します。

完了したら、以下のコマンドを実行します。

% amplify push
✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name  | Operation | Provider plugin |
| -------- | -------------- | --------- | --------------- |
| Hosting  | amplifyhosting | No Change |                 |

5. カスタムドメインを設定(Route53にホスティングゾーンが存在することを前提)

AmplifyConsoleのドメイン管理からカスタムドメインを設定します。

詳細の手順は、以下のページに書かれているので割愛します。
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/to-add-a-custom-domain-managed-by-amazon-route-53.html

6. デプロイの開始、完了をslackに通知する

2通りのやり方を紹介します。

6-1: メール通知機能を使う方法

Amplifyでは、メール通知をAmplifyConsoleから設定することができます。
ここのEmailにslackのメールアドレスを設定します。

slackのメールアドレスは、slackの管理画面から取得できます。

6-2: プラグインを使う方法

こちらのプラグインを使う方法もあります。
https://github.com/fossamagna/amplify-category-console-notification

詳細は、READMEに書いてあるので割愛しますが、以下のコマンドを実行していきます。

% npm install -g amplify-category-console-notification
% amplify plugin scan
% amplify console-notification add

一点、注意しなければいけないポイントは、
amplifyのEnvironmentとブランチ名が一致している必要があります

最後に

Amplifyには、Japan User Groupやslackがありますので、ご紹介いたします。