Amplify ＋ Nuxtを試してみた

# 背景・目的
以前、NuxtやVue.js、Amplifyを試してみました。（詳細は、下記の記事を参照。）

https://qiita.com/zumax/items/99ddd03a404e3449a5cb

https://qiita.com/zumax/items/adec81146481c95001c4


今回は、Nuxtにより作成したアプリケーションを、Amplifyのホスティングサービスで動かしてみます


# まとめ
下記に特徴をまとめます。

|特徴|説明|
|:--|:--|
|Amplify Zero-Config Providers|AWS Amplify との統合は設定なしで可能|
|Amplify ビルド設定の構成 |Amplifyホスティングを使用してアプリケーションをデプロイすると、pakcage.jsonファイルを検査する<BR><BR>検査時に、フロントエンドフレームワークと関連するビルド設定が自動的に検出される|
|Nitro|すべてを備えたウェブサーバを構築し、必要なものをすべて揃えて好きな場所へデプロイできる|

# 概要
## Amplify
### Zero-Config Providers

下記の記事を基に整理します。

https://nuxt.com/deploy/aws-amplify

> Integration with AWS Amplify is possible with zero configuration, learn more.

- AWS Amplify との統合は設定なしで可能

### ビルド設定の構成
下記をドキュメントを基に整理します。

https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/build-settings.html

> Amplify ホスティングを使用してアプリをデプロイすると、リポジトリ内の package.json ファイルを検査することで、フロントエンドフレームワークと関連するビルド設定が自動的に検出されます。アプリのビルド設定を保存するには、次のオプションがあります。

> - Amplify コンソールでビルド設定を保存する - Amplify コンソールを使用してビルド設定を自動検出および保存することで、Amplify コンソールからアクセスできるようになります。リポジトリに amplify.yml ファイルが保存されている場合を除き、Amplify はこれらの設定をすべてのブランチに適用します。
> - ビルド設定をリポジトリに保存する - amplify.yml ファイルをダウンロードして、リポジトリのルートに追加します。

> Amplify コンソールでアプリのビルド設定を編集するには、「ホスティング」を選択し、ナビゲーションペインでビルド設定を選択します。ビルド設定は、アプリ内のすべてのブランチに適用されます。ただし、リポジトリに amplify.yml ファイルが保存されたブランチを除きます。


- Amplifyホスティングを使用してアプリケーションをデプロイすると、pakcage.jsonファイルを検査する
- 検査時に、フロントエンドフレームワークと関連するビルド設定が自動的に検出される
- アプリのビルド設定は、下記のオプションがある
    - Amplifyコンソールでビルド設定を保存する
        - コンソールを使用してビルド設定を自動検出、保存することで、コンソールからアクセス可能
    - ビルド設定をリポジトリに設定する
        - amplify.ymlファイルをダウンロードし、リポジトリのルートに追加

## Nitro
Next Generation Server Toolkitということで、すべてを備えたウェブサーバを構築し、必要なものをすべて揃えて好きな場所へデプロイするとのことです。下記を基に概要を整理します。


https://nitro.unjs.io/

下記に特徴を記載します。

- Rapid Development
    - 設定ゼロのホットモジュール
- Deploy Anywhere
    - 追加の設定なしで、同一コードを任意のデプロイメントプロバイダーにデプロイできる
- Portable and Compact
    - 出力サイズは1MB未満
- Filesystem Routing
    - サーバとAPIルーターを自動で登録する
- Minimal Design
    - 最小限のオーバヘッドであらゆるソリューションに適合する最小限の設計
- Code-Splitting
    - 早いサーバ起動時間と応答のために、非同期チャンクローディング
- TypeScript
    - TypeScriptのサポートに加えて、便利な機能も備わっている
- Storage Layer
    - マルチドライバーとPFに依存しない、ストレージシステム
- Cache API
    - キャッシュAPIがビルドインされている
- Hackable
    - プラグインフックを使用してカスタマイズできる
- Auto Imports
    - 自動的にインポートする
- Backward Compatible
    - レガシーnpmパッケ時、CommonJS、Node.jsモジュールを使用できる

### Zero-Config Provider

次に下記の記事も参考にします。

https://nitro.unjs.io/deploy#zero-config-providers

