あきぞらです。
awsのAmplifyという機能を使って、
試験的にNuxt.jsアプリのデプロイをしてみようと思いました。
ただ、Nuxt.jsとLaravelのフォルダがあるリポジトリに対して、
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 もありますが、こちらで試したい人は是非。