--- title: 通勤時間でまだそんなに消耗してるの?〜無料でWEBアプリ(時給計測シミュレーター)作った〜 tags: Flask Python3 Vue.js vue-cli Heroku author: lunalice slide: false --- # 前置き タイトルは釣りです。リモートワーク関連に期待された方はすみませんorz 内容は一年前に作った動的っぽい挙動をする静的サイトをwebアプリにしたという内容です。ご了承ください。 ↓前回 【客先常駐SES向け時給シミュレーターを作る(やだ・・・あたしの年収低すぎ・・・?)+転職についての雑記】 https://qiita.com/lunalice/items/c788b82ba52ad940ac9c 最近また転職について考える事があって、前回と違って今回はそれなりにエンジニア職っぽい事を経験してやれる事は増えてるはずなんですが、プロジェクト内のコミットは持ってこれないし、何かしら作れるという事をアッピルするために何かちょいちょいコミットしておきたいなぁと思って今回2回目の作成物です、1回目はまた別記事にする予定。 # 本題 先に作成物から。 ¥Time-Is-Money$ https://re-time-is-money.herokuapp.com/

31才さんのコスパは...
時給:2634円
日給:21073円
通勤時間(年):174時間
年間消費金額:513316円
実収入:4986684円
https://t.co/wE38fSzDaT #コスパシミュ

