Programmers Office

もう一度、Nuxt の勉強をしようということで、上記チュートリアルを一式やって見ました。単なるメモです。 1 Nuxt JS beginner tutorial – In Depth Intro to Nuxt.js | SPA, SSR, Static Site, Vue.js Family What is Nuxtjs? Why Nuxt.js is so good? What Nuxt.js can do? What Nuxt.js Includes How single page application works? How static site generation in nuxt works? How universal application is created in nuxtjs? 2 Nuxt JS beginner tutorial – Getting Started with NuxtJs | How to setup Nuxt Project 始める前に、Docker環境を作る

前回からの続きぬるさく画面に再チャレンジ 固定値による画面表示はできたので、実際にapiからデータを取得しようとしました。しましたが、ハードル上げすぎて失敗したので、一旦ハードルを下げようと思いますが、まず失敗の記録をしておきます。 ページ、および、それに伴うストア等の分割 やろうとしていることは、 Pagesの中に、boookフォルダと、todoフォルダを作って、それぞれのアプリを作った状態で、さらに、wineフォルダを作って、その中でぬるさく本のアプリを作ろうということです。 pages |–Lauter | |–index.vue |–README.md |–book | |–books | | |–_id.vue | |–index.vue |–index.vue |–login.vue |–todo | |–index.vue |–wine | |–index.vue | |–result.vue store |–README.md |–book.ts |–counter.ts |–index.ts |–modules | |–todoTypes.ts | |–todos.ts | |–userTypes.ts | |–users.ts |–root.ts |–todo.ts |–wine.ts ただ、すでに作成しているtodoは一部きれいに分けきれずに、indexの中にtodo固有のものが残ってしまっています。 また、wineについても、本の説明は、indexとして作っているサンプルがベースなので、まあ色々ハマりました。 本の該当箇所は、「4.7 API に投げるために Vuex を実装しよう」のあたりです。やりたいのは、「v-for=”i in 11″」を「-for=”wineAttr in wineAttributes”」にする、ということです。 apiについては、「http://0.0.0.0:5432/api/wine_attributes」が動いているのが前提です。 最初はこの辺のエラー対応です。 commons.app.js:21599 [vuex] unknown getter: GET_WINE_ATTR const gettersはexport const gettersにしないといけないのではないでしょうか。actionsも。自信はないですが、これにより呼ばれるようにはなりました。 また、本では触れられていませんが、githubのソースでは、index.d.ts で@nuxtjs/axios の記述があります。しかしそれをやると、

以前Nuxt.js と Python でつくるぬるさく AI アプリ開発入門 途中で分からなくなってしまい中断していましたが、改めてやってみようと思います。 まずは、Vuetifyのスライダーでの入力画面と、amChartsのグラフ表示。 router-linkによるメニュー追加 現在、v-navigation-drawer > v-list > router-linkという階層で、メニューを作っており、、、が並んでいる状態で、ここに、を追加したいと思います。 そして、こんなものは、単にコピペーして、文字変えれば良いのではと思ったのですが、なかなか反応してくれません。 結構調べましたが、解消せず。最後の最後に、再起動（docker-compose down、 docker-compose up -d）を行ったら見事（？）反映されました。 Vuetify Slider コンポーネント 前回はスッキリ行きませんでしたが、今回はこれはあっさりできました。 components/FormCard.vue <template <v-card class=“ma-2 pa-1” <div class=“subheading” Heading </div <div class=“caption” 1/11 </div <v-slider class=“px-5 pt-5 pb-3” thumb-label=“always” height=“3” hide-details</v-slider </v-card </template <script lang=“ts” import Vue from ‘vue’ export default Vue.extend({ }) </script pages/wine/index.vue <template <v-layout column <form-card v-for=“i in 11” :key="'${i}'"</form-card <v-btn @click=“submit"診断結果を表示する</v-btn </v-layout </template <script lang=”

