GoとVueでSPAに挑戦 構成まとめ

はじめに

学生エンジニアのしゅんです！
11月に1ヶ月かけてGoとVueを使用して初めてのSPAに挑戦しました。
とっても楽しかったです！！！

アプリの内容はinstagramに近い感じで

• 投稿CRUD
• セッション管理
• フォロー
• いいね
• コメント
• DM機能

こんな機能を持ったアプリです。
フロントのGithub
バックエンドのGithub

このアプリの構成と作成に伴って使った教材について簡単に文字起こししてみようと思います。
もし初学者の方で同じようなアプリを作ろうとしてる方にとって良い記事になれば幸いです。

目次

1. 使用した技術・フレームワーク
2. フロントエンド
3. バックエンド
4. デプロイ
5. まとめ

使用した技術・フレームワーク

フロントエンド

• Nuxt.js (Vue.js)

バックエンド

• Beego (Go)
• Docker
• Minio

その他

• AWS
• Firebase (認証まわり)

フロントエンド

学習方法

夏休みに作成したLaravelでの掲示板アプリはフロントもLaravelで実装しました。
でもこれだとページ遷移の速度が全然ダメだし、フロント側でのデータ管理が難しかったです...

その為今回はVue.jsのフレームワークであるNuxt.jsを使用して開発をしてみました！
学習するにあたって使用した教材はこれです！
Nuxt.js - Vue.js on Steroids
日本語訳が無いのが渋かったですが、初めてのフロントエンド開発にあたって非常に勉強になりました！

フロントのGithub
こちらを見ればフロントの構成はわかると思いますが、特に開発している時にポイントだと感じたのは

Vuexでのデータ管理の流れ

これだと思います。
--主な流れ--
1. Viewからdispatchで[action]を呼んでaxiosでバックエンドと通信
2. [action]からcommitで[mutation]を呼ぶ
3. [mutation]で[state]のデータ情報を更新
4. [getters]で[state]のデータを必要な形に加工
5. ViewでVuexのデータが欲しい時は[getters]を呼ぶ

後は、

セッション管理

僕が今回フロントの中で一番構成に悩んだのがここでした。
結局Firebase Authenticationを使用してセッション管理を行いました。

--ポイント--
独自トークンを生成してユーザに付与するのですが、Vuexでは無くCookieに保存する事でコードソース上にトークンを載せない事。
そしてCookieに有効期限を持たせて、ページ遷移毎にMiddlewareでCookieのトークンが存在するかどうかをチェックする事でユーザの閲覧権限を確認する事です！

--主な流れ(ログイン・新規登録)--
1. Firebaseのapiを叩いてログインor新規登録
3. jwtをHeaderに付けてバックエンドにリクエストを投げる
4. バックエンドでFirebaseのapiを叩いてjwtの有効性を確認後、独自tokenを作成
5. 返ってきたユーザ情報をVuexに、独自tokenをCookieに保管（有効期限も決める）
6. 後はMiddlewareでCookieを毎回チェックする

バックエンド

学習方法

バックエンドにはBeego(Golang)を使いました。
PHPならLaravel, PythonならDjango みたいな人気Webフレームワークはまだ無いみたいでした。
今回はBeegoを使いましたが、Ginというフレームワークもstar数が多かったです。

学習する際に使用した教材はこちらです！
Go言語自体：A Tour of Go
Beego：公式ドキュメント

A Tour of Goはかなり難しい内容になっていました。(所々、「これくらいは知ってるでしょ」って感じで話が進みます)
ですので分からない所をググりながら進めていく感じになると思います！

API

今回は簡単なAPIしか作っていないのでこれといって特筆する事はないです...

DB

ORMにはgormを使用して、E-R図は以下のようになりました。

Docker

また、今回初めてDockerを使いました。
学習教材にはYoutubeに転がっていたものを利用しました。

今回のアプリではAPI, DB, Minioの3つのサーバーをコンテナ化しました。
Dockerに関する記事もいつか出せればなと思います！

デプロイ

AWSを使用しました。
前回のLaravelアプリでAWSのec2とs3を使用してデプロイした事があったので今回は教材を使って学習はしていません。

構成は以下の図のようにしました。

まとめ

開発コスト

今回のアプリを作成にあたって
教材費：1600円 (Nuxt.js - Vue.js on Steroids)
デプロイ費用：約12$ (ドメイン名購入など)
という感じで合計3000円くらい要しました！

時間コストとしては
学習+開発：18日
デプロイ+修正：10日
という感じでバイトもやらずに丸々11月開発していました！
特にデプロイとデプロイ後のエラー修正が下手くそで時間がかかってしまいましたT_T

良かった点

• SPAの基礎が分かった
• Laravelの時より断然開発が楽しい
• 開発前に要件定義や開発予定表などをまとめたので開発中は開発に集中できた
• もっと勉強したい技術がいくつか見つかった
• 楽しかった
• インフラ周りの知識と経験値が得られた
• とても楽しかった

反省点

• MP4データの処理をしてみたかったが時間が足りなかった(インスタでいうストーリー機能)
• 情報の収集方法が確立されてないから時間がかかった
• 11月はバイトやらなかったから金欠になった
• 授業中もコード書いてた
• お金が足りない

とりあえず11月は楽しかったです！
アウトプットしながらの学習がやっぱり最強だなと再認識しました！

もし最後まで見てくださった方がいらっしゃったら閲覧ありがとうございました。
何か少しでも参考になれば幸いです。