３月からVue.jsとLaravelを中心に独学を開始→Webサービスを作るまでのお話。
- スキルを習得するにはやっぱり実際に何かを作ってみるのがいいよね
- クラウドソーシング用のポートフォリオに作ったものを載せたい
ということで１つサービスを作ってみました。
作ったのは「ポーションジェネレーター！」という、メーカー系Webアプリです。
公開URL: https://p.sigr.io/
診〇メーカーみたいなメーカー系webアプリなら比較的短期間で作れるかな？と思ってこのサービスを作ることに決めました。
サービスの概要
よくみかけるメーカー系アプリにポーション要素を追加したもの。
実際の動作は以下のようなかんじ
すいません。なんか汚い単語が出ていますがランダムなので許してください（）
作成画面
ポーションの種類もいろいろあり、作成するときに好きなのを選べます
アニメーションは拾い物（他のゲームからの移植）なのでこのサービス用に作ったわけではないです
使用したフレームワークなど
タイトルにもありますが、改めて。
- Vue.js (いま話題？の)
- Laravel (phpのフレームワーク)
- Vuetify (大好きなVue.jsのUIフレームワーク)
- MySQL (データベース)
選んだ理由
上記のフレームワークなどを選んだ理由について。
フロントエンドにVue.jsを選んだのは話題の３大JavaScriptフレームワークに触れてみたかったからです。
いままでバニラとNode.jsしかまともに触ってこなかったので。
バックエンドにLaravelを選んだのはログイン機能を実装するのが超簡単そうだったから。ただそれだけです。
一度バニラでやって心折れそうになったので選んでみました。
結果的にMVCモデルについて少し理解できたのでよかったです。
Vuetifyは「なんて綺麗なUIなんだ！しかもcssほぼ書かんでいいやん！」ってなって選びました
データベースはMySQLにしました。
正直MySQLしか触ったことなくてデータベースの使い分けとか全然わかってないのでテキトーです。
公開するまでの流れ
ローカル環境から本番環境で公開するまでの流れを説明します。
本番環境は月額払ってるのに特に何も動いてなかったVPSちゃんを選びました。
月額４００円くらいの格安VPSです。
公開までの流れ
- データをローカルからvpsにアップロード
- vpsでlaravelが動くように環境構築
- VPSにドメインを設定
- Cloudflareで高速化&SSL化
データをローカルからVPSにアップロード
本番環境へのアップロードはBitbucketというgitリポジトリ管理サービスを経由して行いました。
Bitbucket: https://bitbucket.org/product/
vpsでLaravelが動くように環境構築
ここで一番苦労した気がします
あまり覚えていませんがエラーがいっぱい出て大変だった気がします
VPSにドメインを設定
Laravelの公開ディレクトリにアクセスするようにVPSで設定を行いました。
OSはUbuntuなので以下のページが参考になりました
https://www.server-world.info/query?os=Ubuntu_18.04&p=httpd&f=7
Cloudflareで高速化&SSL化
大したwebアプリじゃないのでSSL化はさほど重要ではなかったのですが、
vpsが格安なせいか速度が微妙だったのでCloudflareをはさんでみました。
cloudflareはキャッシュをとってくれるのでVPSも負荷が減って喜んでいると思います。
無料で使えるのがスゴイ
https://www.cloudflare.com/
今後の課題
完成はしましたが、いろいろ課題もあります。一部挙げてみました
- データベースについて理解を深める
- アップデートするときにFTPでやってるのをなんとかする
まずデータベースについて、MySQLを選びましたが選び方が全然よくわかってないので理解を深めないといけません
今のところいろんな記事読んでも理解できていませんTT
そして実は今、本番環境のファイルをアップデートするときにFTPソフトでドラッグ＆ドロップしてるという状態です
「gitでアップロードして動かなくなったらどうしよう」と思ってたらこうなりました；；
見直さないといけない部分もありますが、とりあえずポートフォリオに書けそうなものは作れたので良かった！
以上になります