今回もこちらの続き。Vuetify の基本 今回も参考はこちら。 Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial – Part 5/5 – ユーザ認証の追加] https://note.mu/tkugimot/n/n80c2e4b33bbc で、ちょっと時間が空いてしまい、始める前に気づいたら、エラーが出ている。 This dependency was not found: nuxt_plugin_bootstrapvue_69bcb01f in ./.nuxt/index.js To install it, you can run: npm install –save nuxt_plugin_bootstrapvue_69bcb01f 書いてある通りnpm installしてもNot Foundと言われるだけ。 しかし、 docker-compose down docker-compose up -d で復旧。なんのこっちゃ。 Firebase Authentication機能の利用 手順としては、まず、package.jsonにfirebaseの記述を追加して、npm updateを実行するところから始まるのですが、ここで早速大量エラー。 概ねこんな感じ。 Can’t find Python executable “python”, you can set the PYTHON env variable. Failed at the grpc@1.20.0 install script. This is probably not a problem with npm.

こちらの続き。Vuetify の基本 デザインについて、今参考にしているのはVuetify公式サイトのレイアウトサンプル。 https://vuetifyjs.com/ja/framework/pre-made-layouts これとかすごいと思いますが、初心者はまだ手を出さないことにします。 Vue Material Admin https://vuejsprojects.com/vue-material-admin Firebase Hostingにデプロイ 引き続き、こちらを参考に。 Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ [Tutorial – Part 4/5 – Firebase Hostingにデプロイ] https://note.mu/tkugimot/n/n44c327a22c24 最終的にはGCPにリリースする予定ですが、Firebaseも勉強してみたいので、流れに沿ってやってみます。 npm install -g firebase-tools でfirebase-toolsのインストール、 firebase login でログインして、プロジェクト作成して、というところは書いているまま。 この次の firebase init をどこで実行すべきか？ 今現在nuxtアプリを作っている、すなわち、componentsとかlayoutsとかが存在するフォルダで実行します。 最初 ? What do you want to use as your public directory? に対して、初期値のpublicで進めてしまいましたが、distを指定すべき。 ? Configure as a single-page app (rewrite all urls to /index.html)? はNoでよいかと。 ところが、 npm run build で大量エラー。

Nuxt.jsでTodoList機能を作りながら、Vuetifyの基本を学習。 こちらを参考に、進めています。 https://note.mu/tkugimot/n/n47218fd1eec5 なんとか自力で問題解決できたので、既存のアプリに機能追加する形で動かすことができました。 上記サイトでは、次に、デザインを整えることになります。で、そこではbulmaを使っているのですが、できればあれこれ手を広げたくないので、Vuetifyで作ってみることにします。 全体デザインについて、上記サイトでは、「ヒーロー」というパターンを使っています。「ヒーロー」なんていうデザインのパターンがあるのですね。 簡単にVuetifyでもそんな指定ができたら良いかと思いましたが、そういう名前のものがあるわけではなさそう、かつ、メニュー構造は必要なので、Vuetify公式サイトのレイアウトサンプルから選択することにし、一番基本的な「Baseline」を使ってみることにします。 https://vuetifyjs.com/ja/framework/pre-made-layouts 最初は、部分的に移植しようと思いましたが、それだとレイアウト崩れが発生してしまうため、逆に、いったん、layouts/default.vueを書き換えてしまってから、必要な部分を戻す、という形にしました。 また、Todoの一覧表示のところに関しても、bulmaを使用していると思われるため、そのままではなく、各詳細情報は、v-cardを使用するようにしました。これも、サンプルメージを参考にしてなんとかなったような、なってないようなです。（幅指定がよくわからない・・・） また、テキスト入力欄も、v-text-fieldを使用して、プレースホルダよりラベル表示の方が面白いと思い、それで作りました。 なお、入力位に自動でイベントを発生させる際に、このやり方だと日本語変換確定のEnterでも反応してしまって本当は良くありません。 下記のサイトに記載の通りですが、今はここは対応保留としておきます。 [Vue.js] 日本語変換の確定でkeyup.enterが発火してしまうのを防ぐhttps://qiita.com/h-orito/items/6d99e2256074132d7867 カードの並べ方等、もう少し綺麗にできたら良いのでしょうが、一旦これで、次に進みます。

