2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Nuxt / Laravel(Docker) / AWS(EC2)で作るシンプルなCRUDアプリ

Last updated at Posted at 2021-01-12

(ポートフィリオの紹介になります。)
タイトルの通り、フロントはNuxt、バックエンドはLaravel(Docker)でシンプルなCRUDアプリを制作、
Nuxtはheroku、Laravel(Docker)はAWS(EC2)*にデプロイしました。
NuxtはSSR(ユニバーサル)、API認証にsanctumを使用しています。
それぞれの具体的な解説は別の記事にまとめていきたいと思っています。

*当初はLaravelもHerokuにデプロイしたのですが、後にAWS(EC2)にリプレイスしました。

制作したアプリケーション
*現在、SSL証明書の期限が切れ表示されません。対応中です。

スクリーンショット 2021-01-12 16.19.35.png

機能

  • バリデーション: コメントを投稿したユーザー(本人)のみ編集と削除ができる
  • いいね機能: 自分がいいねしたボタンは色が黄色に変化する。再び押すと取り消される。

課題

  • エラーハンドリング
    • 前までは動いていたはずなのに、ケアレスミスでいつの間にか動かなくなっている、という状況が発生。
      修正することはできたが、テストの重要性を感じた。
      それぞれの機能を疎結合にしてテストしやすくしたい。
  • Nuxt
  • 非同期の理解を深め有効に活用したい。
  • 監視プロパティーを活用し、よりインタラクティブな処理を書きたい。
  • Dotenvが急に機能しなくなったので、現状はURIのフルパスで記述しています。

参考

Dockerデプロイ - [git pushでDocker環境をHerokuにデプロイする](https://qiita.com/stepiko135/items/24c462c0a065e6f579a6) - [docker + Laravelアプリをherokuにデプロイする](https://www.gintonix.xyz/post-254/#toc4) - [【超入門】20分でLaravel開発環境を爆速構築するDockerハンズオン](https://qiita.com/ucan-lab/items/56c9dc3cf2e6762672f4)
Nuxt - [Nuxtを使ってPromise, async/awaitのコードを書く](https://qiita.com/yasudadesu/items/3262784bd4e45df57314) - [JavaScriptで一定時間待ってから処理を開始する方法](https://laboradian.com/js-wait/) - [Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (16) エラーハンドリング Part.2](https://www.hypertextcandy.com/vue-laravel-tutorial-error-handling-part-2)
Laravel - [Laravel 粘着質なcacheを削除しよう!](https://qiita.com/A-Kira/items/5fd039217ba992481267)
Auth - [Nuxt.jsでAuth Moduleを使ってログイン機能を実装する](https://qiita.com/itouuuuuuuuu/items/1dc6401022e0d771c757) - [【Laravel + Vue】 Laravel Sanctum を使ってAPI認証を構築してみる](https://qiita.com/ntm718/items/ada07bad631a39ca30b9) - [nuxt.js + auth使用時のFATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory解消法](https://qiita.com/RikuKomiya/items/9543770f6b0a9ea1936e) - [【Nuxt.js】ログイン前後のリダイレクト処理をミドルウェアで実装する](https://blog.cloud-acct.com/posts/u-nuxt-redirect-middleware/)

メモ

  • 基本的にはシンプルなCRUDアプリなので、上記の参考と公式を見たらできると思う。あまりまとめる事柄が無い..?
  • CRUDだがshowのページを作っていない。そのためfor文を使って全投稿を表示している。削除や編集の時はクエリをパスにプッシュすることで個別の投稿データを取り出している。
  • AWSは初挑戦だったので、まず公式のチュートリアルを見てLaravelとWordPressをデプロイすることから始めた。VPCなど基本的な事柄を学べるので、初心者におすすめ。


2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?