まず、ローカルから環境を作ります。
$ tree
.
├── backend
│ └── index.js
├── docker
│ ├── express
│ │ └── Dockerfile
│ └── nuxt
│ └── Dockerfile
├── docker-compose.yml
└── frontend
5 directories, 4 files
backend/index.js
import express from 'express'; const app = express(); app.get('/', (req, res) => res.send('hello-world'));
frontend/pages/index.vue
<template> <div class="container"> {{name}} </div> </template> <script> export default { data() { return { name: null } }, async asyncData({$axios}) { const res = await $axios.$get('hello'); return {name:res} } } </script>
docker/express/Dockerfile
FROM node:14.4.0-alpine3.12 WORKDIR /app COPY ./backend/package*.json ./ RUN npm ci EXPOSE 8888 CMD ["npm", "run", "dev"]
docker/nuxt/Dockerfile
FROM node:14.4.0-alpine3.12 WORKDIR /app ENV NUXT_HOST 0.0.0.0 COPY ./frontend/package*.json ./ RUN npm ci EXPOSE 3000 CMD ["npm", "run", "dev"]
docker-compose.yml
version: "3" services: front: tty: true build: context: . dockerfile: ./docker/nuxt/Dockerfile volumes: - ./frontend:/app - /app/node_modules ports: - 3000:3000 backend: tty: true build: context: . dockefile: ./docker/express/Dockerfile volumes: - ./backend:/app - /app/node_modules ports: - 8888:8888
### ECSの構成
タスクとはコンテナがまとまって動く単位
サービスとは複数コンテナの集合体、タスクを並列に動かすことができる
サービスの構成
– フロントエンドサービス
– バックエンドサービス
うーむ、なんかやりたいことと違うような気がするな…