LoginSignup
0
0
@zumax

Amplify ＋ Nuxtを試してみた

Posted at

背景・目的

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

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

まとめ

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

特徴 説明
Amplify Zero-Config Providers AWS Amplify との統合は設定なしで可能
Amplify ビルド設定の構成 Amplifyホスティングを使用してアプリケーションをデプロイすると、pakcage.jsonファイルを検査する

検査時に、フロントエンドフレームワークと関連するビルド設定が自動的に検出される
Nitro すべてを備えたウェブサーバを構築し、必要なものをすべて揃えて好きな場所へデプロイできる

概要

Amplify

Zero-Config Providers

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

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

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

ビルド設定の構成

下記をドキュメントを基に整理します。

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ということで、すべてを備えたウェブサーバを構築し、必要なものをすべて揃えて好きな場所へデプロイするとのことです。下記を基に概要を整理します。

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

  • 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

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

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したリポジトリを基にしています。

デプロイ

下記を基に試してみます。

  1. AWSにサインインし、Amplifyに移動します

  2. 「新しいアプリを作成」をクリックします

  3. GitHubを選択し、「次へ」をクリックします
    image.png

  4. GitHubでリポジトリを選択し、新しく許可します
    image.png

  5. リポジトリとブランチを指定し、「次へ」をクリックします
    image.png

  6. 下記を入力し、「次へ」をクリックします

    • アプリケーション名
    • ユーザ名とパスワード（任意）
    • Enable SSR applogs（）
      image.png

  7. ちなみに、amplify.yamlでは、yarnのinstallと、run buildが実行されていますので、下記のように書き換えます

    • 修正前
      image.png
    • 修正後 
      version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'yarn install'
        build:
            commands:
                - 'yarn build'
                - 'yarn generate'
    artifacts:
        baseDirectory: dist
        files:
            - '**/*'

  8. 確認画面では、問題なければ「デプロイ」をクリックします（しばらく待ちます）

  9. デプロイ完了後に、「デプロイされたURLにアクセス」をクリックします

  10. 表示されました
    image.png

  11. 作成した、hello.vueにもアクセスします
    image.png

その他

失敗したポイント

  1. 下記でエラーになりました。.amplify-hostngが存在しない 
    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
  2. amplify.ymlでは下記のようになっており、ビルド済みのベースディレクトリがみあたらないのですね 
    version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'yarn install'
        build:
            commands:
                - 'yarn run build'
    artifacts:
        baseDirectory: .amplify-hosting
        files:
            - '**/*'
  3. 下記のように書き換えました。nuxtの静的ビルドは、generateの実行と、dist以下にファイルが作成されるので、distに変更してます 
    version: 1
frontend:
    phases:
        preBuild:
            commands:
                - 'yarn install'
        build:
            commands:
                - 'yarn build'
                - 'yarn generate'
    artifacts:
        baseDirectory: dist
        files:
            - '**/*'

考察

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

参考

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0