Nuxt.js on Flask on Dockerの環境をサクッと作ってみる

from flask import Flask, render_template,jsonify
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"/*": {"origins": "http://127.0.0.1:3000"}})

@app.route('/api')
def api():
  message = {}
  data = {}

  message['message'] = 'Hello World from Flask!'
  data['status'] = 200
  data['data'] = message

  return jsonify(data)

if __name__ == '__main__':                        
    app.run(host="0.0.0.0", port=80, debug=True)

[uwsgi]
module = app.main
callable = app

FROM tiangolo/uwsgi-nginx-flask:python3.6

COPY ./app /app

RUN apt-get update -y 
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash -
RUN apt-get install -y nodejs

RUN npm update -g npm

RUN npm install -g vue-cli
RUN npm install -g nuxt

RUN npm install -g create-nuxt-app

RUN pip install -U flask-cors

ENV HOST 0.0.0.0

version: '3'
services: 
  web: 
    build: .
    ports:
      - 80:80
      - 3000:3000
    volumes:
      - './:/app'
    environment:
      - NGINX_HTTP_PORT_NUMBER=80

# on mac
docker-compose build
docker-compose up -d
docker-compose exec web bash

# in container
create-nuxt-app ./
# 色々選択肢が出てきますが、とりあえずNuxtアプリを作りたい場合は全てEnterを押す。
npm run dev

<template>
  <div>
    <h1>{{ data.message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData () {
    let data = await axios.get('/api')
    console.log(data)
    return data.data
  }
}
</script>

// 追加
  env: {
    HOST_URL: process.env.HOST_URL || 'http://localhost:5000'
  },