Vue/Nuxt

【aws】【Amplify】【Nuxt】リポジトリに複数のアプリがある場合にフロントエンドのフォルダだけ設定する方法!

あきぞらです。

awsAmplifyという機能を使って、

試験的にNuxt.jsアプリのデプロイをしてみようと思いました。

ただ、Nuxt.jsLaravelのフォルダがあるリポジトリに対して、

Nuxt.jsのフォルダの方だけ読み込ませるには

少し設定が必要だったので、

今回はその方法を紹介していこうと思います!

AWS マネジメントコンソールからAWS Ampliyを開く

まずは、AWSのマネジメントコンソールからAWS Amplifyを開きます。

右の方の、「モバイル」のカテゴリーにあります。

アプリの追加

AWS Amplifyのコンソール画面を開き、

「すべてのアプリ」から「New app」を押します。

今回は、Webアプリをデプロイしたいので、

「Host web app」を選びます。

連携させたいリポジトリのサービスを選びます。

今回はGitlabのリポジトリを連携させたかったので、Gitlabを選びます。

認証が成功するので、

画面下部の「リポジトリ」から、連携させたい自分のリポジトリを選択します。

その下に、「Connecting a monorepo? Pick a folder.」

という文言があります。

ここの入力欄に、リポジトリのNuxt.jsのアプリがあるフォルダを選択します。

ブランチは任意ですが、今回は「master」ブランチを選びます。

たとえば、リポジトリの構成が以下のようになっていた場合、

「フロントエンドのフォルダ名」を入力します。

リポジトリ
    - フロントエンドのフォルダ
        - 諸々ファイル
        - 諸々ファイル
        - ...

    - バックエンドのフォルダ
        - 諸々ファイル
        - 諸々ファイル
        - ...

これで、フロントエンドのディレクトリ配下に対して、

masterブランチに変更があった場合、

AWS Amplifyが検知してビルド&デプロイを行ってくれます!

めちゃくちゃ便利ですね。

似たようなサービスはNetlifyやFirebase もありますが、こちらで試したい人は是非。

-Vue/Nuxt

Copyright© あきぞらてっく , 2021 All Rights Reserved Powered by AFFINGER5.