Nuxt.js開発を進めるためには、もう少し学習が必要ということで、入門サイトを見てみたりしていますが、なかなか思う方向には進んでくれません。その苦労の足跡を残します。（ごちゃごちゃになりすぎて記憶も飛び気味ですが） やりたいことのゴールはこちらタイタニックアプリを作ろう（Nuxt.js 開発環境の基本） 入門用サイト 本当はまずやりたいのはヌルサクです。Nuxt.js と Python でつくるぬるさく AI アプリ開発入門 ただ、結構端折られているところも多く、また、微妙に最新環境でないところがあって、初心者にはエラー対処が難しかったりするため、もう少し入門的なところから始めたいと思いました。そして、それはそれで色々参考になるサイトがあるのですが、これもなかなかそのままは動いてくれなかったりして、苦労しました。 Nuxt × TypeScript でTodoListとユーザ認証を実装してFirebase Hostingにデプロイ https://note.mu/tkugimot/n/nfe81dbbe8bad こちらのサイトは、入門者の立場から、gitの使い方的なところにも配慮しながら進めてくれるので、非常に勉強になります。 それでもたまにそのままでは動かないところがあったりして、例えば、 3.Todoの module と Component を準備する の時点でのpages/index.vueは <template <Todos / </template ではなくて <template <TodoList / </template ですよね、みたいなのがあったりします。 また、結構 implicitly has an ‘any’ type. で怒られることが多く、「: any」をつけて対処したりしてたのですが、それで良いのか、理解できていません。 さらに、 module namespace not found in mapGetters(): todos/ みたいなエラーが出て、これは解消できずにとりあえず進めたりしました。 その後も色々なエラーを解消できず、もう一度最初からやり直してみても最後には上記エラーに引っかかってしまう状態から抜けられず、途中で一旦中止しました。 （追記） この問題は解消しました。 store/modules/todos.ts という構造になっているので、 // export const name = ‘todos’; export const name = ‘modules/todos’; とすることにより、エラー解消しました。

Docker内に構築したNuxt.jsのサイトを公開する、条件として、公開サイトもDockerで構築し、かつ、ソースはボリューム機能でDocker外と共有とする。無料で。 なかなかハードルが高かったですが、できました！ Docker環境をどこに公開するか 無料公開と考えた場合に、1年の期間制限のAWSは対象から外します。そして、本サイト自体がGCEで立っているので、一旦それも除外。そこで検討したのが、Azureです。 Azure App Service Azureでは、素のApp Serviceは無料プランがあります。 App Service の価格 https://azure.microsoft.com/ja-jp/pricing/details/app-service/windows/ この素のサービスはPaaSなので、Dockerをインストールして環境構築するということはできません。これと連携してコンテナを読み込む、Web App for Containersというサービスがありますが、これは無料プランでは利用できません。さらに、通常であれば利用を検討すべきContainer InstancesとかAKS（Azure Kubernetes Service）というものもありますが、これらも有料プランのみです。 色々苦労した挙句、無料でDockerコンテナを立ち上げるのは無理ということで、あきらめました。 Heroku Herokuでもコンテナを読み込んでリリースする機能が提供されています。 https://devcenter.heroku.com/articles/container-registry-and-runtime これは無料で使えるプランもあるのですが、Volumeはサポートされていません。 なぜVolumeを使いたいかというと、ローカルの開発環境もDockerで構築したい、それと同一の環境をリリース環境に持っていきたい、ただ開発ツールはクライアントに持つことになるのでソースはローカルに持ちたい、そのソースをコミットすることでリリース環境にも反映したい、という理由です。 そういう意味で、最近話題の、VSCodeのRemote Development機能 https://crieit.net/posts/VSCode-Remote-Development 開発ツールをローカルに持ちつつソースはローカルに持つ必要がないという意味ですごいと思うのですが、複数人開発と考えた時にはどうなんだろうとも思ったりします。 さくらArukas https://arukas.io/ 今回試しませんでしたが、これもHerokuと同様、Volumeはサポートされません。ただ、無料プランが提供されているのは発見でした。 GCE（Google Compute Engine） 結局VMをそのまま使わせてもらえる環境でなければ今回の条件には合わない、と理解し、そうなると使えるのはGCEしかないのでは、という結論になりました。すでにDocker立てているわけですが、そこはDocker。複数立てることもできるわけです。ということで、もう一つDocker環境を立てることにしました。 公開用Docker構築 前回タイタニックアプリを作ろう（Nuxt.js 開発環境の基本） ここではなるべくシンプルなDockerファイルを目指して設定をしましたが、これはDockerをUpした後にサービスを起動しなければならないということです。 そうではなく、Upと共にNuxtサービスも立ち上げるということで試行錯誤しました。 まず、最初はDocker Build、あるいはUpでのエラー。 ERROR: Service ‘app’ failed to build: containerd-shim not installed on system DokerファイルをいじるとBuildだけはできたりして、大いに悩みましたが、最終的には、VMリスタートで解消。時間を返せ・・・ 再起動したらしたで、既存のDocker＝本サイトが立ち上がらないという問題発生！原因は、先にApaheが起動していてポート80を取られていたため。サービスを落として再度実行により問題解消。かなりの時間を費やして、やっと本題。 最終的には下記のサイトを大いに参考にさせていただきました。 dockerでnuxt.jsの環境を作ってみる https://qiita.com/reflet/items/e7c33f84ab43ab237ee4 Dockerfile FROM node:12.1.0-alpine WORKDIR /app RUN npm install –global @vue/cli @vue/cli-init WORKDIR /app/titanic-client RUN yarn install ENV HOST 0.

