Nuxtでブラウザから直接APIを叩くのはやめましょう

はじめに

Nuxt案件でAWS構築を任される際、いつも下記エラーが話題になるので、説明資料としてあらかじめQiitaにまとめておきます。

• バックエンドAPIに繋がらない
• 環境変数を取得できない

前提

ECSでフロントエンドとバックエンドのそれぞれのサービスをデプロイします。
両方のサービスはプライベートサブネットに配置してあります。

NuxtからバックエンドAPIに繋がらない

Nuxtからaxiosを使ってAPIを呼ぶときは、ブラウザから直接APIを叩くことはできません。
Nuxtサーバーを経由してバックエンドのAPIを呼ぶ必要があります。
そのため、proxyの設定をしましょう。
下記process.env.BASE_URLがバックエンドAPIのエンドポイントです。

nuxt.config.js

export default {
    ...
    // Axios module configuration: https://go.nuxtjs.dev/config-axios
    axios: {
        proxy: true,
    },

    proxy: {
        '/api/': {
            target: process.env.BASE_URL,
        },
    },
    ... 
}

環境変数が取得できない

ECSで設定できる環境変数は、Nuxtサーバーが動いている環境（例えばEC2やFargate）における環境変数です。
つまり、クライアント（ブラウザ）における環境変数ではありません。
そのため、上記proxy設定がされていないと、ECS設定した環境変数をNuxtが読み込むことはできません。

最後に

クライアントから直接APIを叩くのはやめましょうと言いましたが、API経由で画像などダウンロードするとNATの通信料がかかってしまうので、S3などはクライアントから直接アクセスしてもらった方がいいです。