Chapter 13

フロントエンドの微修正

hibriiiiidge
hibriiiiidge
2020.10.22に更新

それでは次に、バックエンドのデプロイを進めていきます。

その前に、フロントエンドの Nuxt.js のコードを少し修正します。
nuxt.config.js に以下の axios の設定を追加し、 index.vue のコードも修正してください。本番環境と開発環境でエンドポイントが異なるためです。
今回はバックエンドのドメインを backend.hibriiiiidge.com とします。

export default {
  ...
+  axios: {
+    baseURL: process.env.NODE_ENV === "production" ? "https://backend.hibriiiiidge.com" : "http://localhost:5000"

  }
  ...
}

index.vue のコードも修正します。

<script>
export default {
  methods: {
    async getSomething() {
-      const response = await this.$axios.$get('http://localhost:5000/api/v1/tasks')
+      const response = await this.$axios.$get('/api/v1/tasks')
      this.tasks = JSON.parse(response.tasks)
    }
  },
}
</script>

dotenv-module というライブラリがあるので、そちらを利用して環境毎の変数を定義しても良いかもしれません。(というか、そっちの方がベターだと思います。今回は簡易版なのでこのまま進めます...)

package.json も以下の様に修正します。

   "scripts": {
     "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
+    "build": "NODE_ENV=production nuxt build",
+    "start": "NODE_ENV=production nuxt start",
     "generate": "nuxt generate",
     "test": "jest"
   },

上記の微修正が完了したら、再度 image を build して、ECR に push して、 ECS のタスク定義、サービスの起動を行ってください。