Kaggleのタイタニック問題は、機械学習の基礎として面白いので、それを活用し、かつ、技術書典の2冊で学んだことも生かして、アプリを作ってみましょう。 Kaggleのタイタニック問題で機械学習  Nuxt.js と Python でつくるぬるさく AI アプリ開発入門 コンテナ時代のWebサービスの作り方 環境のイメージ たどり着けるかわかりませんが、ゴールのイメージとしては、下記のようになります。 ローカルにDockerでNuxt.jsのWebアプリ環境 Jupyter Notebookで機械学習環境を作り、responder のAPIサービス環境はDockerで Dockerプライベートでレジストリとして、GitLab Container Registry プライベートレジストリからAzure App Service に公開 DockerによるNuxt環境構築 今回フォルダ構成はこのようにしています。 titanic -app –docker-compose.yml –client —Dockerfile –server —Dockerfile 参考にさせていただいたのはこちら。 Nuxt.jsの動作環境をdockerで作る https://qiita.com/FrozenVoice/items/2ae89ce820cade84924e 若干新しいバージョンに変更しました。 client/Dockerfile FROM node:12.1.0-alpine RUN mkdir /app WORKDIR /app RUN npm install -g vue-cli ENV HOST 0.0.0.0 EXPOSE 3000 docker-compose.yml version: ‘3’ services: app: build: ./client volumes: - ./client:/app ports: - "

技術書典6で購入した本2冊目。 これも素晴らしい。#技術書典6 の #ぬるさくAI ですが 14時に完売しました！！ ご購入いただいた皆様、本当にありがとうございました！！！ BOOTHでのpdf販売を同時に開始しましたので ぜひ、#技術書典 にお越しいただけなかった方、ご購入ください！https://t.co/S7fajL0B8o — takayama.k (@pco2699) April 14, 2019 なんとか連休中に平成最初のリリースまで持って行きたかったのですが、色々つまり出してきたので、実際に何かを作ってリリースするところを目指したいと思い、Docker環境構築までで一旦まとめておきたいと思います。 Jupyter Notebook いきなり、あなたの知らない世界で、Jupyter Notebook のインストールから。 こちらなども参考に。 https://techacademy.jp/magazine/17430 まずはAnaconda をインストール。Anaconddaで2.3GBも使うんですね・・・ インストールしたら、 Enviroments > 「analytics」 Notebookをインストールしようとして間違えてJupyterLabをインストールしてしまいました。そうしたらNotebookも勝手に入りました。 3.3.1 データセットを読み込む 第１章、第２章も読み応えありますが、作り始めるのは第３章からになります。 初めてJupyter Notebook を使う身としては、色々不明点を抱えながら進めます。どうやって実行するんだ、というところから始まりますが、Runボタンで実行です。 実行すると、エラー。 ModuleNotFoundError Traceback (most recent call last) <ipython-input-2-aed2979e33dd in <module 1 # 分析に必要なライブラリをインポート —- 2 import pandas as pd 3 import numpy as np 4 5 # データセットを読み込む ModuleNotFoundError: No module named ‘pandas’ 先に