— やまP (@yamashitaP21) August 5, 2020
ソースコードはこちらにございます。 https://github.com/lunalice/time-is-money いつも業務で使ってるのはRuby on Railsなんですが、前回転職の際pythonかrubyか迷って求人数からrubyを選択した経緯があって、でも自分の好きなように作るならpythonにしました。で、フルスタックなフレームワークよりミニマムでいいかなと思ってFlaskを選択。フロントはちょっと調べてvue-cliが楽そうなのでそうしました。業務でもvue使ってますが設定関係が凄く面倒臭い・・・ デザインセンスがないので本当どうにかしたいお気持ち表明。 deploy先は全てにおいて無料を貫くつもりだったのでherokuにしました、楽なので。 作ろうと思って本当に合間合間でしたが(休日はほぼゲームしてた)二週間くらいで形にはなってくれました。 簡単に環境をまとめると以下となります。同環境で作成する方の参考になればと思います。 - @vue/cli 4.4.6 - python-3.7.8 - heroku - pipenv - その他ライブラリいろいろ - 鯖代無料で作る! ## 前回について補足 前回作成した環境は記事を見て頂いてもろた方がいいんですが、こんな環境で作成してました。 - 客先常駐 - 外部インターネットが使えない。 - Windows(旧版) - 作業自体は楽だったり待ちの時間が多い環境 - 開発環境が無い そんな中出来上がったソースコードはこれ
長すぎるので見なくてもよきソースコード
```html | | |:--| | | | | | | | | | 時給シミュレーター | | | | | | | | | | | |

時給シミュレーター

| |
| | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | | |
年齢
年収万円
休日(年)
勤務時間(日)時間
残業時間(年)時間
通勤時間(片)
家賃(月)
| | | |
| | | |
| |
| | | | | | | | | | | ```
当時の自分に言いたい、きったないし色々間違ってる! まぁ調べ物も出来ないし確かメモ帳かサクラエディタで書いてたのでフォーマッターとかない状況でよく書いたと思います。ライブラリも何もない状態でhtmlだけでDBのCRAD再現してるの頭おかしいと思います。 これをwebアプリにreplaceする感じで作成していきます。 で、一から説明も長くなるし先人が大量に情報を残してある状態なので、参考リンクを張りつつ、詰まった部分やポイントと思ったとこ、大変だった所だけ記載していこうかと思います。 ___ 【参考】 FlaskとVue.jsでSPA Webアプリ開発 https://qiita.com/y-tsutsu/items/67f71fc8430a199a3efd Vue.js + FlaskでWebアプリケーション制作 - herokuにデプロイするまで - https://qiita.com/Nonta0605/items/5d8fa9a8eda9b3b7bc33 Vue.js(vue-cli)とFlaskを使って簡易アプリを作成する【前半 - フロントエンド編】 https://qiita.com/mitch0807/items/2a93d93adbf6b5fc445c ___ ## 詰まった所 まず先に結論から申し上げると以下を使えばおこらなかった可能性が高いので、もし同環境で作りたい方は使用をおすすめ致します。 https://github.com/gtalarico/flask-vuejs-template ### 旧仕様から現仕様の置き換えが大変だった 前回作ったものをベースにしたのですが、javascriptに見えてWScriptというものだと思います、確か。 普通にvueにぺたっと貼り付けても使えないのとそもそもファイルの読み書きでCRADを表現してましたが全然いらない処理ですし、今回は文明の力、フォーマッター入れててめっちゃエラーはいてくるし実はアイデアだけ持ってきて1から記載しました。今回から得られた教訓は__現行踏襲って大変だよね。__ ### Vue-cliは最新のものを使う 凄く初歩的な話ですが、参考記事そのままの環境ではダメです。 このアプリを作り直す際、気軽な気分で始めたのもあるんですが、frontendは進化の早い分野ですので、バージョンの違いが挙動を著しくバグらせます。 自分がやらかしたのはvue-cli 3.0.0(現在4👆)で作り始めて、vue-cli触った事なかったのもあって知らずに、やたらとwebpackがエラーふくなぁこんなもんかなぁとpackage.jsonのupdateを始めてしまいました(業務でやったので・・・苦行やん・・・)いやいや、開発楽にする為のvue-cliなのにおかしいやろと現実に帰ってバージョンあげたら一発で通りました、気をつけます。 エラーの理由としてはクリティカルのものとしてvue-cli3の依存関係にあるライブラリがセキュリティ的にアウトで使えなくてバージョンあげないと行けなくて芋づる式にいろいろバージョンをあげないと行けなくなっていました、苦行。 ### vue.config.jsonをしっかり見る vue-cliの大元と言ってもいいんですが、ここの記載によりアウトプットがガラッと変わります。 自分が困ったのはFlaskと連携するindex.htmlがFaviconを認識してくれない所が始まりでした。 この関連で困ったのはservice-worker・favicon・manifestだったと思います。 ```vue.config.json module.exports = { outputDir: "dist", assetsDir: "static", pages: { index: { entry: "src/main.js", title: "TimeIsMoney", }, }, pwa: { name: "time-is-money", manifestPath: "static/manifest.json", manifestOptions: { icons: [ { src: "img/icons/android-chrome-192x192.png", sizes: "192x192", type: "image/png", }, { src: "img/icons/android-chrome-512x512.png", sizes: "512x512", type: "image/png", }, ], }, outputDir: "static", iconPaths: { favicon: "static/favicon.ico", favicon32: "static/favicon.ico", favicon16: "static/favicon.ico", appleTouchIcon: "static/img/icons/apple-touch-icon-152x152.png", maskIcon: "static/img/icons/safari-pinned-tab.svg", msTileImage: "static/img/icons/msapplication-icon-144x144.png", }, workboxPluginMode: "GenerateSW", workboxOptions: { swDest: "static/service-worker.js", // ...other Workbox options... importsDirectory: "static", }, }, }; ``` 当初はほぼ何も書かずに生成しようとしていました。浅はかなり・・・ まず勘違いしやすいポイントですがiconPathsとmanifestOptions.iconsは別ものだという事が一つ。 一番やられたのが自分の設定だとFlaskがdist/staticの中身しか参照しないのですが、初期設定だとdist内にservice-worker/manifest/faviconもろもろが生成されるので、Flask立ち上げからのlocalhostで確認してもずっとfavicon変わらないし変なエラーおきてるしvue-cliもFlaskも経験値なさすぎで全然わからんわ・・・ってつまりました。冷静になって生成物を確認するとurlとかなんかいろいろおかしいなってなり気付きました。__無記載だとデフォルト設定されるものが多いと思うのでその辺りの確認が必要ですね__ ### SQLAlchemyが変なエラーを吐く これは自分がpythonを使い慣れてないせいもあるんですが、readしただけなのにやたらとエラー吐くなぁと思いpython使い的には常識なのかしら・・・以下記事を参考にとりあえずエラーは減少しました。 [Python]SQLAlchemyのエラー回避備忘録 https://qiita.com/yukiB/items/67336716b242df3be350 ### herokuにdeployしたらエラー起きる問題 まずherokuの使用としてpackage.jsonがローカルにある想定で動きます。 ので今回のディレクトリ構成だと以下の感じで動くわけもなく・・・ - application - frontend - package.json - .gitignore - backend - flask_application - .gitignore - .env いろいろ記事を参考にしてpackage.jsonをローカルに移し.gitignoreからdistを消してdeployとか個人的にちょっとうーん・・・と思う内容が多くて、流石にherokuさん毎回生成物コミットしてpushしないといけないとかherokuとvue-cli素人の自分でも頭悪いとおm(自主規制) 解決策としては二つやる事があり、まずはシンボリックリンク ``` ln -s 「シンボリックリンク元のパス」 「シンボリックリンクを作成する場所のパス」 ``` 注意としてはこれはデプロイするので相対パスで作成する事。 deploy先で`/user/hogehoge/application/frontend/package.json`とか存在しませんからね!これで少しやらかしました。恥ずかしい。 次にheroku特有の設定。 ``` "heroku-postbuild": "cd frontend; npm install; npm run build" ``` `heroku-postbuild`をpackage.jsonのscriptに記入すると優先して読んでくれます。でとりあえずの解決策として無理やりfrontendに移動してbuildしてます。スマートじゃないと思うので詳しい方は助言ください。 スマートじゃないと思っているのはなぜかというと、多分したみたいなフォルダ構成になっちゃってる。いや確認してないけど多分きっとそう。 - application - node_module - frontend - dist - node_module - package.json - .gitignore - backend - flask_application - .gitignore - package.json - .env ### herokuの環境変数どうやって設定する?? 散々フォルダ構成を提示してきましたが、センシティブなデータは.envに記載してdeployしないように。frontもbackendもライブラリを使って読み込むはずです。しかしこのフォルダ構成。vueの環境変数はfrontendの中に存在するし、一定の行動しかしないherokuにどうやって読み込ませたらいい??問題発生、flaskは普通にos.getenvで読めるのにどうして・・・って思いましたが、結局herokuの設定で解決。 ``` heroku buildpacks:add heroku/nodejs heroku config:set VUE_APP_SENSITIVE=yarn ``` まずherokuにbuildpacksを追加します。その後に__VUE_APP___をつけて環境変数を設定。 vue-cli3くらいからの仕様のようで環境変数にVUE_APPが必要になってます。あとはbuildpackがよしなに環境変数を読み取ってくれますえらい。 ### herokuをスリープしないようにする heroku無料枠だと30分アクセスがない状態だとスリープモードに入ってユーザー的に遅くて残念な感じになってしまいます。それを回避する為に定期的にアクセスするようにしないといけません。 - sendgridを使う - uptimerobotを使う - 自身にアクセスするタスクを組む - etc 調べると色々ある感じだったので自分は無料でいけて手軽なuptimerobotさんを使いました。 ### その他抱えてる問題 herokuのclearDBが無料枠なので5MBしか使えません。MAX10000レコードだったかな?5mbに本当に入るんかいな・・・って感じなんですが、もしアプリが動かなかったら容量バーストしてると思うので許してください、、 # あとがき いろいろ細かい事を書けばあるんですが、大きく困ったのは記載した通り(忘れてるのもあります)。まだちっこうバグいっぱいあるんですが、形になったのでよし。結局触った事ないpython、vue-cli、herokuに振り回されただけだった気もしますが、楽しめました。 今度はVPSかAWSと迷って実務よりなAWSかつRailsでちゃんとしたプロダクト作ろうかなぁと思ってる最中です。簡単なアプリで合間合間で二週間とかかるとガチものプロダクトだと数ヶ月かかりそう(しかもアイデアはあるけどソースにはない)状態なのでやっぱり時間が全てだなぁと思ったり。自分は休日はずっとゲームしたい派なので回らない・・・ 最初に書きましたが、じわじわ転職を考えてるので拾ってくれる企業様はtwitterとかでDM頂けたらなと https://twitter.com/yamashitaP21