> When deploying to production using CI/CD, Nitro tries to automatically detect the provider environment and set the right one without any additional configuration required. Currently, the providers below can be auto-detected with zero config.

- CI/CDでプロダクションデプロイ時に、Nitroは、自動でプロバイダー環境の検知と、追加で構成を必要とせずに適切な構成をセットする
- 2024/8時点では、下記の環境をZeero-Configで自動検出する
    - AWS Amplify
    - Azure
    - CloudFlare
    - Netlify
    - Stormkit
    - Vercel
    - Zeabur

# 実践
## 前提
以前、下記でPushしたリポジトリを基にしています。

https://qiita.com/zumax/items/99ddd03a404e3449a5cb

## デプロイ
下記を基に試してみます。

https://nuxt.com/deploy/aws-amplify


1. AWSにサインインし、Amplifyに移動します
1. 「新しいアプリを作成」をクリックします
1. GitHubを選択し、「次へ」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/d61a9fb5-87c3-c495-f107-cfef30d83535.png)
1. GitHubでリポジトリを選択し、新しく許可します
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/a399bffc-8839-05b3-4561-ce15c3b9ea30.png)

1. リポジトリとブランチを指定し、「次へ」をクリックします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/b8569f04-aa2d-fb71-0252-3190b5f8d93b.png)


1. 下記を入力し、「次へ」をクリックします
    - アプリケーション名
    - ユーザ名とパスワード（任意）
    - Enable SSR applogs（）
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/fbebf2a2-55f3-2b0d-947e-8ace27431a0b.png)

1. ちなみに、amplify.yamlでは、yarnのinstallと、run buildが実行されていますので、下記のように書き換えます
    - 修正前
        ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/fd07a5a5-e054-88ec-58d5-a0c173a37375.png)
    - 修正後
        ```yaml
        version: 1
        frontend:
            phases:
                preBuild:
                    commands:
                        - 'yarn install'
                build:
                    commands:
                        - 'yarn build'
                        - 'yarn generate'
            artifacts:
                baseDirectory: dist
                files:
                    - '**/*'
        ```
1. 確認画面では、問題なければ「デプロイ」をクリックします（しばらく待ちます）
1. デプロイ完了後に、「デプロイされたURLにアクセス」をクリックします
1. 表示されました
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/368b7dd0-03fd-72aa-3f45-d2728e1f4b5b.png)
1. 作成した、hello.vueにもアクセスします
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206276/c83e35f9-960d-74b4-0c62-86a4534cefb8.png)




### その他
#### 失敗したポイント
1. 下記でエラーになりました。`.amplify-hostng`が存在しない
    ```bash
    2024-08-11T04:45:57.995Z [INFO]: ## Build completed successfully
    
    37
    
    2024-08-11T04:45:58.003Z [ERROR]: !!! CustomerError: Artifact directory doesn't exist: .amplify-hosting
    
    ```
1. `amplify.yml`では下記のようになっており、ビルド済みのベースディレクトリがみあたらないのですね
    ```yaml
    version: 1
    frontend:
        phases:
            preBuild:
                commands:
                    - 'yarn install'
            build:
                commands:
                    - 'yarn run build'
        artifacts:
            baseDirectory: .amplify-hosting
            files:
                - '**/*'
    ```
1. 下記のように書き換えました。nuxtの静的ビルドは、generateの実行と、dist以下にファイルが作成されるので、distに変更してます
    ```yaml
    version: 1
    frontend:
        phases:
            preBuild:
                commands:
                    - 'yarn install'
            build:
                commands:
                    - 'yarn build'
                    - 'yarn generate'
        artifacts:
            baseDirectory: dist
            files:
                - '**/*'
    
    ```

# 考察
今回、GitHubにあげたNuxtフレームワークアプリケーションを、Amplifyのホスティングサービスにロードしました。
次回以降は、OAuth0と連携を試してみたいと思います。

# 参考
https://qiita.com/zumax/items/99ddd03a404e3449a5cb

https://nuxt.com/deploy/aws-amplify

https://nitro.unjs.io/deploy#zero-config-providers

https://www.youtube.com/watch?v=CAk5_XGkOG4

https://nitro.unjs.io/deploy/providers/aws-amplify