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

試した環境
Docker for Mac

ディレクトリ構成

Nuxt-Flask-app/
├── app/
│　　└── main.py
├──　　uwsgi.ini
├── Dockerfile
└── docker-compose.yml

main.py

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.ini

[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

docker-compose.yml

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

http://localhost:3000
にアクセスしてデフォルト画面が出れば、いったんは構築完了。

Nuxt.jsの編集

pages/index.vue

<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>

nuxt.config.js

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

http://localhost:3000
にアクセスしてデフォルト画面が出れば以下の画面が出れば構築完了。

参考