まず、ローカルから環境を作ります。
$ 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の構成
タスクとはコンテナがまとまって動く単位
サービスとは複数コンテナの集合体、タスクを並列に動かすことができる
サービスの構成
– フロントエンドサービス
– バックエンドサービス
うーむ、なんかやりたいことと違うような気がするな…